- floatで作る段組みレイアウト講座
ステップ5ーfloatで作る段組みレイアウト 3カラムレイアウトに挑戦！
こんにちは。フクモトです。
今回は、これまで学習してきた2カラムレイアウトの応用として3カラムレイアウトに挑戦します。
2カラムレイアウトでは、各エリアは次のようなサイズでした。
【main 760px】+【sidebar 320px】+【すきま20px】=【全体の幅 wrapper 1100px】
これを3カラムレイアウトでは次のように変更します。
【sidebar 220px】+【すきま20px】+【main 620px】+【すきま20px】+【sideRight 220px】=【全体の幅 wrapper 1100px】
新しく右サイドバー用に【sideRight 220px】が加わりました。
HTMLにも記述を追加してみましょう。
HTMLに右サイドバーの記述を追加する
<!doctype html> <html> <head> <meta charset="utf-8"> <title>段組みレイアウトサンプル</title> </head> <body> <!-- 全体を囲む枠 開始--> <div id="wrapper"> <!-- ヘッダー開始 --> <header id="header"> <p>ヘッダーの内容ヘッダーの内容ヘッダーの内容ヘッダーの内容ヘッダーの内容</p> </header> <!-- ヘッダー終了 --> <!-- サイドバー開始 --> <div id="sidebar"> <p>サイドバーの内容サイドバーの内容サイドバーの内容サイドバーの内容</p> </div> <!-- サイドバー終了 --> <!-- メイン開始 --> <div id="main"> <p>メインの内容メインの内容メインの内容メインの内容メインの内容</p> </div> <!-- メイン終了 --> <!-- 右サイドバー開始 --> <div id="sideRight"> <p>右サイドバーの内容右サイドバーの内容右サイドバーの内容右サイドバーの内容</p> </div> <!-- 右サイドバー終了 --> <!-- フッター開始 --> <footer id="footer"> <p>フッターの内容フッターの内容フッターの内容フッターの内容フッターの内容</p> </footer> <!-- フッター終了 --> </div> <!-- 全体を囲む枠 wrapper終了 --> </body> </html>
CSSの記述の変更と追加
CSSの記述を変更、右サイドバーの分を追加します。
sidebarの記述を変更
#sidebar {
float: left;/*要素を右寄せにする*/
width: 220px;/*幅を変更する*/
margin-right: 20px;/*右側にマージンを追加*/
background-color: yellow;/*背景色はイエロー*/
height: 500px;/*練習のための仮の高さ指定*/
}
mainの記述を変更
#main {
float: left;/*要素を左寄せにする*/
width: 620px;/*幅を変更する*/
background-color: red;/*背景色はレッド*/
height: 500px;/*練習のための仮の高さ指定*/
}
sideRightの記述を追加
#sideRight {
float: right;/*要素を右寄せにする*/
width: 220px;/*floatしたので幅を指定する*/
background-color:yellow;/*背景色はイエロー*/
height:500px;/*練習のための仮の高さ指定*/
}
#sidebarと#mainに【float: left;】として2つのカラムを左寄せに。
このままだと、くっついてしまうので、#sidebarの右側に【margin-right: 20px;】としました。
#sideRightに【float: right;】として右寄せに指定しています。
まとめると以下のようになります。
@charset "utf-8";
#wrapper {
margin: 0 auto;/*レイアウト全体をページの中央寄せにする*/
width: 1100px;/*全体の横幅*/
background-color: gray;
}
#header {
background-color: blue;/*背景色はブルー*/
height: 100px;/*高さ*/
}
#main {
float: left;/*要素を左寄せにする*/
width: 620px;/*幅を変更する*/
background-color: red;/*背景色はレッド*/
height: 500px;/*練習のための仮の高さ指定*/
}
#sidebar {
float: left;/*要素を右寄せにする*/
width: 220px;/*幅を変更する*/
margin-right: 20px;/*右側にマージンを追加*/
background-color: yellow;/*背景色はイエロー*/
height: 500px;/*練習のための仮の高さ指定*/
}
#sideRight {
float: right;/*要素を右寄せにする*/
width: 220px;/*floatしたので幅を指定する*/
background-color: yellow;/*背景色はイエロー*/
height: 500px;/*練習のための仮の高さ指定*/
}
#footer {
clear: both;
background-color: pink;/*背景色はピンク*/
height: 50px;/*高さ*/
}
いかがでしょうか？
似たような記述が並び、細かい変更なので、最初は難しく感じるかもしれませんが、2カラムレイアウトのCSSと一つ一つ要素の指定の違いを追っていくと理解が進むと思います。
→デモサイトを見る
次回は、同じWebサイト内で2カラムと3カラムとをCSSで振り分ける方法を解説していきます。
