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

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / 枠付きの見出し帯(CSS)
枠付きの見出し帯(CSS)


スタイルシートを使用して、枠付きの見出し帯を作成してみます。

※見出し帯の基本的な説明は、「標準タイプの見出し帯(CSS)」をご覧ください。
※ここで使用しているスタイルシートについての詳細は、「ボックス」「テキスト・フォント」カテゴリーをご覧ください。

※スタイルシートの設定方法については、「スタイルシートの基本」をご覧ください。


 枠の指定方法
帯に枠を付けたいときは、border を指定します。

【 <HEAD> 〜 </HEAD> 】


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

.title1 {
background-color: #88C0EE; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
padding: 5px; /* 帯内の余白 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<H2 CLASS="title1">Webサイト作成情報</H2>

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

Webサイト作成情報


上記の例では、1px の枠線を引いています。


 色々な枠線
枠線の種類や太さを変更することで、色々なタイプの帯を作成できます。

【 <HEAD> 〜 </HEAD> 】


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

.title2 {
background-color: #88C0EE; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
padding: 5px; /* 帯内の余白 */
border: 1px #1C79C6 dotted; /* 枠線(太さ・色・スタイル) */
}

.title3 {
background-color: #88C0EE; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
padding: 5px; /* 帯内の余白 */
border: 4px #1C79C6 dotted; /* 枠線(太さ・色・スタイル) */
}

.title4 {
background-color: #88C0EE; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
padding: 5px; /* 帯内の余白 */
border: 4px #1C79C6 outset; /* 枠線(太さ・色・スタイル) */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<H1 CLASS="title2">Webサイト作成情報1</H1>

<H2 CLASS="title3">Webサイト作成情報2</H2>

<H3 CLASS="title4">Webサイト作成情報3</H3>

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

Webサイト作成情報1

Webサイト作成情報2

Webサイト作成情報3




 色々な組み合わせ
枠線を部分的に表示したり、背景色を入れたり入れなかったりすることで、色々なタイプの帯を作成できます。

【 <HEAD> 〜 </HEAD> 】


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

.title5 {
background-color: #FFFFFF; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
padding: 5px; /* 帯内の余白 */
border-bottom: 2px #1C79C6 solid; /* 下の枠線(太さ・色・スタイル) */
border-left: 10px #1C79C6 solid; /* 左の枠線(太さ・色・スタイル) */
}

.title6 {
font-size: 12pt; /* 文字サイズ */
padding: 5px; /* 帯内の余白 */
border-top: 2px #1C79C6 dashed; /* 上の枠線(太さ・色・スタイル) */
border-bottom: 2px #1C79C6 dashed; /* 下の枠線(太さ・色・スタイル) */
}

.title7 {
background-color: #FFFFFF; /* 背景色 */
font-size: 12pt; /* 文字サイズ */
padding: 5px; /* 帯内の余白 */
border-bottom: 4px #1C79C6 dotted; /* 下の枠線(太さ・色・スタイル) */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<H1 CLASS="title5">Webサイト作成情報1</H1>

<H2 CLASS="title6">Webサイト作成情報2</H2>

<H3 CLASS="title7">Webサイト作成情報3</H3>

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

Webサイト作成情報1

Webサイト作成情報2

Webサイト作成情報3




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


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