2カラムCSSレイアウト実践講座
このカテゴリでは、メインスペースとサイドバー、いわゆる「2カラム段組(2段組)」レイアウトの作り方について説明しています。
- 2カラムレイアウトのイメージ
外枠を作って内枠を左右に寄せる。
- 表示させる優先順位を決定
左右スペースの配置とHTML上の優先順位を決める。
- 外枠を作る
CSSレイアウトはまず外枠を作ることから始まります。
- ヘッダー・フッターの設置
左右に寄せない部分をあらかじめ作っておく。
- メインスペースの枠を作る
CSSで横幅と回り込みを指定し、メインスペースを作成。
- サイドバーの枠を作る
メインの幅との合計値が外枠の幅を超えないよう注意して幅を設定。
- clear指定は忘れずに
回り込みの解除で崩れを防いだら2カラムレイアウトは完成。
