こんにちは朱夏です。
今回は、Bootstrap入門編ということで、Bootstrapについて解説したいと思います。
Bootstrapって何だろう？
CSSと何が違うの？
何から学習したらいいんだろう？
こういった疑問に答えたいと思います。
また、最後に覚えておくとちょっと便利なBootstrapのおすすめclassの紹介もしたいと思います。
それではいってみましょう。
Bootstrapとは？
導入方法
最初の一歩 ～先ずはここから覚えよう～
おすすめのclass
あとがき
Bootstrapとは？
Bootstrapというのは、Twitterが開発したCSS(とJS)のフレームワークと呼ばれるものです。
特定のclassを指定する事で、自動的に一定のスタイルを適用できる優れものです。
Bootstrapの特徴は以下、メリットとデメリットで紹介します。
こんな感じです。
デメリットと言っても、Bootstrapで使用されている予約classが使えないこと以外はCSSと併用するだけで解決してしまいます。
Bootstrapで大まかな機能やレスポンシブ対応を実装して、細かいデザインやカラーの調整はCSSで行うといったやり方が効率的で良いと思います。
導入方法
導入はこちらのサイトから行います。
導入方法は2つあります。
- Bootstrapのデータをダウンロードして使用する方法
- CDNでネットワークリンクから使用する方法
それぞれに特徴があります。
HTMLファイルなどと一緒にダウンロードしたデータをディレクトリに格納して使用する方法です。
特徴としては、Bootstrapのデータそのものを「改造して使用できる」事が大きなメリットとなりますが、上級者向けです。
デメリットとしては、Bootstrapのデータで多少サーバ容量を圧迫する事です。
ネットワーク経由で利用する方法です。
メリットとしては、HTMLタグにCDNで利用するための「コードを張り付けるだけ」という導入方法の手軽さがあります。
デメリットとしては、Bootstrap側のサーバーに依存しているため、Bootstrapのサーバーダウンやネットワーク障害などで機能しなくなることです（今まで一度も経験ありませんが）。
はじめての場合はCDNでの導入をお勧めします。
理由は、導入が簡単だからです。
- Bootstrapサイトへ行く
- CDNコードをコピー
- HTMLファイルの<head>～</head>内に貼り付ける
わずか3ステップで導入完了です。
他にデータのダウンロードやらインストールは必要ありません。
また、追加でCSSを適用する事は可能ですので、よほどのことがない限り、Bootstrapから提供されたスタイルをカスタマイズする必要はないと思います。
最初の一歩 ～先ずはここから覚えよう～
Bootstrapを使うなら覚えておきたいclassは、グリッド機能を使用するためのクラス（container row col）の3つです。
Bootstrapを使用する最大の理由と言っても過言ではありません(個人的見解)。
このclassは、基本的に<div>タグと組み合わせて使用します。
コードにするとこんな感じです。
<div class="container">
<div class="row">
<div class="col-4">
<p>テキスト</p>
</div>
<div class="col-4">
<p>テキスト</p>
</div>
<div class="col-4">
<p>テキスト</p>
</div>
</div>
</div>
これで3列横並びのカラムが出来ました。
また、表示画面の横幅のサイズにより、自動的に縦1列に切り替わります。
このグリッドについての詳しい解説は他のサイトがたくさんあるので、ここでは簡単に概要を説明しておきます。
- container ＞ row ＞ col の順番に入れ子になる
- colは最大で合計12までは横並びになる
- 一定の画面幅になると自動で各colが縦に並ぶ
- 一定の画面幅でcolの数値を切り替えるブレイクポイントを使う事が出来る。
ブレイクポイントについてはちょっとだけ詳しく解説します。
スマホでサイト閲覧する人が増えている現在ではレスポンシブ対応は必須と言ってもいいと思います。
Bootstrapのグリッドを使って、簡単にレスポンシブ対応サイトを作っちゃいましょう。
おすすめの機能
ここでは、ある程度Bootstrapを使ったことがある人向けに、簡単に実装できて効果が大きいおすすめの機能を紹介したいと思います。
空白ユーティリティやカラーユーティリティといったサイト1つ作るのに何十回と使うものは今回除外しました。
- ナビゲーションバー（おすすめ度★★★★☆）
- レスポンシブイメージ（おすすめ度★★★★★）
- クリアフィックス（おすすめ度★★★★☆）
- カルーセル（おすすめ度★★★☆☆）
- 位置ユーティリティ（おすすめ度★★☆☆☆）
- 陰影ユーティリティ（おすすめ度★★☆☆☆）
それぞれの紹介とおすすめの理由は以下です。
ナビゲーションバー（おすすめ度★★★★☆）
サイトの各コンテンツへの内部リンクをまとめたナビゲーションバーを実装出来ます。
このナビゲーションバーが優れている点は以下です。
- レスポンシブ対応済
- リストタグで作成されたものが用意されている
何よりレスポンシブ対応が優秀で、スマホサイズではメニューボタンに変化してくれます。
リストタグで作成されたものについては、ちょっと特殊な視点で見ていて、SEO対策を意識しての事です。
Googleの検索ロボットはリストタグ内に書かれたものを重要なワードと認識している様なので、このナビゲーションバーをSEO対策に活用する事も出来ます。
レスポンシブイメージ（おすすめ度★★★★★）
これはお勧めというより必須で使用した方が良いレベルです。
classは、class=”img-fulid”です。
これは<img>タグ内に書くclassになります。
特徴は以下です。
- 要素の横幅の最大に合わせて画像サイズを自動調整
- 縦横比は固定
<img>タグにこのclassさえ付けておけば、画像が画面外まではみ出して大変なことになる、なんてことは今後起こらなくなります。
しかも画面や要素の横幅によってサイズを自動調整してくれるのですから、使用しない理由がありません。
クリアフィックス（おすすめ度★★★★☆）
CSSでfloatを使ったことがある人なら一度ははまったことがある、「float解除できない問題」を一発で解決してくれる優れものです。
使い方は、親要素にclass=”clearfix”を付けるだけ。
とはいえ、Bootstrapをベースにサイト作成していると、この問題にはまる事がほとんどなくなってしまったので、個人的には出番が減りつつあります。
カルーセル（おすすめ度★★★☆☆）
いわゆるスライダー機能です。
これの凄いところは、HTMLの記述だけで完結させられるところです。
CSSやJSの部分はBootstrapが準備してくれていて、自分はHTMLのコーディングだけで実装できます。
スライダーの表示切替方法も、スライドとフェードが用意されていて、基本的な使い方は十分にできます。
位置ユーティリティ（おすすめ度★★☆☆☆）
ナビゲーションバーを上端で固定させたり、フッターを下段に常駐させたりすることができます。
Bootstrapでこれらを実装するメリットとしては以下があります。
- class1つ追加するだけで実装可能
この1点です。
1点だけですが、手軽に実装できるメリットは計り知れません。
機能としては、上端に固定、下端に固定、上端まで到達したら固定、の3つのパターンを使用できます。
- 上端に固定：class=”fixed-top”
- 下端に固定：class=”fixed-bottom”
- 上端まで到達したら固定：class=”sticky-top”
普通に実装しようとしたら大変ですが、class1つで実装できるのなら、試してみる価値は十分あるのではないでしょうか。
陰影ユーティリティ（おすすめ度★★☆☆☆）
要素に影を付けてくれます。
影の大きさは3段階だけですが、私の様な加減を知らないタイプには「ちょうどいい」影を付けてくれるのでお勧めに入れておきました。
少ない選択肢は、悩まなくていいというメリットを生んでくれるのでそれはそれでよいのかなと思います。
影を付けるにはclass=”shadow”を使います。
あとがき
というわけで、Bootstrapについて解説してみました。
これを読んで、Bootstrapを使う人が一人でも増えてくれれば嬉しいです。
今回はここまでです。
次回もよろしくお願いします。
