Webフレームワークとして人気であるBootsrapをみなさん使いこなしているでしょうか。
先日、Bootstrapが正式にバージョン4にアップグレードされました。
まだBootstrapを使ってない人は、正式なメジャーバージョンが発表された今のタイミングに使い始めてみてはいかがでしょうか。
私自身はBootstrapはバージョン3から利用しています。
今となってはBootstrapを使いこなせるようになりましたが、最初は使い方がわからず効率的ではありませんでした。
今回は、Bootstrapを使いこなせていない人に向けてまずは覚えた方が良い2つ使い方について紹介します。
たった2つの使い方を覚えるだけで、Bootstrapがどれだけ便利かがわかると思います。
Bootstrapとは
BootstrapとはWeb部品の集まりを提供するフレームワークで、CSSやJavaScriptの詳しい知識を持たない人でも
比較的簡単にレスポンシブでデザイン性の高いWebページを作成できるようになります。
基本的にはBootstrapで用意されているclassをHTMLの各タグに指定するだけで、簡単にかっこいいWebページの作成が可能となります。
なお、Bootstrapは生まれはTwitter社です。オープンソースとしてたくさんの人に開発されています。
まだBootstrapを導入されていない人は、導入方法の記事もあるので見てみてください。
https://www.marorika.com/entry/setting-bootstrap
覚えるべき！便利な2つの使い方
何事も使い始めは覚えることも必要ですよね。
ただし、どの範囲をどれくらい覚えれば良いかは初心者にはわからないと思います。
そんな時、使い方をわかっている人から覚えるべきことを伝えてもらえれば効率いいですよね。
なので、今回は長らくBootstrapを使っている私が、まず覚えた方が便利だと思う2つの使い方について紹介します。
1つ目：レスポンシブグリッドシステムを覚えよう
まずはレスポンシブグリッドシステムを覚えましょう。
レスポンジブグリッドシステムはBootstrapを導入する意味の大部分を占めるのではないかと個人的に思います。
正直、これをだけのためにBootstrapを導入する価値があるとすら思います。
CSSを触らずともclassを指定するだけでデバイスのサイズに応じてレイアウトを可変にすることが可能となります。
指定方法として以下をまずは覚えてください。
- 「divタグのclass=”container”」の中に
- 「divタグのclass=”row”」を入れ、その中に
- 「要素となるカラム」を加える
なお、要素となるカラムは1行で12カラムまでで、はみ出た分は改行されます。
カラムの大きさはclassで設定しますが、col-{breakpoint}-{size}のsizeで指定します。
breakpointについては後半に説明します。
まずは、カラムのsizeについて理解しましょう。
文字よりも例とソースコードを見てもらうとわかりやすいと思います。
（視覚的に理解しやすいように、外枠と背景色などを適宜Bootstrapのclassでつけています。）
まずは一つ目の例です。
File: bootstrap-beginner-1.html
-------------------------------
<div class="container text-white">
<div class="row">
<div class="col-4 border bg-success">
①
</div>
<div class="col-4 border bg-success">
②
</div>
<div class="col-4 border bg-success">
③
</div>
</div>
</div>
col-{breakpoint}-{size}の{size}でカラムの大きさを指定します。
今回のケースでは、それぞれのカラムsizeを4（col-4）とし、合計で12のため1行にピッタリ収まっています。
（この例では{breakpoint}は指定していません。）
続いて二つ目の例です。
File: bootstrap-beginner-2.html
-------------------------------
<div class="container text-white">
<div class="row">
<div class="col-5 border bg-danger">
④
</div>
<div class="col-5 border bg-danger">
⑤
</div>
<div class="col-9 border bg-danger">
⑥
</div>
</div>
</div>
このケースでは、それぞれのカラムsizeを5、5、9としました。5 + 5 + 9 = 19 > 12なので、
はみ出たcol-9のカラムは改行されています。
次はカラムのbreakpointについて理解しましょう。
col-{breakpoint}-{size}の{breakpoint}で指定をします。
レイアウト変更の区切りとして設定します。
breakpointに設定できるものは、
指定なし、sm、md、lg、xlです。
指定なしからxlに向かうにほど大きい画面のデバイスに対応します。指定なしの場合、スマホなどの画面サイズが対象となります。
こちらも文字よりも例とソースコードを見てもらうとわかりやすいと思います。
なお、スマホだと画面サイズを変えられないので確認がしづらいと思います。
パソコンブラウザのウィンドウを大きくしたり小さくしたりして、レスポンシブにレイアウトが変わるところを確認してください。
File: bootstrap-beginner-3.html
-------------------------------
<div class="container text-white">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 border bg-primary">
①
</div>
<div class="col-12 col-sm-6 col-md-4 border bg-primary">
②
</div>
<div class="col-12 col-sm-6 col-md-4 border bg-primary">
③
</div>
<div class="col-12 col-sm-6 col-md-4 border bg-primary">
④
</div>
</div>
</div>
ブラウザのウィンドウサイズを変えると、レイアウトが変わる様子を確認することができます。
スマホサイズのデバイスではsizeが12のカラムを4つ、それよりも大きいデバイスでは一つ一つのカラムsizeを大きくなるにつれ6、4と設定しています。
こんな感じでデバイスのサイズに応じてそれぞれのカラムsizeを指定することができ、簡単にレスポンシブデザインを設定することができます。
ちなみに、当記事のブックマークボタンやシェアボタンも画面のサイズに応じてレイアウトが変わるように設定しています。
2つ目：margin、paddingの設定方法を覚えよう
覚えた方が便利だと思う2つ目です。
Bootstrapでmargin、paddingを設定する方法を覚えましょう。
Bootstrapを使えばHTML上で簡単にmargin、paddingを設定できるのでかなり便利です。
私もレイアウトを考えるときかなり利用しています。
利用できるクラスは以下のように指定します。
marginはm{sides}-{size}で指定します。
paddingはp{sides}-{size}で指定します。
{size}は0から5を指定してmargin、paddingの大きさを指定できます。
{sides}は以下が指定できます。
- t : top
- b : bottom
- l : left
- r : right
- x : left と right
- y : top と bottom
- 指定なし : top と bottom と left と right
早速、例とソースコードを見てみましょう。
実際の例を見ながらどのようにコードを書くか学んだほうが覚えやすいと思います。
（視覚的に理解しやすいように、外枠と背景色などを適宜Bootstrapのclassでつけています。）
File: bootstrap-beginner-mp-1.html
----------------------------------
<div class="border bg-warning text-white">
<div class="m-3 p-3 border bg-info">
class="m-3 p-3"
</div>
</div>
File: bootstrap-beginner-mp-2.html
----------------------------------
<div class="border bg-warning text-white">
<div class="mt-5 pt-5 border bg-info">
class="mt-5 pt-5"
</div>
</div>
File: bootstrap-beginner-mp-3.html
----------------------------------
<div class="border bg-warning text-white">
<div class="ml-3 pb-4 border bg-info">
class="ml-3 pb-4"
</div>
</div>
こんな感じでmargin、paddingがとても簡単に設定することができます。
レイアウトの調整がはかどりますよ。
なお、margin、paddingも実はレスポンシブに調整可能で、それぞれ以下のように設定します。
marginはm{sides}-{breakpoint}-{size}で指定します。
paddingはp{sides}-{breakpoint}-{size}で指定します。
{breakpoint}には既に紹介済みの、指定なし、sm、md、lg、xlを指定できます。
例は以下のようなかんじです。ブラウザサイズを小さくしたり大きくしたりして確認してみてください。
File: bootstrap-beginner-mp-4.html
----------------------------------
<div class="border bg-warning text-white">
<div class="mt-5 ml-sm-5 mb-md-5 pt-lg-5 pl-xl-5 border bg-info">
class="mt-5 ml-sm-5 mb-md-5 pt-lg-5 pl-xl-5"
</div>
</div>
おわりに
Bootstrap初心者や使い始めて間もない人向けに、まずは覚えたほうがよい2つの使い方を紹介しました。
今回紹介したのはレスポンシブグリッドレイアウトとmargin、paddingの設定方法です。
この２つを覚えてしまえばかなり便利にBootstrapが使えるようになるので是非覚えてみてください。