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

［特集］ レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜HP作成ガイド｜掲示板
< HOME PageTop▲