Dreamweaverで学べるBootstrapの超基本！第7回 「カラムのオフセットや順序の指定」

連載

Dreamweaverで学べるBootstrapの超基本！

7. カラムのオフセットや順序の指定

カラムとコンテナの間にスペースが欲しい、カラム同士をもう少し離したい、といった場合には、カラムにオフセットを指定して表示位置を右に移動できます。

オフセットの指定には専用のCSSクラスを利用します。クラス名は、カラムを宣言するクラス名にoffsetを追加した.col-xs-offset-4という形式で、最後の数字は右に移動するカラム数（単位は12分割されたカラムの数）です。例えば、下の例は、4カラム分の幅を持つカラムを右にカラム4つ分移動する（つまり画面中央に表示）という指示になります。

<div class="col-xs-offset-4 col-xs-4"></div>

もう一つ例を見てみましょう。カラムを2つ並べるケースです。２つ目以降のカラムの場合、前のカラムの右端がオフセットの基準になります。

<div class="col-xs-4"></div>
<div class="col-xs-offset-4 col-xs-4"></div>

上の2行目は最初の例とまったく同じですが、1行目でカラムが配置されているため、その分だけ右にずれて配置されます。

オフセットは一行のカラム数の合計が12であることを意識しながら使いましょう。例えば下の例では2番目のカラムは1番目のカラムの下に表示されます。

<div class="col-xs-4"></div>
<div class="col-xs-offset-5 col-xs-4"></div>

4カラム幅のカラムの後に、オフセットとカラム幅で合計9カラム分の領域が指定されていて、12カラム以内に収まらないためです。

Dreamweaverのライブビューではカラムのオフセット指定も簡単です。ライブビューでカラムを選択するとカラムの左側にオフセット指定用スライダーが表示されます。このスライダーを横に移動させると、カラムが行の右端に達するまでの範囲で位置を調整できます。

調整により追加されたオフセットを指定するクラス名はカラムの左上に表示されます。このクラス名を直接書き換えたり削除してオフセットを変更する方法も利用できます。

カラムの順番を入れ替えたい場合は以下のように記述します。

<div class="col-xs-9 col-xs-push-3"></div>
<div class="col-xs-3 col-xs-pull-9"></div>

最初の行のpushは右にカラムを移動します。次の行のpullは左にカラムを移動します。

__
Dreamweaver体験版ダウンロード

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

目次

• はじめる前に

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

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

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

• コンテンツを配置する

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