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

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

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

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

2カラムレイアウトのイメージでは「大きな枠の中に、左右に寄せられた内枠を2つ作る」と説明しましたが、3段組レイアウトは「2段組レイアウトのメインスペース内でさらに2段組を作る」感じになります。

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

3カラムレイアウトでも2段組レイアウト同様に、左右・中間の枠を自由に配置し、HTML上でも優先順位の通りに記述することができます。

3カラムレイアウト - 外枠・ヘッダー・フッター

外枠を作りヘッダー・フッター部分を記述、メインスペースに余白を設定するのは3カラムレイアウトでも同様です。

3カラムレイアウト - 左右・センターの幅を計算

外枠ができたらまず2カラムを作るわけですが、その前にしっかりと左右・センター枠の幅を決めておきましょう。

3カラムレイアウト - 2:1の枠を作る

事前に決めた幅に従い、まずは2カラムレイアウトを作ります。ここではセンター・左・右の順にHTMLを記載する場合を説明します。

3カラムレイアウト - 3カラムに仕上げる

2カラムができたら、広い方の枠内にさらに2段の枠を作成します。幅は事前に決めてありますので、ここまでの作業を確認しながら、再度2カラムレイアウトを施してください。

4カラムレイアウトへの応用

2カラムレイアウトを応用することで、3カラムレイアウトを作成することができますが、これをさらに応用することで、4カラムレイアウトも組むことができます。