3カラムレイアウトの構成図

2カラムレイアウト作成で使用したメインページ(下図)を3カラムに変更します。

検索窓の設置

追加するカラムは、下図のように右側に設置します。サイドバー2(sidebar2)と命名します。(名称は任意です。)
そしてもう1つ、下図の黒枠の、サイドバーとコンテンツ部をひとまとめにする部分も新たに作成します。これをラップ(wrap)と命名します。(同じく名称は任意です。)

3カラム構成図

少し複雑になってきましたので、全てのグループをまとめてみます。

コンテナ(赤枠)は全体枠をコントロールします。スタイルシートでの名称はcontainerです。
ヘッダ(青枠)は、ページのタイトルや概要を主に表示します。名称はheadです。
サイドバー(紫枠)は、ナビゲーションや記事一覧などを表示します。名称はsidebarです。
コンテンツ(緑枠)は、そのページの内容を記述する部分です。名称はcontentです。
フッタ(オレンジ枠)は、コピーライトなどを記述する部分です。名称はfooterです。

そして今回新たに追加した2グループです。
サイドバー2(水色枠)はサイドバー1と同様な情報を表示します。名称はsidebar2です。
ラップ(黒枠)は、サイドバーとコンテンツを1つのグループとしてまとめるグループです。

ここで、ラップが無いと3カラムレイアウトは無理なのかという疑問がわくかもしれません。
もちろんラップが無くとも、3カラムレイアウトは可能です。
ただし、スタイルシートを効果的に利用するためには、ラップが重要な意味を持つことになります。

次回以降、徐々にラップの有り無しの違いについて紹介します。

次のページ >> スタイルシートの修正

▲ページトップへ