こんにちは。
シーサイドレーベルweb担当の飯野です。
今回は「CSSで2カラムの設定をしてみよう」
と題してお話させて頂きます。
2カラムというのは、
ホームページのレイアウトのことで、
メインのコンテンツと左もしくは右に
サイドバーがある形の事を言います。
２カラムを表示させる方法としては
いくつかあるのですが、
今回は「float」プロパティを使って
レイアウトを組んでみたいと思います。
htmlの書き方
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> <title>CSSで2カラム</title> </head> <body> <div id="wrapper"> <div id="contents"> <div class="main">メインコンテンツ</div> <div class="sidebar">サイドバー</div> </div> </div> </body> </html> |
CSSの書き方
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#contents { width:960px; overflow: hidden; background: #d6d6d6; padding-bottom: 30px; } .main { float: left; width: 600px; height:300px; border: 1px solid #ccc; background: #ffc; } .sidebar { float: right; width: 350px; border: 1px solid #ccc; background: #afecff; } |
floatプロパティでメインコンテンツは左へ。
サイドバーは右に表示するように指示しています。
widthは横幅です。それぞれ指定してみました。
borderは罫線なのですが、今回分かりやすいように
１pxの罫線でそれぞれのコンテンツを囲ってみました。
背景色に、分かりやすいように
#contentsにはグレー
メインコンテンツは黄色
サイドバーは水色にしてみました。
ここで、#contentsセレクタの所に
overflow: hidden;と書かれていますが、
これを入れることでfloatプロパティを解除しています。
例えば、overflow: hidden;を削除してみると
グレーの背景色が見えなくなってしまうと思います。
overflow: hidden;を入れることで
floatプロパティが解除され背景色が下まで表示されます。
レイアウトの組み方は色々あるのですが、
今回は一例としてご紹介させて頂きました。
今後、また他の表示方法なども
ご紹介していきたいと思います。
では、また来週お会いしましょう。
