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

見出し付きボックス5



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

ボックスにフチを付けたタイプとなります。


表示例

見出し

【ボックス】

ボックスの内容

ボックスの内容

  • このサンプルでは、パディングを含めたボックスの幅は300pxになります。(親要素の幅に合わせる場合は、「ボックスの幅」の指定は必要ありません)
  • フチの幅は、「ボックスのパディング」で変更することができます。
  • ボックス内部の背景色は、「内部の背景色」で変更することができます。
  • 見出しの部分で使用している要素(h3)は、ご自分のページに合わせて適切なレベルに変更してください。

使用している画像

box_back_blue3.gif box_back_blue3.gif (背景色 #aed5f6)

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

画像の制作について

参考画像

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

box_back_orange3.gif box_back_orange3.gif (背景色 #ffd280)

box_back_tan3.gif box_back_tan3.gif (背景色 #eee2d0)

box_back_green3.gif box_back_green3.gif (背景色 #c7e28d)

box_back_gray3.gif box_back_gray3.gif (背景色 #e8e8e8)

コード

CSSコード


/* --- ボックス --- */
div.section {
width: 284px; /* ボックスの幅 */
padding: 8px; /* ボックスのパディング */
background: #aed5f6 url(box_back_blue3.gif); /* ボックスの背景 */
font-size: 80%; /* ボックスの文字サイズ */
}
div.section div.inner {
padding: 1em 10px 1px; /* 内部のパディング(上、左右、下) */
background-color: #ffffff; /* 内部の背景色 */
}

/* --- 見出し --- */
div.section h3 {
margin: 0 0 1em; /* 見出しのマージン(上、左右、下) */
font-size: 120%; /* 見出しの文字サイズ */
}

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

HTMLコード


<div class="section">
<div class="inner">

<h3>見出し</h3>

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

</div>
</div>


ページの先頭へ