見出しと一体のbox(ボックス)：無料でホームページを作成する方法！

HOME > HTML & CSSパーツ > CSS box(ボックス)サンプル > 見出しと一体のbox(ボックス)1

見出しと一体のbox(ボックス)1

　　カラーバリエーションを変えた見出し付きボックスのサンプルです。

サンプル

	ボックス１
	見出しサンプルここに文字を記入しますここに文字を記入しますここに文字を記入します

	ボックス２
	見出しサンプルここに文字を記入しますここに文字を記入しますここに文字を記入します

	ボックス３
	見出しサンプルここに文字を記入しますここに文字を記入しますここに文字を記入します

設置方法

CSS(スタイルシート）記述例

/*ボックス１の記述例*/
div.box1 {
width: 450px; /* ボックスの幅 */
background-color: #e7e7e7; /* ボックスの背景色 */
border: 1px #999999 solid; /* ボックスの枠 */
font-size: 90%; /* ボックス内の文字サイズ */
}

div.box1 h3 {
margin: 0;
background-color: #cccccc; /* 見出しの背景色 */
line-height: 27px;
padding-left: 10px;
border-bottom: 1px #999999 solid; /* 見出しの下線 */
font-size: 110%; /* 見出しの文字サイズ */
}

div.box1 p {
margin: 5px 10px; /* 段落の間隔 */
}

/*ボックス２の記述例*/
div.box2 {
width: 450px; /* ボックスの幅 */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #cccccc solid; /* ボックスの枠 */
font-size: 90%; /* ボックス内の文字サイズ */
}

div.box2 h3 {
margin: 0;
background-color: #ffcc33; /* 見出しの背景色 */
line-height: 27px;
padding-left: 10px;
border-bottom: 1px #cccccc solid; /* 見出しの下線 */
font-size: 110%; /* 見出しの文字サイズ */
}

div.box2 p {
margin: 5px 10px; /* 段落の間隔 */
}

/*ボックス３の記述例*/
div.box3 {
width: 450px; /* ボックスの幅 */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #666666 solid; /* ボックスの枠 */
font-size: 90%; /* ボックス内の文字サイズ */
}

div.box3 h3 {
margin: 0;
color:#ffffff;
background-color: #000099; /* 見出しの背景色 */
line-height: 27px;
padding-left: 10px;
border-bottom: 1px #666666 solid; /* 見出しの下線 */
font-size: 110%; /* 見出しの文字サイズ */
}

div.box3 p {
margin: 5px 10px; /* 段落の間隔 */
}

HTML記述例

<div class="box1">
<h3>見出しサンプル</h3>
<p>ここに文字を記入します</p>
<p>ここに文字を記入します</p>
<p>ここに文字を記入します</p>
</div>

　　ボックス２と３の場合は　class=を"box2"と"box3"に変更して下さい。

　【外部サイト】

	CSS box(ボックス)サンプル
	CSSを使って装飾したbox(ボックス)のサンプルを紹介しています。

	CSS table(テーブル)サンプル集
	CSSを使ったtableのサンプルを多数公開しています。コピペで貼り付けて簡単に利用できます。

	Google PageRank UP！
	SEO対策で重要な要素である、Google PageRankを上げる方法を紹介しています。

	bing SEO対策の裏ワザ
	以外に知られていない、検索エンジンbingのSEO対策の方法を公開。