1. Home
  2. Webテンプレート
  3. ボックス
  4. 見出し付きボックス4-2

見出し付きボックス4-2



見出し付きのボックスを作成するサンプルコードです。

ボックス全体に背景画像を設定したタイプとなります。


表示例

見出し

【ボックス】

ボックスの内容

ボックスの内容

  • このサンプルでは、パディングと境界線を含めたボックスの幅は300pxになります。(親要素の幅に合わせる場合は、「ボックスの幅」の指定は必要ありません)
  • 背景画像を設定する際には、同時に背景色も設定しておいてください。(背景色を設定しないと、ボックスの高さが広がった際に背景が途切れてしまいます)
  • 見出しの部分で使用している要素(h3)は、ご自分のページに合わせて適切なレベルに変更してください。

使用している画像

box_back_olive2.gif box_back_olive2.gif (背景色 #7e964b)

画像へは直接リンクしないでください。ダウンロードしてから使用してください)

画像の制作について

参考画像

色違いの背景画像です。サイトの配色に合わせてお選びください。

box_back_umberbrown2.gif box_back_umberbrown2.gif (背景色 #6e6252)

box_back_darkblue2.gif box_back_darkblue2.gif (背景色 #57579b)

box_back_gray2.gif box_back_gray2.gif (背景色 #f4f2ee)

コード

CSSコード


/* --- ボックス --- */
div.section {
width: 288px; /* ボックスの幅 */
padding: 0 5px; /* ボックスのパディング(上下、左右) */
background: #7e964b url(box_back_olive2.gif) repeat-x top; /* ボックスの背景 */
border: 1px #404040 solid; /* ボックスの境界線 */
font-size: 80%; /* ボックスの文字サイズ */
color: #ffffff; /* ボックスの文字色 */
}

/* --- 見出し --- */
div.section h3 {
margin: 0 0 1em; /* 見出しのマージン(上、左右、下) */
padding: 10px 5px 5px; /* 見出しのパディング(上、左右、下) */
border-bottom: 1px #cccccc solid; /* 見出しの下境界線 */
font-size: 100%; /* 見出しの文字サイズ */
}

/* --- ボックス内の段落 --- */
div.section p {
margin: 1em 5px; /* 段落のマージン(上下、左右) */
}

HTMLコード


<div class="section">

<h3>見出し</h3>

<p>【ボックス】</p>
<p>ボックスの内容</p>
<p>ボックスの内容</p>

</div>


ページの先頭へ