Bulmaのグリッドシステム(columns)をレスポンシブWebデザインに対応させる

CSSフレームワークのBulmaには、Bootstrapのグリッドシステムと同じように、コンテンツを網目状の升目に配置して、WebサイトをデザインできるCSSクラスが用意されています。
グリッドシステムを使用すると、整然とコンテンツを並べて表示することができるので、整理されたイメージのサイトを作成できます。

BulmaのグリッドはレスポンシブWebデザイン(パソコン、スマホ、タブレットなど、どのデバイスを使って表示しても、最適で見やすい状態でWebページのコンテンツが表示されるデザイン)に対応しています。

今回は、Bulmaのグリッド(columns)を使用して、レスポンシブに対応する方法について紹介します。

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

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

Bulmaのグリッドシステム

Bulmaでグリッド状に要素を配置するには、columnsクラスとcolumnクラスを使用します。
columnsクラスはグリッドの行(row)に対応し、columnクラスが列(column)に対応します。columnsクラスを指定した要素は、columnクラスを指定した要素のコンテナになります。

Bulmaのグリッドシステム(columns)の基礎について知りたい方は、以下の記事をご覧ください。

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

BulmaのレスポンシブWebでデザインのブレークポイント

BulmaのレスポンシブWebでデザインのブレークポイントには、「mobile(モバイル)」「tablet(タブレット)」「desktop(デスクトップ)」「widescreen(ワイドスクリーン)」「fullhd(フルHD)」の5つがあります。

ブレークポイント一覧

それぞれのブレークポイントのサイズ(ブラウザーのウィンドウサイズの横幅)は、以下の通りです。

ブレークポイント サイズ
mobile(モバイル) 768px以下(~768px)
tablet(タブレット) 769px以上(769px~)
desktop(デスクトップ) 1024px以上(1024px~)
widescreen(ワイドスクリーン) 1216px以上(1216px~)
fullhd(フルHD) 1408px以上(1408px~)

モバイル表示の列

Bulmaのグリッドでは既定値として、サイズがtablet(タブレット)以上(769px~)で列が横に並びます。mobile(モバイル)以下(~768px)になると列が縦に積み重なります。

tablet(タブレット)以上(769px~)

Bulma グリッドシステム 横 769px

mobile(モバイル)以下(~768px)

Bulma グリッドシステム 縦 改行 768px

モバイル(is-mobile)指定

mobile(モバイル)以下(~768px)でも列を横に並べる場合は、columnsクラスを指定した要素(コンテナ)に修飾子「is-mobile」クラスを指定します。

is-mobileを指定してサイズが500px

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

デスクトップ(is-desktop)指定

desktop(デスクトップ)以上(1024px~)から列を横に並べて、desktop(デスクトップ)未満(~1023px)から列を縦に積み重ねる場合は、columnsクラスを指定したコンテナ要素に修飾子「is-desktop」クラスを指定します。

is-desktopを指定してサイズが1023px

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

ブレークポイントごとに異なる列サイズを指定

ブレークポイントごとに列のサイズを切り替えて表示するには、サイズとブレークポイントを組み合わせたクラスを指定します。
クラスは「”is-” + [サイズ] + “-” + [ブレークポイント]」の形式になります。サイズには割合を指定する形式と、12カラムシステムを指定する形式の両方が指定できます。

例えば、tablet(タブレット)時には列のサイズを全体の半分にするには「is-half-tablet」クラスを指定し、desktop(デスクトップ)時には全体の12分の5にするには「is-5-desktop」クラスを指定します。

Bulmaのグリッドシステム(columns)で列のサイズを指定する方法については、以下の記事をご覧ください。

Bulmaのグリッドシステム(columns)列のサイズ指定
前回に引き続き、CSSフレームワークのBulmaを使ったグリッドシステムの使い方について記載します。 前回は、Bulmaのcolumn...

以下に各ブレークポイントごとにサイズを指定する例を示します。
columnsクラスを指定したコンテナの要素には、is-mobileクラスを指定して、サイズがmobile(モバイル)の時にも列が横に並ぶように指定します。

上記の例では12カラムシステムを利用して、mobile(モバイル)時に12分の1、tablet(タブレット)時に12分の8(3分の2)、desktop(デスクトップ)時に12分の6(2分の1)、widescreen(ワイドスクリーン)時に12分の4(3分の1)、fullhd(フルHD)時に12分の3(4分の1)になるようにサイズを指定しています。

mobile(モバイル)サイズ有効時

Bulma グリッドシステム mobile(モバイル)サイズ有効時

tablet(タブレット)サイズ有効時

Bulma グリッドシステム tablet(タブレット)サイズ有効時

desktop(デスクトップ)サイズ有効時

Bulma グリッドシステム desktop(デスクトップ)サイズ有効時

widescreen(ワイドスクリーン)サイズ有効時

Bulma グリッドシステム widescreen(ワイドスクリーン)サイズ有効時

fullhd(フルHD)サイズ有効時

Bulma グリッドシステム fullhd(フルHD)サイズ有効時

まとめ

今回はBulmaのグリッドシステムを使ってレスポンシブWebデザインに対応する方法をご紹介しました。

グリッドシステムのレスポンシブクラスを使うことでデバイスごとの幅に合わせてレイアウトを変化させることができます。
BulmaのレスポンシブクラスはCSS3のメディアクエリを使用していますので、ブラウザの横幅のサイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。

ブレークポイントがモバイルとデスクトップの場合の対応であれば、columnsクラスを指定したコンテナ要素に、is-mobileクラスとis-desktopクラスを指定するだけなので、簡単に適用ができます。
また、ブレークポイントごとに細かく設定する場合でも、column要素を指定した列要素に、モバイル、タブレット、デスクトップ、ワイドスクリーン、フルHDごとにサイズを加味したis-6-tabletなどのクラスを指定するだけなので難しくありません。

Bulmaのレスポンシブクラスを身に付ければ、様々なレイアウトのサイトが手間をかけずに作成できますので、これを機会にBulmaのグリッドやレスポンシブのクラスに触れてみてはいかがでしょうか。