Webページをレイアウトしていると、いくつかの要素の集まりを1つのボックスにまとめて配置したい場合があります。
Bulmaには、ボックスを簡単に配置するためのクラスが用意されています。
今回はボックス領域を実現するboxクラスについて紹介します。
他の要素を含む白いボックスを定義するboxクラス
Bulmaに用意されているboxクラスを利用すると、他の要素を含むボックスを表現できます。
boxクラスを指定した要素は、白背景で、適度なパディングと影（ボックスシャドウ）を持つ単純なコンテナとなります。
例えば「Hello Bulma!」というテキストコンテンツがあり、ボックス内に配置したい場合は、boxクラスをコンテンツのコンテナとなる要素に指定します。
|
1 2 3 |
<div class="box"> Hello Bulma! </div> |
boxクラスを使用してボックスを配置するとコンテナとして機能するため、フォーム要素などの他のコンポーネントを簡単に含めることができます。
Bulmaのboxクラスを指定した要素には、適度なパディング（余白）が設定されます。また、要素には影が設定されますので少し浮き出したように描画されます。
boxクラスの使用例
以下にboxクラスを使用した一例を示します。
ここでは、サインイン（ログイン）時に使用されるIDとパスワードを入力するフォームを作成します。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form class="box"> <div class="field"> <label class="label">ID</label> <div class="control"> <input class="input" type="email" placeholder="アカウントのIDを入力してください。"> </div> </div> <div class="field"> <label class="label">Password</label> <div class="control"> <input class="input" type="password" placeholder="********"> </div> </div> <button class="button is-primary">サインイン</button> </form> |
ブラウザーでの表示結果は以下のようになります。
ボックスを複数並べた場合は、ボックス間には適切なマージン（スペース）が設定されます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="box"> ボックス1 </div> <div class="box"> ボックス2 </div> <div class="box"> ボックス3 </div> |
