TAG 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


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲