Bulmaのグリッドシステム(columns)列のサイズ指定

前回に引き続き、CSSフレームワークのBulmaを使ったグリッドシステムの使い方について記載します。

前回は、Bulmaのcolumnsクラスとcolumnクラスを使って、基本的なグリッドを表示しました。
class属性にcolumnクラスを指定した要素をcolumnsクラスを指定した要素でラップすることで、columnクラスを指定した要素(列)を1行にまとめて表示できることを確認しました。
columnsクラスの要素内に配置したcolumnクラスの要素は、全体の横幅(columnsクラスの要素のWidth)内で均等な幅で並べられます。

ブラウザーでの表示

Bulma グリッドシステム 縦3行 横3列

列が均等に並べられた状態では、様々なスタイルのWebページには対応ができません。
そこで今回は、columnクラスを指定した各列の要素のサイズ(横幅)を指定する方法を紹介します。

前回の内容については、以下の記事をご覧ください。

Bulmaのグリッドシステム(columns)の基礎
CSSフレームワークのBulmaにはBootstrapと同様に、要素をグリッドのように格子状に配置するための仕組みが用意されています。 今...

Bulmaを導入する方法については、以下の記事をご参照ください。

Bulmaを導入(インストール・CDNから参照)する
CSSフレームワークのBulmaを使うと、レイアウトやエレメント、フォーム要素などのスタイルを簡単に設定できます。また、Bulmaは...

割合でサイズを指定する

グリッドの列は「半分」「全部」「3分の2」などの割合で指定することができます。

ブラウザーでの表示

Bulma グリッドシステム 列is-half指定

上記の例では「is-half」クラスを指定して全体の半分のサイズに指定しています。
サイズを指定した列以外にcolumnクラスを指定した列を配置すると、サイズは自動で均等になります。

列のサイズを指定しない列を2列にした場合

ブラウザーでの表示

Bulma グリッドシステム 列is-half指定

サイズを指定した列以外の列を配置しない場合は余白になります。

列のサイズを指定しない列を配置しない場合

ブラウザーでの表示

Bulma グリッドシステム 列is-half指定

割合で指定できるサイズクラス

割合で指定できるサイズのクラスには以下のものがあります。

クラス名 サイズ(幅)
is-full 全部・1分の1(1/1)
is-half 半分・2分の1(1/2)
is-one-third 3分の1(1/3)
is-two-thirds 3分の2(2/3)
is-one-quarter 4分の1(1/4)
is-three-quarters 4分の3(3/4)
is-one-fifth 5分の1(1/5)
is-two-fifths 5分の2(2/5)
is-three-fifths 5分の3(3/5)
is-four-fifths 5分の4(4/5)

以下にサンプルコードとブラウザーでの表示結果を示します。

ブラウザーでの表示

Bulma グリッドシステム サイズ指定 割合全クラス

12カラムシステム

Bulmaには列のサイズを指定するために「12カラムシステム(12 columns system)」が用意されています。
12カラムシステムでは12分割した列のうち、何列分の幅にするかを数値で指定したクラスを使用します。例えば横幅いっぱい12列分であれば「is-12」、半分であれば「is-6」、4分の1であれば「is-3」のようになります。

12カラムシステムで指定できるサイズクラス

12カラムシステムで指定できるサイズのクラスには以下のものがあります。

クラス名 サイズ(幅)
is-1 12分の1(1/12)
is-2 6分の1(1/6)
is-3 4分の1(1/4)
is-4 3分の1(1/3)
is-5 12分の5(5/12)
is-6 半分・2分の1(1/2)
is-7 12分の5(5/12)
is-8 3分の2(2/3)
is-9 4分の3(3/4)
is-10 6分の5(5/6)
is-11 12分の11(11/12)
is-12 全部・1分の1(1/1)

以下にサンプルコードとブラウザーでの表示結果を示します。

ブラウザーでの表示

Bulma グリッドシステム サイズ指定 12カラムシステム全クラス

余白のサイズを指定する

is-halfやis-three-fifthsなどの割合の指定や、is-12やis-3などの12分割した列数での指定は、余白(スペース)を指定するオフセットとしても使用できます。
次のコードは、is-halfクラスを指定した列(column)の左(前)にis-one-quarterクラス分の余白を指定する例と、is-10クラスを指定した列(column)の左(前)にis-1クラス分の余白を指定する例になります。

ブラウザーでの表示

Bulma グリッドシステム 余白(オフセット)指定

余白を指定する際は「”is-offset-” + [割合または列数]」の形式でクラスを指定します。例えば、3分の1分の余白であれば「is-offset-one-third」クラス、3列分の余白であれば「is-offset-3」クラスをcolumnクラスと共に指定します。