スタイルシート裏の裏


第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で少し違います。

Contents IE4.0NN4.0
border-color Solid:指定色
Ridge:1.5倍と2倍暗色
右と下は2倍の暗色
上と左は2倍の明色
border-style 指定したスタイル 指定は無視される
SOLID(実線)のみ

マージンを指定しないと

先ほどの例では、左右のマージンを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.0NN4.0
H2の見栄え(IE4.0) H2の見栄え(NN4.0)

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

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


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