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タグなどでも）のクラスとして付与します。
２つのクラスがあることがポイントです。

<div class="container">
～
</div>

このように指定すると、レスポンシブ対応の固定幅になります。

<div class="container-fluid">
～
</div>

このように指定すると、ウィンドウサイズに応じた可変幅になります。
では、２つの違いを見てみましょう（画像は拡大しないと見づらいかな。。）。

containerの方

ソース↓

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid" style="background-color:#ddd">
        <h1>BootStrap 練習</h1>
    </div><!-- /container -->
</body>
</html>

container-fluidの方

ソース↓

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</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は、
常に外枠一杯まで広げるというスタイルですね。