CSSで3カラムの設定をしてみよう

こんにちは。
シーサイドレーベルweb担当の飯野です。

前回のメルマガでは、2カラムの設定について
お話させて頂きましたが、
今回は「CSSで3カラムの設定をしてみよう」
と題してお話させて頂きます。

3カラムというのは、ホームページの
レイアウトのことで、基本的には、
メインのコンテンツを左右のサイドバーが挟む形の事を言います。

左にメインコンテンツで右側に２つサイドバーや
左側に２つサイドバーで右側にメインコンテンツという
レイアウトも３カラムといいます。

３カラムを表示させる方法としては
いくつかあるのですが、
今回は「float」プロパティを使って
真ん中にメインコンテンツ、左右にサイドバーという形の
レイアウトを組んでみたいと思います。

htmlの書き方

CSSの書き方

【CSSで3カラムサンプル表示】

floatプロパティで左へ設定しているので、htmlの設定は、
左サイドバー、メインコンテンツ、右サイドバーという
順番にしてあります。

widthは横幅です。それぞれ指定してみました。
borderは罫線なのですが、今回分かりやすいように
１pxの罫線でそれぞれのコンテンツを囲ってみました。

背景色に、分かりやすいように
#contentsにはグレー
メインコンテンツは黄色
左サイドバーは水色
右サイドバーはピンクにしてみました。

ここで、#contentsセレクタの所に
overflow: hidden;と書かれていますが、
これを入れることでfloatプロパティを解除しています。

２カラムの時と一緒ですが、
overflow: hidden;を削除してみると
グレーの背景色が見えなくなってしまうと思います。
overflow: hidden;を入れることで
floatプロパティが解除され背景色が下まで表示されます。

レイアウトの組み方は色々あるのですが、
今回は３カラムの一例としてご紹介させて頂きました。

今後、また他の表示方法なども
ご紹介していきたいと思います。

では、また来週お会いしましょう。