- floatで作る段組みレイアウト講座
ステップ6ーfloatで作る段組みレイアウト 2カラムと3カラムをCSSで振り分ける方法
こんにちは。フクモトです。
今回は、2カラムと3カラムとをCSSで振り分ける方法を解説していきます。
例えば、同じWebサイト内でも、トップページだけ3カラムで下層ページは2カラム、販売ページは1カラムという構造のサイトを一度はみなさんも見たことがあると思います。
ここでご紹介する方法は、body要素にidを付けて、mainやsidebarのサイズを振り分けるという方法です。
まずは、2カラムから。
2カラムのHTML
STEP1で作成したコードを使います。
bodyにidを追加しました。id名を「column2」とします。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>段組みレイアウトサンプル</title> </head> <body id="column2"> <!-- 全体を囲む枠 開始--> <div id="wrapper"> <!-- ヘッダー開始 --> <header id="header"> <p>ヘッダーの内容ヘッダーの内容ヘッダーの内容ヘッダーの内容ヘッダーの内容</p> </header> <!-- ヘッダー終了 --> <!-- メイン開始 --> <div id="main"> <p>メインの内容メインの内容メインの内容メインの内容メインの内容</p> </div> <!-- メイン終了 --> <!-- サイドバー開始 --> <div id="sidebar"> <p>サイドバーの内容サイドバーの内容サイドバーの内容サイドバーの内容</p> </div> <!-- サイドバー終了 --> <!-- フッター開始 --> <footer id="footer"> <p>フッターの内容フッターの内容フッターの内容フッターの内容フッターの内容</p> </footer> <!-- フッター終了 --> </div> <!-- 全体を囲む枠 wrapper終了 --> </body> </html>
cssで以下のように指定します。
2カラム用の指定として、bodyにid 「column2」がついた場合の「main」と「sidebar」の指定です。
/*2カラム用の指定*/
#column2 #main {
float: left;/*要素を左寄せにする*/
width: 760px;/*floatしたので幅を指定する*/
background-color: red;/*背景色はレッド*/
height: 500px;/*練習のための仮の高さ指定*/
}
#column2 #sidebar {
float: right;/*要素を右寄せにする*/
width: 320px;/*floatしたので幅を指定する*/
background-color: yellow;/*背景色はイエロー*/
height: 500px;/*練習のための仮の高さ指定*/
}
3カラムのHTML
STEP5で作成したコードを使います。
bodyにidを追加しました。id名を「column3」とします。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>段組みレイアウトサンプル</title> </head> <body id="column3"> <!-- 全体を囲む枠 開始--> <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で以下のように指定します。
3カラム用の指定として、bodyにid 「column3」がついた場合の「main」と「sidebar」の指定です。
/*3カラム用の指定*/
#column3 #main {
float: left;/*要素を左寄せにする*/
width: 620px;/*幅を変更する*/
background-color: red;/*背景色はレッド*/
height: 500px;/*練習のための仮の高さ指定*/
}
#column3 #sidebar {
float: left;/*要素を右寄せにする*/
width: 220px;/*幅を変更する*/
margin-right: 20px;/*右側にマージンを追加*/
background-color: yellow;/*背景色はイエロー*/
height: 500px;/*練習のための仮の高さ指定*/
}
#sideRight {
float: right;/*要素を右寄せにする*/
width: 220px;/*floatしたので幅を指定する*/
background-color: yellow;/*背景色はイエロー*/
height: 500px;/*練習のための仮の高さ指定*/
}
最終的なCSSは以下になります。
@charset "utf-8";
#wrapper {
margin: 0 auto;/*レイアウト全体をページの中央寄せにする*/
width: 1100px;/*全体の横幅*/
background-color: gray;
}
#header {
background-color: blue;/*背景色はブルー*/
height: 100px;/*高さ*/
}
/*2カラム用の指定*/
#column2 #main {
float: left;/*要素を左寄せにする*/
width: 760px;/*floatしたので幅を指定する*/
background-color: red;/*背景色はレッド*/
height: 500px;/*練習のための仮の高さ指定*/
}
#column2 #sidebar {
float: right;/*要素を右寄せにする*/
width: 320px;/*floatしたので幅を指定する*/
background-color: yellow;/*背景色はイエロー*/
height: 500px;/*練習のための仮の高さ指定*/
}
/*3カラム用の指定*/
#column3 #main {
float: left;/*要素を左寄せにする*/
width: 620px;/*幅を変更する*/
background-color: red;/*背景色はレッド*/
height: 500px;/*練習のための仮の高さ指定*/
}
#column3 #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カラムのデモページを見る
→3カラムのデモページを見る
いかがでしたか？
カラムの変更は、難しいというイメージがありますが、上手くidやclassを使い分けることで、比較的簡単にできそうです。
最初は、こんがらがってしまいそうですが、、これは数稽古ですね！
ぜひ、ご活用ください。
