techronicle テクロニクル

Webサイト作成に関する情報提供サイトです。WordPress,HTML+CSSなど。

段組(カラム・コラム・column)レイアウト

2010/10/21 未分類

今日の授業は、段組み。段組み、などというと、ずいぶん日本的に聞こえます。英語で言うとカラムですね。あまりなじみがないでしょうか?コラムなら、よく耳にしますね。同じです。つづりはcolumn。Webサイトは基本的に段組形式でレイアウトします。

正統なHTML+CSSのレイアウトスタイルは、要素を大まかにメニュー、コンテンツ部分に分けて、それぞれをfloatプロパティを使って左右に振り分けます。そして、下部の要素には、回り込み解除を設定します。

これが基本のスタイルです。

慣れるとそうでもないですが、このfloatによるレイアウトは、最初のうちは、取っつきにくい箇所でもあります。

大切なことは、メインのコンテンツ部分をHTMLの最初に記述するということです。メニューは、後回し。

ですので、コンテンツにfloat:rightを使うわけですね。

これも、いくつかサイトをつくっているうちに腑に落ちてくると思います。

2カラムの場合はまだシンプルですが、3カラム(三段組み)となると、ぱっと見ややこしくなりますが、これも、divの入れ子概念がわかると、シンプルに解決できます。

Webは、基本的に整然とした世界ですので、一つ一つはとても単純なことの組み合わせです。

見かけのややこしさや、ボリュームに圧倒されないようにしましょう。目の前のことをひとつひとつクリアしていけば、いずれ、オリジナルサイトを自在につくれるようになります。