CSSフレームワーク Bulmaのブロック Block

Bulma ロゴ トップ バナー

Webページをレイアウトしていると、適度なスペース(マージン)を確保した領域を配置したい場合があります。

Bulmaには、コンテンツや要素の間に適度なスペースを簡単に入れることができるクラスが用意されています。

今回はスペースを確保した領域を実現するblockクラスについて紹介します。

基本的なスペーサーブロックを定義するblockクラス

Bulmaに用意されているblockクラスを利用すると、同じ階層にある兄弟のHTML要素の間に適切なスペース(マージン)を持たせることができます。

例えば次のような3行のテキストコンテンツがあり、それぞれの間に余白を指定したい場合に使うことができます。

先頭のブロック
2番目のブロック
末尾のブロック

blockクラスを使用してそれぞれのコンテンツをブロックにする場合は、以下のように記述します。

ブラウザーで表示すると以下のようになります。

Bulmaのblockクラスのブラウザーでの実行結果

blockクラスを使用してブロックを配置すると、先頭の要素の上のスペース(マージン)と末尾の要素の下のスペース(マージン)は設定されません。
blockクラスを指定した兄弟要素では、先頭と末尾を除く要素(中間に配置した要素)にのみmargin-bottomが設定されます。
Bulmaのboxクラスでは、末尾(最後)のブロックを除くすべてのブロックに対してのみスペースが適用される仕様になっています。
上記の仕様により、必要な数のブロックを使用することができ、ブロックの間隔(スペース)は、配置したブロックの間に適切に設定されます。

blockクラスは以下のように定義されており、最後の兄弟を除くすべての兄弟にmargin-bottomが適用されます。

blockクラスの使用例

ここでは、blockクラスを使用した一例を示します。

blockクラスを使用せずに要素を配置した場合は、以下のように要素の間にはスペースは設けられません。

Bulmaのblockクラスを使用しない場合のブラウザーでの実行結果

HTML

ここでは、ボタンを持つテキストボックス、セレクトボックス、ボタン、メッセージエリアをdiv要素で囲って縦に配置しています。

上記の各要素の親となるdiv要素にblockクラスを使用すると、以下のように適切なスペース(マージン)を持った状態で配置することができます。

Bulmaのblockクラスを使用する場合のブラウザーでの実行結果

HTML

blockクラスを使用することで、適切な間隔をあけて要素を配置することができます。
それぞれの要素にCSSのスタイルを適用することなく画面のレイアウトができるので、さまざまな場面で使用することができそうです。

Bulma 入門 Tips 一覧