Bootstrapについて
HTML、CSS、JavaScriptを集めた巨大なコード(部品)の集まり。
利用することで簡単に整った見た目のページを作成できる。
全ての主要ブラウザに対応している。
viewportについて
PCやスマートフォンなどの表示領域について横幅を指定することで、デバイスに対応した表示となる。
指定するには head 内の meta で指定する。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- content="width=device-widthは横幅をデバイスと同じにする
initial-scale=1は倍率を1倍で表示する --!>
</head>
メディアクエリについて
レスポンシブデザインの基本となる。
特定の表示環境に対してCSSを適用することができる。
@media (min-width: 500px) {
/* ウインドウ幅500px以上の時に適用されるスタイル */
body {
background-color: #f00;
}
}
@media (min-width: 750px) {
/* ウインドウ幅750px以上の時に適用されるスタイル */
body {
background-color: #0f0;
}
}
/*○○px以下を指定できる max-width もある*/
グリッドシステムについて
Bootstrapにあるシステムで、横幅を12カラム(列)として、カラム数を指定することで要素を配置する。
必要に応じて使えばよい。
.container は決められた幅を持っており、表示サイズによって5つの段階を用意されている。
.container-fluid を使うとウィンドウ幅を変えたときに対応できる。
<body>
<!-- グリッドを使いたい範囲を囲うブロックレベル要素に class="container" を指定 --!>
<div class="container">
<!-- その中に class="row"を指定し、その中に要素を配置し、カラム数を指定 --!>
<div class="row">
<!-- 指定には class="col-画面サイズ-カラム数で指定" --!>
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
<div class="row">
<!-- offset-画面サイズ-カラム数 でカラム数を指定すると空間を配置できる。 --!>
<div class="col-md-5">col-md-5</div>
<div class="offset-md-2 col-md-5">offset-md-2 col-md-5</div>
</div>
</div>
</body>