ティア グローバル人材向けマガジン
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
https://getbootstrap.com/docs/4.3/getting-started/introduction/
尚、Bootsrapはスマホ対応（＝レスポンシブデザイン）しており、上記コードの中でコーディングされています。コードは以下の部分になります。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
レイアウトの基本：Grit：
さて、ここでレイアウトの基本となる考え方をご紹介します。個人的には、列と行、空白の設定さえ自由にできれば、サイト製作は結局はコンテンツが重要であるため、レイアウト領域は十分だと思います。
よくワードプレスのテンプレートでもデモサイトは美しくても、いざそれをベースに製作してみると、デモサイトの美しさと比べて、かなりチープなビジュアルになってしまったというケースは少なくないと思います。それは結局のところデモで使われている写真の美しさの違いであり、同じレイアウトでも使用する画像によって大きくビジュアルが変わることが分かります。
一方で、同じ写真でも余白の幅や画像の配置等によっても全く見た目は異なります。しかし、レイアウトは先述の列と行、空白の設定の仕方を分かっていれば問題なく、その点ブートストラップがそれらの実施を簡単にしてくれます。
以下がブートストラップの行と列の全体像であり、まず、Row(行)の中にColumn(列）があります。そして列は12分割されているということを押さえておきましょう。ここが重要になります。そしてサイトを見る際のデバイスによって表示領域がレスポンシブデザインにより伸縮しますが、その伸縮はこの12分割をベースに適宜切り替わっている構造です。サイトのレイアウト設計をする際は、この12分割を念頭に、何分割して枠組みを設計しようかなと考えていきましょう。
さてそれでは、ブートストラップがデバイスごとに基本設定しているデフォルト値をみていきましょう。
出所：ブートストラップウェブサイトより一部抜粋
表の簡単な見方を現実のデバイスであてはめると、ざっくり以下の通りになります。
Extra small & Small = スマホ
Medium = タブレット
Large & Extra Large = PC
それぞれのデバイスで表示した際に、各々に応じて表示したいコラムを上記のClass prefixを用いてコーディングしていきます。
例えば、PC（992px以上）でカラムを左右に50% : 50%で2つ配置したい場合は以下のようにコーディングします。
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">50%ボックス</div>
<div class="col-lg-6">50%ボックス</div>
</div>
</div>
</body>
ここでcol-lg-6の6が12分割の半分は6なので6を入れている訳です。4分割したかったら12÷4=3ですね、そしたら3をいれるわけです。シンプルですね。ちなみに、この場合、スマホでみたらどうなるのでしょうか、それはif構文のelseのように設定したこと以外はこちらというデフォルト設定が反映されます。想像は付くと思いますが、レスポンシブデザインがベースで設定されているので、PC画面だと2分割で自分で設定したがそれをスマホで見たらおそらく一行につき1カラムを全幅で取り、2つめのカラムも改行されて1カラム全幅になっているだろうと想像がつきますよね。是非試してみて下さい。
メディアクエリに関して：
さて、他にもデバイスの表示幅に応じてレイアウトを自動表示させる方法があります。それがメディアクエリ(@media) です。
例えばデバイスが500px幅以上の時は文字サイズを12pxにし、1,000px以上の場合は文字サイズを24pxにしたい場合は以下のようにコーディングします。
@media (min-width: 500px) {
body {
font-size: 12px;
}
}
@media (min-width: 1000px) {
body {
font-size: 24px;
}
}
Margin（マージン）とPadding（パディング）に関して：
デザインの決め手は余白にあるといっても過言ではないですよね。Bootstrapでは、MarginやPaddingをデフォルトで設定されているものを使う場合、その他と同じく、htmlページ上でclassを指定すればよいです。尚、classが既にひとつあり、そこに余白を新たに加えたい場合は、間に半角スペースを入れればすべて適用されます。
例： <div class=”container mt-5″> containerとmt-5の間に半角スペースを入れる
設定方法に関して：
上記のmt-5が余白を入れる際の例になります。ではどのように設定するかざっと理解しましょう。
先ず頭文字ですが Margin（マージン）ならm、Padding（パディング）ならpです。次に上下左右等どこを余白調整の対象にしたいかで調整します。上ならtopのt、下ならbottomのb、左ならleftのl、右ならrightのrになります。指定しない場合は四方になります。他にもありますので下図ご参照ください。
次にハイフンを入れた後に、数字を入れます。下図の通り、１はデフォルト*0.25、2はデフォルトの*0.5、3はデフォルト*1、4はデフォルト*1.5、5はデフォルト*3になります。
