第3章　スタイルシートの使い方

3-5.見出し（Hn要素）

見出し（Hedding)は、サッカーで頭でボールを扱う（Header）ようなものではありませんが、使い方によっては面白い見栄えが可能です。

背景色、ボーダー、マージン、パディングの設定

まずは、文字の大きさ、文字色、背景色、ボーダー、マージン、パディングを設定してみましょう。次のようにすると、IEでもNNでもほぼ同じような見栄えとなるはずです。

h2	{ 
	font-size       : 16px; 
	text-align      : left; 
	font-weight     : bold; 
	background-color: #d3d3d3; /* LightGray */
	padding         : 4px 0 3px 10px; 
	margin          : 4px 0 4px 0;
	border-color    : #000080;  /* RoyalBlue */
	border-style    : solid none solid none;
	border-width    : 2px 0 2px 0; 
}

ボーダーが違う

ボーダー（枠線）がIEとNNで少し違います。

マージンを指定しないと

先ほどの例では、左右のマージンを0に設定してました。この設定をなくすとどうなるでしょうか。

h2	{ 
	font-size       : 16px; 
	text-align      : left; 
	font-weight     : bold; 
	background-color: #d3d3d3; /* LightGray */
	padding         : 4px 0 3px 10px; 
/*	margin          : 4px 0 4px 0; マージン定義をコメントアウトします */
	border-color    : #000080;  /* RoyalBlue */
	border-style    : solid none solid none;
	border-width    : 2px 0 2px 0; 
}

<H2>IEとNNで違います</H2>

どう違うか、画像ファイル化しましたので、見比べてください。

チェックページ

IE4.0	NN4.0

NN4.0では、左右のマージン指定をなくすとボーダーがかかる範囲が文字の部分だけになります。どちらかというと、僕はNN4.0風の方が好きです。しかしこのサイトでは、見出しの上下に線を入れることで、<HR>のように見せる見栄えを採用しているので、NN4.0でもページの左右いっぱいのボーダーが表示するようマージンを指定しています。

なお、非スタイルシートのブラウザでHRがないと文章にアクセントがつきませんから、HTMLソースにはちゃんと<HR>タグを書きこんでいます。その上で、スタイルシートでは、hr { display:none; }として非表示にしています。

---

Indexに戻る ==== 前のページに戻る ==== 次のページへ

---