幅と高さを変える

width、height、line-height

幅の指定は、「width:○○px;」、高さの指定は「height:○○px;」で、○○には数値が入ります。

h1 {
	width:400px; /* 幅400px */
	height:30px; /* 高さ30px */
	}

line-heightは高さは高さでも、”文字の高さ”である点でheightとは区別されます。

「line-height:○○px;」で文字の高さを指定しますが、文字の大きさが16pxの時、line-heightを14pxなど、文字の大きさよりも小さく指定した場合は文字が一部かけて表示されてしまいます。

主な用途は、文が改行されるときに、1行目と2行目の文の間隔を調整するときに使われます。

heightで高さを指定すると高さの中央配置されないので、これはよく使われます。

h1 {
	line-height:20px; /* 文字幅が20px */
	}

サンプルの幅と高さを設定する

まず、文章の幅がバラバラなので、サンプルの全体幅を、境界線画像の610pxにあわせます。h1,h2・・dlに一度に610pxを指定します。

続いて文の間隔を広げるため、ulに対してline-height:20px;を指定します。

@charset "shift_jis";
body {
	background-color:#efe;
	}
h1,h2,h3,p,ul,address,hr,dl {
	width:610px;
	}
h2 {
	font-size:16px;
	width:400px;
	color:#494;
	}
h3 {
	font-size:14px;
	color:#f44;
	}
dl {
	background-color:#fff;
	width:400px;
	}
dt,dd {
	font-size:13px;
	}
dt {
	width:80px;
	}
ul {
	font-size:14px;
	line-height:20px;
	color:#555;
	}
address {
	font-style:normal;
	}

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

Lesson3～CSSを使った装飾～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>