402段組CSSレイアウト実践講座

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

2段組CSSレイアウト実践講座

2カラムレイアウト - 2カラムレイアウトのイメージ

2カラム(2段組)レイアウトの場合、「大きな枠の中に、左右に寄せられた内枠を2つ作る」というのが大まかなイメージになります。

2カラムレイアウト - 表示させる優先順位を決定

CSSレイアウトの利点のひとつに「優先させたい順序でHTMLを記述することができる」というのがあります。

2カラムレイアウト - 外枠を作る

いよいよここからが、2カラムレイアウトのコーディング作業の本番です。 「2段組レイアウトのイメージ」では、「外枠を作り、その中に内枠を作る」と説明しました。CSSレイアウトの実作業は、この「外枠作り」から始まります。

2カラムレイアウト - ヘッダー・フッターの設置

左右に寄せる枠を作る前に、左右に寄せない部分=ヘッダー・フッター部分を作成してしまいます。

2カラムレイアウト - メインスペースの枠を作る

ここからがいよいよCSSレイアウト最大のポイントとなります。メインスペースについて、幅をどのくらい取るか、左右どちらに寄せるかを決めたら、そのようにHTMLとCSSを記述していきます。下の例では横幅を470pxに固定し、右に配置した場合で説明します。

2カラムレイアウト - サイドバーの枠を作る

メインスペース枠の作成と同様に、サイドバーの枠を作成します。こちらも枠の幅を決めるわけですが、この際、メインスペースとサイドバーの幅の合計値が外枠の幅を超えないように注意してください。

2カラムレイアウト - clear指定は忘れずに

2カラムレイアウトもおおよそ出来上がりましたが、最後の仕上げが待っています。それが「clear」による「左右の回り込みの解除」です。