37.heightコマンド（CSS）

heightコマンドは、ＨＴＭＬタグのブロック要素タグを使って作成したブロックの高さを設定できるCSSコマンドです。

heightコマンドの使用方法は、下の使用例に示すように、「height」と入力した直後に、「:（コロン）」を入れて、数値と単位を入れて、最後に「;（セミコロン）」を入れます。

●使用例

h1 {height: 50px;}

使用する単位には、相対単位と絶対単位があります。単位についての詳細は、32.スタイルシートで使う単位をご覧ください。

見出しに背景画像を挿入する

例えば、h4タグを使って、次のような画像を背景画像にして、見出しを作ろうと思います。この画像の高さは「35px」です。

● 見出しの記述例

<h4 style="background: url(img/com03701.jpg) no-repeat;">見出し</h3>

● 表示結果

見出し

表示結果を見てわかるように、見出しの背景画像が文字の高さ分しか表示されていません。画像の高さ分まで表示させて、画像が全て表示されるように設定するには、heightコマンドを使います。

● heightコマンドを使った見出し

<h4 style="background: url(img/com03701.jpg) no-repeat; height: 35px;">見出し</h3>

● 表示結果

見出し

背景画像の高さと同じ値を、heightコマンドに設定しましたら、画像が全て表示されました。ところが、このままでは、見出しが背景画像の左上の端に表示されて、良いデザインとは言えません。そこで、paddingコマンドで文字を右にずらします。ここで、paddingコマンドとは、背景を動かさずに、文字の周囲にスペースを空けるコマンドです。paddingコマンドは、別ページで詳しく説明したいと思います。

● 見出しの最終形態

<h4 style="background: url(img/com03701.jpg) no-repeat; height: 35px; padding: 10px 0 0 30px;">見出し</h3>

● 表示結果

見出し

heightコマンドを説明してきましたが、主に、見出しに背景画像を挿入するための説明になってしまいました。この操作は、Ｗｅｂサイト製作のプロがよく使う技の一つです。この技は、ナビに対しても使用できますので、34.displayコマンドで説明した技と組み合わせられます。

ナビに組み込む場合は、aタグの背景を設定すれば良いと思います。そして、マウスと重なったら、違う画像を表示するように設定すれば良いと思います。