PR

1. 汎用性の高い2段組みのレイアウトを学ぶ

 前回に続き、CSSによるレイアウト術です。

 なお前回は、positionプロパティを“コルクボード”と“貼り付けパーツ”の関係に例えて、決まったサイズのエリアの中に配置していく方法でした。

 ただ、それでは、「日記」に代表されるような、投稿ごとに分量が異なっているものをパーツとして貼り付けるのには不向きですね。文字数の少ないものでは余計な空白が空いてしまいますし、文字数が多すぎればエリア内に収まらず、あふれ出してしまいます。

 なので、今回は、左右の2段にレイアウトを組みながら、文章量によってエリアが伸縮するような方法を学びます。

 このような、左段にメニュー、右段に文章コンテンツが入るレイアウトを作っていきます。

文章量に応じて、エリアのサイズが伸縮する
文章量に応じて、エリアのサイズが伸縮する

 これを覚えてしまえば、ほぼどんなレイアウトでもできると思います。しっかり身に付けましょう。

 まずは、以下からサンプルファイルをダウンロードしてください。HTMLファイルやCSSファイルが入っています。さらに、HTMLファイルを分かりやすく説明しているPDFファイルも同梱しています。

HTMLファイル・説明PDFファイルなどをダウンロード

 「layout2.html」をWebブラウザーにドラッグ・アンド・ドロップして開いてください。以下のようなWebページが表示されるはずです。

[画像のクリックで拡大表示]