CSS 3カラムの段組レイアウト

CSSによる段組の基礎となるサンプルです。ここから各ブラウザで細かな修正を加えて作業を進めて行きます。このソースが参考になれば幸いです。

ブロック要素とインライン要素

全体を梱包するための<div>を作ります。
paddingやborderはブラウザによって解釈のし方が違うので気を付けて下さい。
ページのメインとなる情報源をなるべくソースの上の方へ記述します。
メニューなどはソースの最後の方に記述し配置は後から行います。
フロートの解除し忘れにご注意下さい。

CSSは後付けでよい

CSSは外部スタイルシートファイルで一括でデザインを指定出来るため、まずはHTMLで文章構造をしっかり組み立てて、IDCLASS付けをきちんと行う事を優先しましょう。

テーマを絞り込む

そのページで扱うテーマをなるべく絞り込んでおくと、製作もスムーズになります。1つのサイトで色々なテーマを扱う場合は、別ページを作ってリンクさせた方が、SEOに効果的だと思います。

段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落 段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落 段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落 段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落 段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落 段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落

≪戻る

左メニューと中央のボックスを1つのdivで梱包し、それをfloat:leftする。右メニューは単体でfloat:right指定します。

CSSの段組で3カラムを作る場合、やり方は色々ありますが、widthは固定してしまった方がやりやすいかも知れません。

ただし、widthを固定した場合、paddingやborderなどを同じ要素に同時に指定すると、ブラウザごとに解釈の違いが生じて、レイアウトが崩れる恐れがあります。