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

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

< HOME / ホームページ作成ガイド / 見出し付きのボックス（CSS）
見出し付きのボックス（CSS）
スタイルシートを使用して、見出し付きのボックスを作成してみます。

※枠付きボックスの基本的な説明は、「枠付きボックス（CSS）」をご覧ください。
※ここで使用しているスタイルシートについての詳細は、「ボックス」と「テキスト・フォント」カテゴリーをご覧ください。

※スタイルシートの設定方法については、「スタイルシートの基本」をご覧ください。
　作り方
「枠付きボックス（CSS）」で作成したボックスの中に、見出しの帯と内容を組み込みます。
※見出し帯の詳細についは、「標準タイプの見出し帯（CSS）」をご覧ください。

ボックスの作成にDIVタグ、見出しの帯にHタグ、内容部分にPタグを使って作成すると、次のようになります。

【 <HEAD> 〜 </HEAD> 】


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

.box1 {
width: 350px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 内容の背景色 */
border: 1px #1C79C6 solid; /* 枠線（太さ・色・スタイル） */
}

.box1 H2 {
background-color: #1C79C6; /* 見出しの背景色 */
font-size: 12pt; /* 見出しの文字サイズ */
color: #FFFFFF; /* 見出しの文字色 */
margin: 0; /* スペースを削除 */
}

.box1 P {
margin: 0; /* スペースを削除 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<DIV CLASS="box1">

<H2>Webデザイン情報</H2>

<P>

ホームページのデザインとは。
<BR>
ここに内容を入れていきます。
・
・

</P>

</DIV>

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

Webデザイン情報

ホームページのデザインとは。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。


HタグやPタグを使用すると、自動的にスペースが入ってしまいます。上記の例では、HタグとPタグに margin: 0 を指定して、自動的に入るスペースを消しています。

また、上記の例では枠線の色と見出し帯の色を同色に指定しています。


見出し文字の周囲に余裕を持たせたい場合はHタグに padding を、内容と枠線の間に余裕を持たせたい場合はPタグの margin を指定します。

【 <HEAD> 〜 </HEAD> 】


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

.box2 {
width: 350px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 内容の背景色 */
border: 1px #1C79C6 solid; /* 枠線（太さ・色・スタイル） */
}

.box2 H3 {
background-color: #1C79C6; /* 見出しの背景色 */
font-size: 12pt; /* 見出しの文字サイズ */
color: #FFFFFF; /* 見出しの文字色 */
margin: 0; /* スペースを削除 */
padding: 5px; /* 見出しの余白 */
}

.box2 P {
margin: 10px; /* 内容の余白 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<DIV CLASS="box2">

<H3>Webデザイン情報</H3>

<P>

ホームページのデザインとは。
<BR>
ここに内容を入れていきます。
・
・

</P>

</DIV>

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

Webデザイン情報

ホームページのデザインとは。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。



見出しの文字や内容を中央に配置したい場合は、それぞれ text-align を指定します。

【 <HEAD> 〜 </HEAD> 】


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

.box3 {
background-color: #E3F0FB; /* 内容の背景色 */
border: 1px #1C79C6 solid; /* 枠線（太さ・色・スタイル） */
}

.box3 H4 {
background-color: #1C79C6; /* 見出しの背景色 */
font-size: 12pt; /* 見出しの文字サイズ */
color: #FFFFFF; /* 見出しの文字色 */
margin: 0; /* スペースを削除 */
text-align: center; /* 見出し文字の位置 */
}

.box3 P {
margin: 0; /* スペースを削除 */
text-align: center; /* 内容の文字の位置 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<DIV CLASS="box3">

<H4>Webデザイン情報</H4>

<P>

ホームページのデザインとは。
<BR>
ここに内容を入れていきます。ここに内容を入れていきます。
・
・

</P>

</DIV>

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

Webデザイン情報

ホームページのデザインとは。
ここに内容を入れていきます。ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。



見出しの帯を枠線とは違う色にしたい場合は、Hタグの background-color の値を変更してください。

その際、見出しと内容の境界線にラインを引きたい場合は、Hタグに border-bottom を指定します。

【 <HEAD> 〜 </HEAD> 】


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

.box4 {
width: 350px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 内容の背景色 */
border: 1px #1C79C6 solid; /* 枠線（太さ・色・スタイル） */
}

.box4 H4 {
background-color: #FFFFFF; /* 見出しの背景色 */
font-size: 12pt; /* 見出しの文字サイズ */
margin: 0; /* スペースを削除 */
}

.box4 P {
margin: 0; /* スペースを削除 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<DIV CLASS="box4">

<H4>Webデザイン情報</H4>

<P>

ホームページのデザインとは。
<BR>
ここに内容を入れていきます。
・
・

</P>

</DIV>

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

Webデザイン情報

ホームページのデザインとは。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。



【 <HEAD> 〜 </HEAD> 】


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

.box4 {
width: 350px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 内容の背景色 */
border: 1px #1C79C6 solid; /* 枠線（太さ・色・スタイル） */
}

.box4 H4 {
background-color: #FFFFFF; /* 見出しの背景色 */
font-size: 12pt; /* 見出しの文字サイズ */
margin: 0; /* スペースを削除 */
border-bottom: 1px #1C79C6 solid; /* 見出し下の枠線（太さ・色・スタイル） */
}

.box4 P {
margin: 0; /* スペースを削除 */
}

-->
</STYLE>

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

Webデザイン情報

ホームページのデザインとは。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。



【 <HEAD> 〜 </HEAD> 】


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

.box4 {
width: 350px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 内容の背景色 */
border: 1px #1C79C6 solid; /* 枠線（太さ・色・スタイル） */
}

.box4 H4 {
background-color: #FFFFFF; /* 見出しの背景色 */
font-size: 12pt; /* 見出しの文字サイズ */
margin: 0; /* スペースを削除 */
border-bottom: 1px #1C79C6 dotted; /* 見出し下の枠線（太さ・色・スタイル） */
}

.box4 P {
margin: 0; /* スペースを削除 */
}

-->
</STYLE>

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

Webデザイン情報

ホームページのデザインとは。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。



　見出しの背景に画像を使う
見出しの背景に画像を使いたいときは、見出し部分（下の例ではHタグ）に background-image を指定します。

【 <HEAD> 〜 </HEAD> 】


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

.box5 {
width: 350px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 内容の背景色 */
border: 1px #1C79C6 solid; /* 枠線（太さ・色・スタイル） */
}

.box5 H2 {
background-image: url(image/back.gif); /* 見出しの背景画像 */
font-size: 12pt; /* 見出しの文字サイズ */
margin: 0; /* スペースを削除 */
}

.box5 P {
margin: 0; /* スペースを削除 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<DIV CLASS="box5">

<H2>Webデザイン情報</H2>

<P>

ホームページのデザインとは。
<BR>
ここに内容を入れていきます。
・
・

</P>

</DIV>

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

Webデザイン情報

ホームページのデザインとは。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。


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


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

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

inserted by FC2 system