CSSにできること―レイアウト基礎の基礎編

CSSにできること第五弾。今回は、幅や高さ、余白といったレイアウトに関する技術の基礎の基礎を書いていきます。
前作：CSSにできること―リスト・テーブル編

１．幅、高さを指定する。

HTMLでは、width属性、heightを使って幅・高さを指定していました。
CSSでは、要素の幅や高さを指定することができます。widthプロパティで幅、heightプロパティで高さをそれぞれ指定できます。

また、
max-width max-height というプロパティでコンテンツの最大幅、最大高さを、
min-width min-height では最小幅、最小高さを指定することができます。
ただし、IE6以下ではこれらのプロパティが使えないので、まだまだ利用は避けた方がいいプロパティです。

２．余白を指定する。

余白には、２つの種類があります。外側につける余白と、内側につける余白です。
外側の余白をmargin（マージン）、内側の余白をpadding（パディング）で指定します。
ちなみに、marginは余白、paddingは荷物の梱包材のような、箱と中身の間を埋めるものを指すようです。

この２つをどう使い分けるか、というところですが・・・。
width（幅）を指定している場合には、paddingを使わないのが今のところ無難です。
（これは、IE6以下のブラウザによるバグを回避するためです）
私が意識しているのはこのくらいです。

３．コンテンツがはみ出たときの対処

要素にwidth（幅）やheight（高さ）を指定していた場合、その中に入る文章や画像などの中のコンテンツの量が収まりきらない場合、overflowというプロパティではみ出たぶんを表示したり、しなかったりすることができます。
overflow: hidden;ではみ出した文を隠し、overflow: scroll;ではインラインフレームのように、スクロールして表示できます。

４．ボーダーをつける

borderというプロパティでは線をつけることが可能です。
上下左右それぞれの指定もできますし、点線や破線、二重線といった線の指定、色、太さの指定も可能です。

ボーダーがwidthで指定した値に含まれるブラウザと含まれないブラウザがあるため、注意が必要です。
基本的に、幅や高さを厳密に指定したい場合はborderプロパティは使わないほうがいいと思います。

以上、レイアウト基礎の基礎編でした。
レイアウトの概念編へ続きます。