
Twitter Bootstrap 3 の基本 containerのサンプル
Twitter Bootstrap 3 コンポーネントの使い方サンプル
いまさらという感もあるBootstrapですが、逆に今更過ぎて新たに学習するのを敬遠しちゃっている人もいるかもしれません。
沢山ある機能からピックアップし、Webサイトを作っていきたいと思います。それでは早速始めましょう。
準備
本来であれば、BootStrap(CSS,JSファイル群)をダウンロードしてからそれらを読み込んでいくのですが、
今回は「CDN(Contents Delivery Network)」で実装していくので必要ありません。
(CDNというのは、ユーザから最短距離にあるキャッシュサーバを見にいくようにする仕組みのことで、
BootStrap用のJSやCSSを読み込む際に、CDN用のURLを指定することで勝手に実現されます。)
ですので、今回は自分のローカルPCにこれから作成するファイルの格納フォルダを用意すればOKです。
containerクラス
今回は「container」クラスを見ていきます。
BootStrapのクラスでまず登場することになるのがこの「container」クラスで、
全体のレイアウトのベースとなるクラスなので、しっかり理解しておきましょう。
このクラスはサイト全体のタグをラッピングし、ページ全体の横幅を定義する役割を果たします。
以下のようにdivタグ(sectionタグなどでも)のクラスとして付与します。
2つのクラスがあることがポイントです。
1 2 3 | < div class = "container" > ~ </ div > |
このように指定すると、レスポンシブ対応の固定幅になります。
1 2 3 | < div class = "container-fluid" > ~ </ div > |
このように指定すると、ウィンドウサイズに応じた可変幅になります。
では、2つの違いを見てみましょう(画像は拡大しないと見づらいかな。。)。
containerの方
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <! DOCTYPE html> < html lang = "ja" > < head > < meta charset = "utf-8" > </ head > < body > < div class = "container-fluid" style = "background-color:#ddd" > < h1 >BootStrap 練習</ h1 > </ div > <!-- /container --> </ body > </ html > |
container-fluidの方
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <! DOCTYPE html> < html lang = "ja" > < head > < meta charset = "utf-8" > </ head > < body > < div class = "container" style = "background-color:#ddd" > < h1 >BootStrap 練習</ h1 > </ div > <!-- /container --> </ body > </ html > |
少しわかりずらいかもしれませんが、違いがわかるでしょうか?
containerクラスの方は、ウィンドウの一部までしか幅が取られていないのに対し、container-fluidの方は、ウィンドウいっぱいまで伸長しています。
containerクラスは、
ウィンドウサイズが992px以上の場合、横幅を970pxに、
ウィンドウサイズが768px以上の場合、横幅を750pxに、
という風にスタイルシートで決まっているので、このような表示になるわけです。
container-fluidは、
常に外枠一杯まで広げるというスタイルですね。
まとめ
今回はcontainerクラスについて見てきました。
bootstrapを使用しているHTMLでは、必ずと言っていいほどお目にかかるスタイルですので、
しっかり覚えておきましょう。
次回は「navbar」クラスについて説明していきます。
WEBアプリケーション関連 人気連載リンク
基礎からPHPWEBアプリ開発を学ぶなら・・
PHP基礎 連載
より実践的なWEBアプリ開発講座!Bootstrap活用を学ぶなら・・
魁!小野の塾 連載