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