CSSフレームワーク Bulmaのボックス Box

Bulma ロゴ トップ バナー

Webページをレイアウトしていると、いくつかの要素の集まりを1つのボックスにまとめて配置したい場合があります。

Bulmaには、ボックスを簡単に配置するためのクラスが用意されています。

今回はボックス領域を実現するboxクラスについて紹介します。

他の要素を含む白いボックスを定義するboxクラス

Bulmaに用意されているboxクラスを利用すると、他の要素を含むボックスを表現できます。
boxクラスを指定した要素は、白背景で、適度なパディングと影(ボックスシャドウ)を持つ単純なコンテナとなります。

例えば次のようなテキストコンテンツがあり、ボックス内に配置したい場合に使用できます。

Hello Vue.js!

boxクラスを使用してコンテンツをボックス内に配置する場合は、以下のように記述します。

boxクラスを使用してボックスを配置するとコンテナとして機能するため、フォーム要素などの他のコンポーネントを簡単に含めることができます。
Bulmaのboxクラスを指定した要素には、適度なパディング(余白)が設定されます。また、要素には影が設定されますので少し浮き出したように描画されます。

boxクラスの使用例

以下にboxクラスを使用した一例を示します。

ここでは、サインイン(ログイン)時に使用されるIDとパスワードを入力するフォームを作成します。

HTML

ブラウザーでの表示結果は以下のようになります。

Bulmaのboxクラスを使用したサンプルのブラウザーでの実行結果

ボックスを複数並べた場合は、ボックス間には適切なマージン(スペース)が設定されます。

Bulmaのboxクラスを複数使用したサンプルのブラウザーでの実行結果

HTML

Bulma 入門 Tips 一覧