HTML index
ホームページ作成ガイド

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / 標準タイプの見出し帯（CSS）
標準タイプの見出し帯（CSS）
スタイルシートを使用して、見出し用の帯を作成してみます。

※ここで使用しているスタイルシートについての詳細は、「ボックス」と「テキスト・フォント」カテゴリーをご覧ください。

※スタイルシートの設定方法については、「スタイルシートの基本」をご覧ください。
　作り方
ボックスを作成して、その背景に色を付けます。

帯の長さは width で、帯の色は background-color で指定します。

Hタグを使って作成すると、次のようになります。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.title1 {
background-color: #88C0EE; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
}

.title2 {
width: 50%; /* 帯の長さ */
background-color: #88C0EE; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<H2 CLASS="title1">Webデザイン</H2>

<H3 CLASS="title2">Webプログラミング</H3>

・これをブラウザで見ると次のように表示されます

Webデザイン

Webプログラミング

Hタグなどの「ブロック要素」とよばれるタグでは、width の指定を行わない場合は 100% の長さになります。

また、Hタグの場合は見出しのレベル（H1〜H6）により文字の大きさが変わってしまうので、上記の例では font-size を指定して文字サイズを固定しています。


次に、DIVタグを使って作成してみます。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.title3 {
background-color: #88C0EE; /* 背景色 */
font-weight: bold; /* 文字の太さ */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<DIV CLASS="title3">Webデザイン</DIV>

・これをブラウザで見ると次のように表示されます

Webデザイン

Hタグでは見出しの文字が自動的に太字になりますが、それ以外のタグで作成した場合は太字にはなりません。

上記の例では、font-weight を指定して見出しの文字を太字にしています。


見出し文字の周囲に余裕を持たせたい場合は、padding を指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.title4 {
background-color: #88C0EE; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
padding: 5px; /* 帯内の余白 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<H2 CLASS="title4">Webデザイン</H2>

・これをブラウザで見ると次のように表示されます

Webデザイン


見出し文字を中央に配置したい場合は、text-align を指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.title5 {
background-color: #88C0EE; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
text-align: center; /* 文字の位置 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<H2 CLASS="title5">Webデザイン</H2>

・これをブラウザで見ると次のように表示されます

Webデザイン


　帯の背景に画像を使う
帯の背景に画像を使いたいときは、background-image を指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.title6 {
background-image: url(image/back.gif); /* 背景画像 */
font-size: 12pt; /* 文字サイズ */
padding: 5px; /* 帯内の余白 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<H2 CLASS="title6">Webデザイン</H2>

・これをブラウザで見ると次のように表示されます

Webデザイン

← 背景に使用した画像（back.gif）


　立体的な帯
帯の周囲に色の異なる細い線を入れることで、帯を立体的に見せることができます。

細い線を入れる場合は、border を指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.title7 {
background-color: #88C0EE; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
padding: 5px; /* 帯内の余白 */
border-width: 2px; /* 枠線の太さ */
border-style: solid; /* 枠線のスタイル */
border-color: #BEDDF5 #429BE3 #429BE3 #BEDDF5; /* 枠線の色（上・右・下・左） */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<H2 CLASS="title7">Webデザイン</H2>

・これをブラウザで見ると次のように表示されます

Webデザイン

上記の例では、上下左右の枠線の色を個別に指定しています。上と左の線を明るく、右と下の線を暗くして立体的に見せています。

　帯の上下にマージンを入れる
帯の上下にマージンを入れたいときは、margin を指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.title8 {
background-color: #88C0EE; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
margin-top: 30px; /* 帯上部の余白 */
margin-bottom: 10px; /* 帯下部の余白 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<H2 CLASS="title8">Webデザイン</H2>

・これをブラウザで見ると次のように表示されます

Webデザイン

上記の例では、帯の上部に 30px、下部に 10px のマージンを入れています。

ホームページ作成ガイドTOP

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system