Dreamweaverで学べるBootstrapの超基本！第4回 「まずコンテナ（Container）から配置」

連載

Dreamweaverで学べるBootstrapの超基本！

4. まずコンテナ（Container）から配置

Bootstrapでは、「レスポンシブなレイアウトに含めるコンテンツを、特定の要素（コンテナ）内に配置する」という決まりがあります。そこで、事前準備が完了したら、まずはコンテナから配置してみましょう。

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

コンテナの実態はCSSで記述されたクラスです。上の例のように<div>タグのclass属性にクラス名を指定すればコンテナとして振舞います。コンテナの中に別のコンテナを配置することはできません。

コンテナとして利用できるクラスには.containerと.container-fluidの2種類があります。

2種類のコンテナのうち.container-fluidは画面の横幅一杯に広がるコンテナです。どんな画面でもコンテンツをviewport一杯に表示したいときにはこちらを使います。

もう一つのコンテナ.containerは横幅が固定のコンテナです。固定と言っても、large、medium、smallとしきい値ごとに3段階の変化をします。ある程度は横幅が固定されていた方がデザインを整えやすいという場合は、こちらの.containerを使うと良さそうです。なお、extra smallのときだけは、viewportの横幅一杯の表示になります。

Dreamweaverの「挿入パネル」内には、「Bootstrapのコンポーネント」というグループが用意されています。グループの先頭にあるContainerと次のContainer-fluidがコンテナです。どちらかを選択してそのままドラッグ、ライブビュー上の適当な位置でドロップすれば、ページにコンテナを追加できます。

__
Dreamweaver体験版ダウンロード

__
チュートリアルビデオを視聴

目次

• はじめる前に

1. 1. レスポンシブデザインの理由
   2. 必要なファイルを揃える
   3. 最低限必要なHTMLコード
   4. メディアクエリの指定を確認

• グリッドレイアウトの組み方

1. 1. コンテナ（Container）を配置
   2. 行と列から作成するグリッド
   3. カラムの並べ方のルール
   4. カラムの位置や順序の指定
   5. 表示幅に応じたレイアウト

• コンテンツを配置する

1. 6. フォントの大きさや配置を指定
   7. リンクとボタン
   8. レスポンシブ画像の使い方