プロジェクト推進室の服部 (@yhatt) です。現在は社内の福利厚生制度である Speee Library を筆頭とした社内システムを中心に担当しています。
今回は、遡ること 2 年前に公開した、今更聞けない Bootstrap のレスポンシブ の続編として、Bootstrap 4 正式対応版 に内容をアップデートしてお届けします。
『Bootstrap 4 を使って、"柔軟な" レスポンシブ Web を構築したい』という方は、是非この記事を読んで、Bootstrap 4 のレイアウトシステムの基本をおさえていただけると幸いです。また、『Bootstrap 3 から 4 に移行したい(移行した)』という方のために、v3 と v4 の違いを交えながら解説していきたいと思います。
前回の記事については、以下をご覧ください。
以前公開していた記事は、Bootstrap 3 をベースにしつつ、2015 年 8 月に公開された Bootstrap 4 alpha 版 を対象に含める形で解説していました。しかし、正式版は alpha 版と異なる仕様が多く、以前の記事でフォローするには少しボリューム感があるので、改めて解説記事を執筆することにしました。
目次
- Bootstrap とは
- Bootstrap のレイアウトシステム
- Flexbox
- ユーティリティ (ユーティリティクラス)
対象バージョン
本記事は Bootstrap 4 正式版 (v4.0.0〜) が対象となります。
Bootstrap 3、並びに v4 alpha 版 / beta 版 を対象とした記事については、前回の記事 をご覧ください。本記事では、補足情報として Bootstrap 3 からの変更点なども記載しています。
Bootstrap とは
Bootstrap は、2011 年に Twitter 社によって公開された CSS フレームワークです。もともとは Twitter で使用されていたコンポーネント群で、 それらの汎用性を高めた上でフレームワーク化されたという経緯を持ちます。
習得しやすく、必要十分かつ強力なコンポーネント群を使用できる のが最大の特徴です。今となっては 『CSS フレームワークといえば Bootstrap』 というほどに定番化し、日本語資料も豊富に揃っています。
競合フレームワークには、企業採用例の多い Foundation や、簡潔かつ自然な定義が特徴の Semantic UI、マテリアルデザインに則った Materialize などがあります。
フロントエンド全体では、SPA やコンポーネント指向の波に少し押され気味かもしれません。しかし、プロトタイピング・デザインベースとしての利用など、CSS フレームワークが活躍する場面は未だ多く、定番フレームワークとして不動の人気を集めています。
Bootstrap 4 の登場
Bootstrap 4 の alpha 版が初めて公開されたのは 2015 年 8 月 19 日 のことです。
そこから首をながーーーーーーーーーくして待ち続けること 2 年 5 ヶ月、2018 年 1 月 19 日に、ついに正式版 Bootstrap 4.0.0 がリリースされました。特徴的なアップデートは以下の通りです。
本記事では、Bootstrap 4 から新たに登場した要素のうち、特に Flexbox に重点をおいて説明していきます。
Bootstrap のレイアウトシステム
レスポンシブ
Bootstrap に限らず、Web ページの レスポンシブ 対応は、もはや Web デザインの文脈ではごく一般的になりました。
過去のバージョンには、レスポンシブを適用しないバージョンの Bootstrap (Bootstrap + non-responsive.css) もオプションとして存在していました。Bootstrap 4 では "完全なレスポンシブ対応 (Fully responsive)" となり、未適用オプションは提供されなくなっています。
ブレークポイント
Bootstrap では、画面幅を 4 箇所の ブレークポイント で分割し、計 5 種類の画面サイズで見た目をコントロールできます。例えば、
- PC やタブレット向けには、1 カラムずつ横幅を 3 分割して表示
- スマートフォンでは、各カラムが横幅全体を使って表示
といったような記述を行いたい場合は、以下のような HTML クラス指定で行うことが可能です。
<div class="container-fluid"> <div class="row"> <div class="col-md"> コンテンツA </div> <div class="col-md"> コンテンツB </div> <div class="col-md"> コンテンツC </div> </div> </div>
container / container-fluid は画面全体を示すコンテナクラス（後述）、row はそのコンテナを構成する各行、col は縦列（カラム）になります。
クラスに col-[画面サイズ] を指定することで、 『指定したサイズ以上の画面幅の時は、カラムとして扱う』 という動きになります。
| サイズ | 主な利用用途 | 画面幅 |
|---|---|---|
| xl | デスクトップ PC などの大画面モニタ | 1200px 以上 |
| lg | ノート PC などの省サイズモニタ | 992px 以上 |
| md | タブレット端末など | 768px 以上 |
| sm | スマートフォン（横持ち）など | 576px 以上 |
| - | スマートフォン（縦持ち）、IoT 端末など | 576px 未満 |
カラムは基本的に、それぞれ 均等幅 で表示されます。一方、指定サイズ未満の画面幅になると、ブロック要素と同じように、横幅全体を使った表示に変化します。今回はコンテナが container-fluid なので、画面幅全体を使って表示されます。
このクラスを上手く扱う事で、1 つの HTML ソースのみで、デバイスの表示サイズの違いを吸収できるようになります。
Bootstrap 3 からの移行 1
v3 から移行する場合は、lg md sm は 1 段階ずつサイズを格上げする必要があります。また、xs サイズは新たに 2 つの画面幅に分割されましたので、sm or "無指定" を選択する必要があります。
| v3 | → | v4 | 画面幅 |
|---|---|---|---|
| lg | → | xl | 1200px 以上 |
| md | → | lg | 992px 以上 |
| sm | → | md | 768px 以上 |
| xs | → | sm | 768px 未満 ＆ 576px 以上 |
| - | 576px 未満 (v4 から新設) |
コンテナクラス
鉄則として、Bootstrap が定義するコンテナ要素である container / container-fluid クラスの要素を、レスポンシブなレイアウトを使いたい要素群の一番外側に配置します。
レスポンシブなレイアウトは、このコンテナ要素の中で正しく効果を発揮します。『ちょっとズレる』『はみ出る』『左右に余白が無い』などの事象が発生していたら、正しくコンテナ要素に包まれているか確認しましょう。慣れてくると意外と忘れがちです。
⭕️ 正しい使い方
<div class="container"> <div class="row"> <div class="col"> 正しい使い方 </div> </div> </div>
❌ 間違った使い方
<div class="row"> <div class="col"> 間違った使い方 (コンテナが無い) </div> </div>
container と container-fluid
2 種類あるコンテナ要素の違いは以下の通りです。構築したい Web ページに合わせて、最適なコンテナを選択してください。
container- 固定幅コンテナ
- コンテナ要素の幅は、ブレークポイントごとに定められた幅で自動的に固定される。
sm: 540pxmd: 720pxlg: 960pxxl: 1140px
- 横幅が環境によって変わらないので、制作者が意図した通りのレイアウトができる。
container-fluid- 可変幅コンテナ
- コンテナ要素の幅は、常にブラウザの横幅いっぱいに広がる。
- ブラウザの画面全体を使ってコンテンツを表示させたい場合に効果的。
グリッドシステム
最初の例では、Bootstrap 4 の新機能である 自動レイアウト を使用しました。もちろん、Bootstrap 3 以前と同様のグリッドシステムを使用し、より細かくレイアウトをコントロールすることも可能です。
Bootstrap では、定義された各画面幅を 12 個のグリッド に分割するレイアウトシステムを持ちます。カラムクラスの指定時、数値を追加 (col(-{画面サイズ})-{グリッド数}) することで、『その要素が何個分のグリッド幅で表示されるか』を明示できます。
<div class="container-fluid"> <div class="row"> <div class="col-2"> コンテンツA </div> <div class="col-4"> コンテンツB </div> <div class="col-6"> コンテンツC </div> </div> </div>
例えばこの例では、A の横幅 (col-2) と比較して、B が 2 倍 (col-4)、C が 3 倍 (col-6) の横幅で表示されるようになります。
ブレークポイントとの組み合わせ
前述のブレークポイントと組み合わせる事も可能で、HTML クラスの指定で細かいレイアウトが可能になります。例えば、
- スマートフォンでは上下に分割
- タブレットでは左サイドバーレイアウト
- PC ではコンテンツを広めに取る
という細かい要件も、以下で示す通り、簡単に実現できます。
<div class="container"> <div class="row"> <div class="col-sm-3 col-lg-2"> サイドバー </div> <div class="col-sm-9 col-lg-10"> コンテンツ </div> </div> </div>
この記述は Bootstrap 3 でもおなじみですね。
自動レイアウトとの組み合わせ
グリッドシステムを、自動レイアウト（数値を指定しない）と一緒に使用することもできます。
<div class="container-fluid"> <div class="row"> <div class="col-5"> .col-5 </div> <div class="col"> .col </div> <div class="col"> .col </div> </div> </div>
上記の例だと、最初のカラムは 12 分の 5 の横幅を取ります。残った 2 つのカラムは、行の "空いている場所" に、等幅（≒3.5）で表示されます。
コンテンツに応じたカラム col-auto
数値の代わりに auto (col(-{画面サイズ})-auto) を指定すると、コンテンツの内容に応じてカラムの横幅が変化するようになります。
<div class="container"> <div class="row"> <div class="col"> 👉 </div> <div class="col-auto"> 内容に応じて横幅が変化 </div> <div class="col"> 👈 </div> </div> </div>
この場合、col-auto の幅はテキストの幅に合わせられます。両端のカラムは、余った領域の幅で均等に分けられます。
以下の画像のように、col-auto 内の要素の横幅がトランジションなどで伸びると、左右の幅はそれに合わせて縮みます。
このように、以前のバージョンに比べ、レイアウトの自由度はぐんと高まりました。
Flexbox
柔軟な Bootstrap のレイアウトシステムですが、これらはすべて Flexbox (CSS Flexible Box Layout) をベースに設計されています。そのため、Flexbox で実現できるレイアウトは Bootstrap でも同じように実現できます。
垂直位置の変更 align-items-*** / align-self-***
align-items CSS プロパティ (.row に適用) 、および align-self CSS プロパティ (.col に適用) に相当します。
<div class="container"> <!-- 基本は縦中央配置 --> <div class="row align-items-center" style="height:200px"> <div class="col"> 😀 </div> <div class="col align-self-start"> 👆 <!-- 上寄せ --> </div> <div class="col"> 😀 </div> <div class="col align-self-end"> 👇 <!-- 下寄せ --> </div> <div class="col"> 😀 </div> </div> </div>
カラムの順序を変更 order-**
order CSS プロパティ に相当します。Bootstrap では order-1 〜 order-12 の数値指定、および order-first (=-1), order-last (=13) による位置指定が可能です。
order-md-*** のようなブレークポイントの指定にも対応しているため、例えば以下のように、『PC 画面ではサイドバーを右側に表示する』といったコントロールが可能になります。
<div class="container"> <div class="row"> <!-- md 以上の画面幅で順序が最後に移動 --> <div class="col-3 order-md-last"> サイドバー </div> <div class="col-9"> コンテンツ </div> </div> </div>
余白の使い方を変更 justify-content-***
justify-content CSS プロパティ に相当します。カラムで使いきれなかった余白がある場合、その余白をコンテンツの周囲にどのように分配するかを変更できます。端的に言えば、 『横方向の位置揃え方法の変更』 と認識しておけば問題ないでしょう。
Bootstrap 3 までは、col-**-offset による位置ずらしを行うことで、擬似的に中央寄せ/右寄せを行うテクニックがありましたが、カラム幅を考慮しなければならず少し面倒でした。このクラスのおかげで、より楽に位置揃え方法を変更できます。
justify-content-md-*** のように、こちらもブレークポイントの指定が可能です。以下の例では、『スマートフォン以下のサイズは右寄せ、タブレットサイズ以上のサイズで左寄せ』になります。
<div class="container"> <!-- 通常は右寄せ、タブレットサイズ以上で左寄せ --> <div class="row justify-content-end justify-content-sm-start"> <div class="col-6"> justify-content </div> </div> </div>
offset-**
とはいえ、凝ったレイアウトを実現したい時にはこれだと不十分なこともあります。
Bootstrap 3 では、col-**-offset を使用し、指定したカラム数分のマージンを左側に追加できる機能がありました。2 v4 beta で一時的に廃止された時期もありましたが、正式版では復活し、使えるようになっています。
クラス定義は offset-({画面サイズ}-){グリッド数} という構文です。例えば以下の例では、左半分のカラムについて『タブレットサイズ以上の画面幅になると、左側に余白ができる』ようになっています。
<div class="container"> <div class="row"> <!-- タブレットサイズ以上で、左に 1 カラム分の余白ができる --> <div class="col-6 col-sm-5 offset-sm-1"> Offset column </div> </div> </div>
Bootstrap 4.1
2018 年 4 月 9 日にリリースされた Bootstrap 4.1 では、Flexbox のコントロールに使用できるクラスも増えました。
flex-(**-)fill:flex: 1 1 autoショートハンド対応クラスflex-(**-)grow:flex-growCSS プロパティ のコントロールflex-(**-)shrink:flex-shrinkCSS プロパティ のコントロール
例えば、flex-(**-)fill を使用すると、画面幅に応じて col-auto を col 相当の表示に切り替えることができるようになります。
<div class="container"> <div class="row"> <!-- md 以上の画面幅で横幅いっぱいに広がる --> <div class="col-auto flex-md-fill"> LEFT </div> <div class="col-auto flex-md-fill"> RIGHT </div> </div> </div>
ここまでの例からもわかるように、 Bootstrap 4 の柔軟なレイアウトは Flexbox が鍵を握ります。 レスポンシブかつ柔軟なレイアウトを行いたい場合は、Flexbox を制すのが早道です。
ユーティリティ
Bootstrap 4 では、ユーティリティクラス (ヘルパークラス) が大きく刷新され、CSS スタイルを直接コントロールする形に変わりました。
ユーティリティは、グリッドシステムのみならず、通常の HTML 要素に対しても使用できます。また、レスポンシブ対応も強化されています。
前章で紹介した Flexbox 関連のクラス定義も、その多くがユーティリティクラスの一種です。
Bootstrap 4 のドキュメント には、さまざまなユーティリティクラスの詳細が記載されていますが、ここではよく使いそうな margin padding と display について解説します。
margin / padding
Bootstrap 4 では、マージンやパディングをユーティリティクラスからコントロールできるようになりました。
クラスの定義は、以下の表に従います。やや複雑に見えますが、スタイルの頭文字から類推できるようになっていますので、覚えるのはそう難しくありません。
{property}
|
{sides}
|
-{breakpoint}
|
-{size}
|
|||||
|---|---|---|---|---|---|---|---|---|
m
|
margin | 省略 | 全方向 | 省略 | 全サイズ |
-auto
|
auto
|
|
p
|
padding |
t
|
top |
-sm
|
sm 以上 |
-0
|
0
|
|
r
|
right |
-md
|
md 以上 |
-1
|
スペーサーの 1/4 |
.25rem
|
||
b
|
bottom |
-lg
|
lg 以上 |
-2
|
スペーサーの 1/2 |
.5rem
|
||
l
|
left |
-xl
|
xl 以上 |
-3
|
スペーサーと同値 |
1rem
|
||
x
|
left + right |
-4
|
スペーサーの 1.5 倍 |
1.5rem
|
||||
y
|
top + bottom |
-5
|
スペーサーの 3 倍 |
3rem
|
||||
『スペーサー』は、カラムの左右の余白などに使用される幅のことで、Bootstrap 4 では $spacer という Sass の変数で定義されています。通常は 1rem です。
カラムの余白を無くす
実例として、カラムの左右に表れる余白を無くしてみましょう。
クラスに px-0 を指定すると、padding-left: 0 !important および padding-right:0 !important を指定した状態と同じ効果が得られます。
以下の例では、通常のカラムに存在する余白がなくなり、左右の指が隣接した状態で表示されるようになります。
<div class="container"> <div class="row"> <div class="col text-right px-0"> 隣接 👉 </div> <div class="col text-left px-0"> 👈 隣接 </div> </div> </div>
紹介は省きますが、ここで使用している
text-**もユーティリティの一種で、text-alignの値を操作できます。ユーティリティクラスの指定方法は、例に漏れずどのクラスも共通です。そのため、
text-**では Bootstrap 3 では不可能だった、ブレークポイントの指定も可能になりました（例:text-md-right）。
カラムオフセットへの応用
先ほど justify-content で出てきた横方向のカラム位置揃えは、以下のように ml-auto mr-auto を使用して実現することも可能です。
<div class="container"> <div class="row"> <!-- 右に余白を取る＝左寄せ --> <div class="col-auto mr-auto"> 👈 左寄せ </div> </div> <div class="row"> <!-- 左右に余白を取る＝中央寄せ --> <div class="col-auto mx-auto"> 👈 中央寄せ 👉 </div> </div> <div class="row"> <!-- 左に余白を取る＝右寄せ --> <div class="col-auto ml-auto"> 右寄せ 👉 </div> </div> </div>
justify-content のみでは難しい、各カラム単位での余白のコントロールは、マージンのヘルパークラスを使用することで実現できます。
無論、ブレークポイントに応じた細かいコントロールも可能です。
<div class="container"> <div class="row"> <!-- PC画面のみ右寄せ --> <div class="col-auto ml-md-auto"> margin ＋ ブレークポイント </div> </div> </div>
display
display スタイルを操作するためのユーティリティクラスも同様に用意されています。
これを使用することで、Flexbox を任意のタグに適用したり、画面サイズによって要素の表示/非表示を切り替えることが可能です。
d-
|
-{breakpoint}
|
-{value}
|
|
|---|---|---|---|
| 省略 | 全サイズ |
-none
|
|
-sm
|
sm 以上 |
-inline
|
|
-md
|
md 以上 |
-inline-block
|
|
-lg
|
lg 以上 |
-block
|
|
-xl
|
xl 以上 |
-table
|
|
-table-cell
|
|||
-table-row
|
|||
-flex
|
|||
-inline-flex
|
|||
例: スマートフォンで改行の位置をコントロールする
レスポンシブなサイトをスマートフォン環境で見ると、中途半端な位置で文章が改行されてしまい、読みづらくなることが度々あります。
以下の例では、d-** ユーティリティクラスを使用し、小さい画面サイズでのみ <br> タグを反映 (d-inline) しています。ブレークポイント sm 以上では <br> タグを隠す (d-sm-none) ことで、スマートフォン環境でのみ改行が反映されます。
<p> ここに長い文章があります。通常はブラウザに改行を任せますが、 <br class="d-inline d-sm-none" /> 小さい画面サイズの時は任意の位置で改行します。 </p>
Bootstrap 3 からの移行
Bootstrap 3 では display スタイルのコントロールに hidden-** visible-*-** ユーティリティクラスが使われていました。しかし、Bootstrap 4 ではブレークポイントの指定方法に一貫性が無くなるため、廃止されました。
Bootstrap を 3 から 4 に移行する場合は、以下のような手順でクラスを書き換える必要があります。
hidden-xsはd-noneに、それ以外のブレークポイントはd-**-noneに置き換える- 1 段階上のブレークポイント で、その要素に沿った
displayのスタイルに対応するクラスを同時に指定するdiv➡️d-**-blocktable➡️d-**-tableetc...
<!-- Bootstrap 3 --> <br class="hidden-xs" /> <!-- Bootstrap 4 --> <br class="d-none d-sm-inline" />
displayユーティリティクラスは現在の実装に至るまで紆余曲折があり、v4 alpha 版では異なる構文を採用していた時期もありました（前回の記事を参照）が、最終的には他のユーティリティクラスと一貫性のある定義に着地しています。
おわりに
Bootstrap 4 は、Flexbox を最大限活かせるレイアウトシステムとなっており、CSS との親和性も上がりました。そのため、これまではどちらかと言えば隠蔽されることの方が多かった CSS の知識も、随所で必要になってきます。
CSS / Flexbox を使いこなし、Bootstrap 4 による Web ページのレイアウトを制しましょう!!
Speee DEVELOPER BLOG では、今後も積極的に技術記事を発信していきます。今後も更新通知を受け取りたい方は、ぜひ ⬇️ から読者登録してくださいね。
