初学者がBootstrapについてゼロから学んだことを記述しています。
＃Bootstrapとは
様々なブラウザや画面サイズに対応した本格的なWEBサイトを簡単に作ることができるWEBフレームワークである。
※WEBフレームワークは、WEBサイトの開発を容易にする「雛形」のこと
●Bootstrapのメリット
・個人開発〜大規模開発まで幅広い用途に対応
・レスポンシブデザイン
・テンプレートやプラグインによるカスタマイズ
等を簡単に実装することができ、短期間で本格的なWEBサイトを作成できる。
●デメリット
・独自のルールを学習する必要がある
・似たようなデザインになりやすい
・細かくカスタマイズすると逆に工数が増える
Bootstrapの機能
グリッドシステム
グリッドシステム=画面を縦に分割して、ブロックごとに図や文章を配置する手法で、画面サイズに合わせてコンテンツの幅と数を制御できる。
※縦に分割した列１つ１つをグリッドという
グリッドシステムでは、必ず全体を「container」または「container-fluid」というクラスで囲む。
●containerを使用した場合
画面幅に応じて、コンテンツや余白の幅が自動で変わる。
| ウィンドウ幅 | 内部コンテンツ幅 |
|---|---|
| 576px未満 | ウィンドウ一杯 |
| 576〜768px未満 | 常に540px |
| 768〜992px未満 | 常に720px |
| 992〜1200px未満 | 常に960px |
| 1200px以上 | 常に1140px |
| ●container-fluidを使用した場合 | |
| 画面幅に関係なく、常に画面いっぱいに広がる | |
| ●rowとcolを使う | |
| 内部コンテンツは、row(行)の中に、col(列)で作成する |
<body>
<div class="container"> <!--全体をcontainerで囲む-->
<div class="row"> <!--rowでcolを囲む-->
<div class="col" style="background":red; height:200px;">A</div>
<div class="col" style="background":yellow; height:200px;">B</div>
<div class="col" style="background":blue; height:200px;">C</div>
</div>
</div>
</body>
<body>
<div class="container"> <!--全体をcontainerで囲む-->
<div class="row"> <!--rowでcolを囲む-->
<!--colのあとに「-数字」で縦に12分割のうち、どれくらいの幅にするか指定する-->
<div class="col−３" style="background":red; height:200px;">A</div>
<div class="col-4" style="background":yellow; height:200px;">B</div>
<div class="col-5" style="background":blue; height:200px;">C</div>
</div>
</div>
</body>
レスポンシブデザイン
横幅が長いPC画面と、横幅が短いスマホなどの画面では表示が変わる
ブレイクポイント
PC表示とスマホ表示が変わる境界線をブレイクポイントと言う。
一般的には、768px(col-md)でPC表示とスマホ表示を切り替える
| 0〜575px | 576〜767px | 768〜991px | 992〜1999px | 1200px以上 | |
|---|---|---|---|---|---|
| クラス | col | col-sm | col-md | col-lg | col-xl |
<body>
<div class="container"> <!--全体をcontainerで囲む-->
<div class="row"> <!--rowでcolを囲む-->
<!--col-md(768px)がブレイクポイントということ-->
<div class="col-md−３" style="background":red; height:200px;">A</div>
<div class="col-md-4" style="background":yellow; height:200px;">B</div>
<div class="col-md-5" style="background":blue; height:200px;">C</div>
</div>
</div>
</body>
<body>
<div class="container"> <!--全体をcontainerで囲む-->
<div class="row"> <!--rowでcolを囲む-->
<!--col-md(768px）未満の時はそれぞれcol-4で、それ以上の時は3,4,5ということ)-->
<div class="col-4 col-md−３" style="background":red; height:200px;">A</div>
<div class="col-4 col-md-4" style="background":yellow; height:200px;">B</div>
<div class="col-4 col-md-5" style="background":blue; height:200px;">C</div>
</div>
</div>
</body>
画面幅に応じた要素の非表示
class="d-●●-none"とすると、
●●pxの画面以上は、特定の要素を非表示にできる。
| 0〜575px | 576〜767px | 768〜991px | 992〜1999px | 1200px以上 | |
|---|---|---|---|---|---|
| 特定の要素を 非表示にするクラス |
d-none | d-sm-none | d-md-none | d-lg-none | d-xl-none |
<body>
<div class="container"> <!--全体をcontainerで囲む-->
<div class="row"> <!--rowでcolを囲む-->
<!--md(768px）以上の時はそれぞれcol-4で、それ以上の時はA要素を非表示ということ)-->
<div class="col-１２ d-md-none" style="background":red; height:200px;">A</div>
<div class="col-６ col-md-8" style="background":yellow; height:200px;">B</div>
<div class="col-６ col-md-４" style="background":blue; height:200px;">C</div>
</div>
</div>
</body>
画面幅に応じた要素の表示
class="d-none d-●●-block"とすると、
●●pxの画面以上は、特定の要素を表示することができる。
| 0〜575px | 576〜767px | 768〜991px | 992〜1999px | 1200px以上 | |
|---|---|---|---|---|---|
| 特定の要素を 表示するクラス |
d-block | d-sm-block | d-md-block | d-lg-block | d-xl-block |
<body>
<div class="container"> <!--全体をcontainerで囲む-->
<div class="row"> <!--rowでcolを囲む-->
<!--md(768px）未満の時はA要素を非表示で、768px以上の時はA要素を表示する)-->
<div class="col-１２ d-none d-md-block" style="background":red; height:200px;">A</div>
<div class="col-8" style="background":yellow; height:200px;">B</div>
<div class="col-4" style="background":blue; height:200px;">C</div>
</div>
</div>
</body>
②シンプルで見やすいテーブル
③デザインされたボタン
Bootstrapの仕組み
CSSとJavaScriptにより構成されている。
Bootstrapを使用するには
①ネット上のBootstrapファイルを読み込んで使う...CDN(Contents Delivery Network)
②ソースファイルをダウンロードして使う
③コンパイル済みのファイルをダウンロードして使う
※本記事では③を仕様
Bootstrapの読み込み
●HTMLの
タグ内にcssファイルのパスを記述●HTMLの直後にjsファイルのパスを記述
画像やブロック要素の調整
img-fluid
画像の幅をブロック幅に合わせて表示する
＜img src="ファイル名" Class="img-fluid"＞
paddingとmargin
padding... class="p●-X"
margin... class="m●-X"
方向を指定する(●の部分)
| 記述方法 | t | r | b | l | x | y | 無し |
|---|---|---|---|---|---|---|---|
| 間隔を開ける方向 | 上 | 右 | 下 | 左 | 上下 | 左右 | 上下左右 |
| 記述方法 | 0 | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|---|
| 間隔 | 0 | 0.25rem | 0.5rem | 1rem | 1.5rem | 3rem |
Bootstrap特有のclass
①左寄せ、中央寄せ、右寄せ
左寄せ... class="text-left"
中央寄せ... class="text-center"
右寄せ... class="text-right"
②見出し
h1... ＜h1＞＜/h1＞ または class="h1"
h2... ＜h2＞＜/h2＞ または class="h2"
③リスト
＜li＞＜/li＞のデフォルト設定の点を削除... class="list-unstyled"
リストでテキストを横並びにする... ＜ul class="list-inline"＞
＜li class="list-inline-item"＞＜/li＞
＜/ul＞
④幅や高さの指定
幅や高さを指定するclass
幅を指定するclass
| 記述方法 | w-25 | w-50 | w-75 | w-100 | mw-100 | w-auto |
|---|---|---|---|---|---|---|
| 意味 | width:25% | width:50% | width:75% | width:100% | width:100% | max-width:100% |
高さを指定するclass
| 記述方法 | h-25 | h-50 | h-75 | h-100 | mh-100 | h-auto |
|---|---|---|---|---|---|---|
| 意味 | height:25% | height:50% | height:75% | height:100% | height:100% | max-height:100% |
※横幅、高さを%で指定した場合、親要素を100%とした時の割合で表示される
⑤float
グリッドシステムを無視して要素を横並びにする場合、
通常のHTML/CSSのようにfloatを使用
左寄せ... class="float-left"
※floatさせる要素自体に指定
右寄せ... class="float-right"
※floatさせる要素自体に指定
float解除... class="clear-fix"
※floatさせる要素全体を囲む親要素に指定
⑥ナビゲーションバーの型
「navbar」「navbar-expand-ブレイクポイント」の2つのclassを記述
＜nav class="navbar navbar-expand-ブレイクポイント＞
リストでナビゲーションバーを作成する場合は、ulに「navbar-nav」というclassを記述
＜ul class="navber-nav"＞
liに「nav-item」、aに「nav-link」というclassを記述
＜li class="nav-item"＞＜a href="●●" class="nav-link＞XXXX＜/a＞＜/li＞
＜/ul＞
＜/nav＞ナビゲーションバーは＜nav＞で囲む