【 BoxとCard 】

Box と Card

Bulma に Box とか Card とかいうのがある。これを真似てみる。

Bulma の Box と Card

Bulma の Box はこんな感じのもの。

John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.

Bulma の Card.

John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.

見た目は角が四角いか丸いかの違いである。 この Bulma の Box と Card を参考に似たような仕組みを作れないだろうか？

block要素の width指定

.box,.cardというクラスで上のような箱になるようにして、すでに作ったwd-数値で横幅を指定できるようにしてみる。

[HTML(Box width:”20%”) sample]

<p class="box wd-20">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.
</p>

[css]

.box {
    display: block;
    margin: 0;
    padding: 0.5rem;
    box-sizing: border-box;
    border-radius: 6px;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
}

boxクラスのCSSに横幅は指定しない。ブラウザにもよるのだろうがChromeだとwidth:"auto"で親要素の横幅いっぱいになる。だから指定しないとデフォルトのwidth: autoになっている。

Box の例

[.box .wd-20]

Lorem ipsum dolor sit amet.

[.box .wd-30]

Lorem ipsum dolor sit amet.

[.box .wd-40]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[.box .wd-50]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.box .wd-60]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.box .wd-70]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.box .wd-80]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.box .wd-90]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.box .wd-100]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

Card の例

[.card .wd-20]

Lorem ipsum dolor sit amet.

[.card .wd-30]

Lorem ipsum dolor sit amet.

[.card .wd-40]

Lorem ipsum dolor sit amet, consectetur adipiscing elit..

[.card .wd-50]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.card .wd-60]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.card .wd-70]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.card .wd-80]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.card .wd-90]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

[.card .wd-100]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

Box, card の活用

kramdown のクラス指定は、一番直近(外側)の要素に加わる。 例えば Box と card の中身を次のようにHTMLで書けば、外側のDIV要素にboxクラスが加えられる。こんな写真入りのカードっぽい要素にもなる。内側だけ Flexbox 使えばもっとよくなるかも。手書きはちょっとめんどうだが、他にももっといい方法はないか？

[markdown]

<div>
![church](/assets/images/013.jpg){:height="135px" width="150px"}
<p>Lorem ipsum dolor sit amet, <br>
consectetur adipiscing elit.<br>
Aenean efficitur sit amet massa fringilla egestas.</p>
</div>
{: .box.wd-fit style="display:flex;padding:0 0.8rem 0 0;"}