【HTML5実践】 <body> </body>内 CSSによる左右カラム分け方法 【vol.5】

 

こんにちは!
ズン子です。

お待たせしました(;´∀`)<第5回目。
<body> </body>内 CSSによる左右カラム分け方法!

CSSによるカラム分け方法は様々です。
今回は、いわゆる【可変】する仕様のカラム分け方法をご紹介します。


サンプルHTML

サンプルページはブラウザを横に伸ばすと、左が可変し、右が固定された状態になります。
ブログやECサイトなどに多い仕様ですね。

■HTMLソース
<!-- 左カラム 開始 -->
<div id="leftContents">
メインコンテンツエリア
</div>
<!-- 左カラム 終了 -->
<!-- 右カラム 開始 -->
<div id="rightContents">
右ナビエリア
</div>
<!-- 右カラム 終了 -->


※HTML文法とは話がズレますが、コンテンツの書き方の順序は重要です。
メインとなるコンテンツから書きましょう。

■CSSソース
/* 左カラム */
#leftContents {
float:left;
width:100%;
margin-right:-190px;}
/* 右カラム */
#rightContents {
float:right;
width:170px;
padding:0 0 0 20px;}


今回のCSSの処理内容です。
左カラムの設定、3行目で【#leftContents】を左寄せ(回りこみ)を設定します。
サンプル1


次に可変仕様のカラムなので、widthの指定値に【%】を使用し数値を入れます。
4行目で100%とすることで、回り込み設定ではありますが、エリア100%の表示領域を持ちます。
サンプル2

5行目の【margin-right:-190px;】で、100%の横幅を右から190px引きます。
サンプル3


サンプル3の画像を見ると、サンプル2まで左と右で背景に敷いてある色が違っていましたが、
ここで左カラムの色が右カラムに漏れているのが分かります。
デフォルトのfloatの仕様です。

次に、右カラムの設定です。
右寄せ(回りこみ)を設定します。
そうすることで、右カラムの背景が復活します。
サンプル4


右カラムは可変ではなく、幅固定なのでここでは【170px】と指定します。
これで、完了です。
サンプル5


最後の11行目で右カラムの左に20px余白を入れてます。

他にも、こういったカラム分け方法は様々あります。
また、何かの機会にご紹介出来たらと思います♪

←【vol.4】 <body> </body>内 <header>タグ | 【vol.6】 <body> </body>内 <article>と<section>タグ→