【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
Bootstrapとは、Twitter社が開発したUIフレームワークです。Webサイトをデザインする際に役立つツールで、レスポンシブデザインに対応しています。
この記事では、簡単にレスポンシブWebデザインができるBootstrap 4のグリッドシステムの紹介をします。
グリッドとは「画面を縦横に分割する線」のことで、横の線で分割されたエリアを「行(Row)」、縦の線で分割されたエリアを「列(Column)」と呼びます。この「行」と「列」を使ってボックス(容器)を配置してデザインするのが、Bootstrap 4におけるグリッドシステムです。
Bootstrapグリッドは、CSSやJavascriptなしで使うことができます。”bootstrap-grid.css“にリファレンスするだけで、「Grid」クラスと「Flexbox」クラスへアクセス可能です。
グリッドのもっとも基本的な使い方がこちらです。
<div class="container">
<div class="row">
<div class="col">I'm your content inside the grid!</div>
</div>
</div>
上記のコードによって、下の写真にあるように横1列にコンテンツを表示できます。
なお、2列で表示するためのコードと画面は以下のとおり。
<div class="container">
<div class="row">
<div class="col">Left column</div>
<div class="col">Right column</div>
</div>
</div>
3列で表示するためのコードと画面は以下のとおり。
<div class="container">
<div class="row">
<div class="col">Left column</div>
<div class="col">Center column</div>
<div class="col">Right column</div>
</div>
</div>
ちなみに違いをわかりやすくするために、上記3つの図ではグレーの線が付け足されています。実際のコードは以下から確認できます。
ベーシックなコンセプトは割とシンプルですが、「なぜボックスが必要なの?」「異なる幅の列を作れるの?」などと疑問に思う方がいるかもしれません。
その質問には後ほどしっかりとお答えしますが、その前にとても大事なことをご紹介します。それは、コードを描く際の「グリッドの記述ルール」です。これを理解しておくと今後とても楽になるので、注意して読んでみてください。
この記述ルールはとても大切です。そして「行」と「列」は常に一緒に扱う必要があります。
筆者が見てきたBootstrap関連の質問は、多くの場合がこの記述ルールをフォローするだけで解決できました。とてもベーシックですが、間違いやすいのでしっかり覚えておきましょう。
最初の例で気づいた方もいるかもしれませんが、「.container」が「.row」の入れ子になっています。これは、Containerがルート(トップレベル)として働くからです。
<div class="container">
<div class="row">
<div class="col">I'm your content inside the grid!</div>
</div>
</div>
実は、Containerはどんな要素やコンテンツでもその中に含むことができます。
しかもこれが使えるのはグリッドシステムのみではなく、以下のように使うこともできます。
<div class="container">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid!</div>
</div>
</div>
コードを書く際はContainerを忘れないようにしましょう。主な機能は、レイアウトの幅を決めることで、ブラウザ内での左右バランスも調整してくれます。
そしてContainerにはふたつのタイプがあります。例で使ったのが「.container」で、もうひとつが、全幅を扱うことができる「.container-fluid」です。
「.container」は、表示される画面サイズ合わせた固定幅で、レスポンシブに対応します。
<div class="container"></div>
そして「.container-fluid」では、表示されるレイアウトの全部の幅を使ってレスポンシブに動きます。
<div class="container-fluid"></div>
以下にContainerとContainer-fluidのデモを貼っておくので、参考にしてみてください。
ひとつ注意して欲しいのが、Containerの中には必ず「行」を入れることです。
「行」には通常、-15pxのネガティブマージンがあります。これには、余白を作る逆の作用があって、画面をはみ出して表示されます。
場合によっては有効なネガティブマージンですが、Containerを使うとネガティブマージンが相殺されます。
rowは、日本語にすると「行」ですが、Bootstrapにおける「行」は必ずしも水平な1列のラインを意味するわけではありません。
Bootstrapのグリッドシステムでは、「.row」内に配置される「列」が横1列に表示されない時があります。同じ「.row」内のコンテンツでも、縦2段や3段に表示されるのです。
そこで、ひとつの「行」のことを、ひとつもしくは複数の「列」を含む容器として考えるとイメージしやすいかと思います。
このようなフレキシブルさは、レスポンシブデザインの本質ともいえます。
「row」で記述違反となってしまうのが、以下のコードです。
<div class="row">
This is very bad, wrong way, no bueno!!
</div>
<div class="row">
<p>This is also very bad, the wrong way!!</p>
</div>
<div class="row">
<h2>No headings either! This is the wrong way!!</h2>
</div>
「行」の中に配置していいのは「列」だけです。そしてコンテンツはすべて「列」の中に配置します。
正しい記述コードは以下のとおりです。
<div class="row">
<div class="col">Happy :-) This is the right way.</div>
</div>
また、「.row」は「display:flex」です。つまり、それぞれの「列」はすべて同じ高さで表示され、「align right」「center」「bottom」などは「Flex and Auto-margin Utility」クラスを使うことで、簡単に設定できます。
ここからは、「行」と「列」についてさらに細かく見ていきましょう。
「列」は、いかなる時も「行」の直接の子でなくてはいけません。とても重要なルールです。
ウィンドウ内を縦線で区切る「列」と、その「列」で区切られた間のスペースのことを「溝」といいます。
通常、Bootstrapでは全幅を12のユニットに区切ります。
ちなみに、画像のピンクの部分は実際の「列」ではなく、左右のマージンをイメージしやすくするためのものです。
そして、通常は12列に区切るのではなく、ある程度のまとまったユニットをひとつの「列」として使います。
たとえば、6列に区切ると同じサイズに分けられます。(12 ÷ 6 = 2ユニット分の幅)
同じように、4列、3列、2列、1列に分けられます。
ここで覚えてほしいのは、画面を12のユニットに区切ることが、横幅を扱いやすくするポイントだということです。
ひとつの「行」内に合計12ユニット置くと、表示画面の横幅をフルに使えます。さらに、ユニットの数を12以下やそれ以上にもできます。これについてはあとで詳しく解説します。
下の例では、ユニットの合計が12になります。
また、それぞれの列を異なるユニット数(異なるコンテンツの幅)に設定もできます。この柔軟性により、レイアウトのパターンは無限大といえます。
Flexboxによって「列」の幅をユニット以外で決めることも可能です。
そしてBootstrap 4からは、「Auto-layout」機能によってさらに自由に幅を決められるようになりました。
たとえば、同じ幅の「列」を5つ設置するとします。これを12のユニットで均等に分けることはできませんでしたが、新しい機能ではそれが簡単にできるようになりました。
いくつかの例があるので、下のリンクをぜひ参考にしてください。
「列」を横1列に表示する方法は理解できたでしょうか? 実は、まだまだできることは沢山あります。
先ほども紹介した通り、「列」はそれぞれを異なる幅に設定できます。さらに、画面の幅に応じて幅を変更することも可能です。
これをレスポンシブデザインというのですが、ひとつの「行」内に12個以上のユニットを配置するとどうなるでしょう。
「Column Wrapping」といって、1行のユニット数が12を上回ったときに、複数段で表示されます。
たとえば、ひとつの「行」の中に、それぞれの幅が4ユニットの「列」を9つ配置するとします。
すると、12ユニット目以降の「列」は段を変えて表示されます。そして12ユニットごとに次の段に配置されます。
このラッピングは、「ブレイクポイント」を使って細かくコントロールできます。ブレイクポイントについては後ほど説明します。
コード内で書かれる順番とは異なる順番で表示できます。
「列」を入れ子として、その中にさらなる「行」と「列」を配置することも可能です。
そして「列」の幅は、オートレイアウトによって自動で伸び縮みします。
ここからは、「列」と「行」を使ったレスポンシブデザインの詳細を紹介します。
Bootstrap 4のブレイクポイントは、異なる画面幅に合わせて5つの階層に分けられており、表示画面の幅に合わせてレスポンシブにデザインが変わります。
これが、小さい画面幅から大きい画面幅まで対応する5つの階層です。
xsを括弧にしているのは、Bootstrap 4からは「xs」がデフォルトだからです。
Bootstrap 3.xでは「col-xs-6」のように表記する必要がありましたが、Bootstrap 4では「col-6」とするだけでよくなりました。
▲出典 : qiita.com
また、メディアクエリを使うことで異なる画面幅により対応できるようになりました。
たとえば、ふたつの「列」をそれぞれ同じ幅で表示する際のコードは以下のとおりです。
<div class="container">
<div class="row">
<div class="col-sm-6">Column 1</div>
<div class="col-sm-6">Column 2</div>
</div>
</div>
「col-sm-6」は、小さい画面(768pxと同じもしくは大きい)の場合、12ユニットのうちの6つ(50%)分の幅を使うよう指定するコードです。
もしも画面横サイズが768px以下の場合は、それぞれの「列」が画面の100%の幅となり、2段に重なって表示されます。
50%幅が適用されるのは、「sm」の幅である768px以上の時だけで、もしも768px以下の場合は、デフォルトである「xs」設定が適用されます。
「xs」がデフォルトなため、下のふたつのコードはまったく同じ意味を持ちます。
<div class="col-12 col-sm-6">Column</div>
<div class="col-sm-6">Column</div>
大きい階層のブレイクポイントは、特別に指定されない限り、小さい階層の設定によって上書きされます。
もし「col-sm-6」と指定された場合、「sm」もしくはそれより上の幅で6ユニットの幅で表示されることになります。
このことから、下のふたつは同じように表示されます。
<div class="col-lg-3 col-md-3 col-sm-3">..</div>
<div class="col-sm-3">..</div>
つまり、一番小さい階層を設定するだけで大きい階層も自動的に設定され、より簡単にデザインできます。
たとえば、「sm」の幅では3ユニットを、「md」とそれより上の幅では4ユニットの幅で設定するとします。すると下のコードが生成されます。「lg」と「xl」の設定は必要ありません。
<div class="col-sm-3 col-md-4">..</div>
もうひとつのレスポンシブデザインが、オートレイアウト機能です。ユニットを使わずに、自動で均等な幅にしてくれます。また、オートレイアウトとユニットを混ぜて使うことも可能です。
下のコードでは、3つの「col」が同じ幅で表示されます。また、「xs」がデフォルトなので縦に重なって表示されることもありません。
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div>
下のコードでは、「col-sm」を使っているので、画面の幅が「sm」以上(576px)の場合に3つの均等な「列」が表示されます。576pxより小さくなった場合は縦に重なって表示されます。
<div class="container">
<div class="row">
<div class="col-sm">1</div>
<div class="col-sm">2</div>
<div class="col-sm">3</div>
</div>
</div>
このコードは、オートレイアウトとユニットのどちらも使う例です。「col-sm-2」では、「sm」以上の画面幅で16.6%(2ユニット分)の「列」が表示され、もうひとつの「列」は残り画面いっぱいに表示されます。576px以下の画面幅ではひとつ目の「列」が上に表示され、その下にふたつ目が表示されます。
<div class="container">
<div class="row">
<div class="col-sm-2">sidebar</div>
<div class="col">main content</div>
</div>
</div>
下のコードは、左にサイドバー、中央にメインコンテンツ、右に伸縮可能なサイドバーを表示できます。
<div class="container">
<div class="row">
<div class="col-sm-2">sidebar</div>
<div class="col">main content</div>
<div class="col-auto">right</div>
</div>
</div>
(著者:Carol Skelly 翻訳:Juri Andou)