Bootstrap とは

この章のゴールは「Bootstrap を利用できる状態にして、Bootstrap のサンプルコードをコピーして動作確認する」です。

Bootstrap の概要は「７日目: Bootstrap」のページで解説しているので、こちらをまだお読みでない方はまずは「７日目: Bootstrap」をお読みいただけたらと思います。

Bootstrap の導入

まずは「Bootstrap のサイト」に訪れましょう。

「Flexbox とは」でも話したとおり、ここまで学習を進められているということは、「自分で調べる力」が少しずつ身についているはずです。

Bootstrap のサイトに訪れて、「ドキュメント」のはじめに書かれている手順の通りに設定を進めれば、Bootstrap を使う準備が完了するので、自分の力だけで手順通りに設定できるかチャレンジしてみましょう！

さきほど共有した Bootstrap の「ドキュメント」は日本語ページになります。

Bootstrap に限った話ではないのですが、海外製のツールに関して「英語ページは最新だけど、日本語ページのドキュメントは古いまま」というのもよくあります。

もし日本語のドキュメントの通りに進めてもうまく行かない場合は、英語のドキュメントも参考にすると良いです。

Bootstrap の英語のドキュメントページを以下に共有しておきます。

Bootstrap の「サンプル一覧」のページに行くと、Web サイトでよく見かけるレイアウトのサンプルをたくさん見ることができます。

英語ページのサンプル一覧は以下から確認できます。

例えばサンプルの中の「Album」を見てみましょう。

「こちら」のページを確認すると、アルバム一覧ページが確認できるかと思います。

こちらの動画の前半は英語ページの「Album サンプル」になるのですが、

デベロッパーツールの機能を使って、画面サイズを「パソコンサイズ」「スマートフォンサイズ」と切り替えて確認してみたところ、次のようにレスポンシブ対応されているのがわかりました。

動画の後半（２０秒〜）は、日本語ページの「Album サンプル」でレスポンシブ対応されているか確認した様子になるのですが、画面サイズを小さくしてもパソコンサイズと同じ「１行あたり３個のアルバム画像が表示される」という動作が確認できます。

このことからわかるのは、日本語ページの Album のサンプルコードの実装は「レスポンシブ対応の実装が不十分」な可能性が考えられます。

今回の場合、レスポンシブ対応した実装まで実現したいのであれば、「英語ページの Album」を参考にしたほうが良いでしょう。

ソースコードの確認方法は以下の動画を参考にしていただけたらと思います。

上記の方法で HTML のコードを活用して、様々なサンプルの HTML のコードを組み合わせることで、「レスポンシブ対応されいている Web ページ」「見た目が整った Web ページ」を作り上げることができます。

実装していて細かい部分の仕様や、他にどのようなスタイルが提供されているか確認したい場合は、Bootstrap の以下のドキュメントを参考にすると良いでしょう。

Bootstrap のより細かい解説は「Front Hacks」でも、解説動画、解説スライド、演習問題を用意して説明しています。

「解説動画なしで良いから演習問題に挑戦してみたい」と言った場合は、Web 白熱教室の「学習コンテンツ CSS」の「Bootstrap 編」の中で「エキササイズ」のところのリンクが有効になっているので、こちらから確認できます。

「演習問題がうまく進まないから解答の解説動画（実演動画）も観たい」と言った場合は、無料の「Front Hacks 体験講座」の中で Bootstrap の演習課題の解説動画を観れるようになっているので、Front Hacks 体験講座」をご確認いただけたらと思います。