見出し付きボックス2

無料・有料 レンタルサーバー比較


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

見出しの上マージンにマイナス値を指定して、ボックスの枠線に見出しを重ねています。

テンプレートのご利用について


見出し

【ボックス】

ボックスの内容

ボックスの内容

  • このサンプルでは、枠線を含めたボックスの幅は300pxになります。(親要素の幅に合わせる場合は、「ボックスの幅」の指定は必要ありません)
  • 見出しの表示位置は、見出しのマージンで調節することができます。
  • 見出しの部分で使用しているタグ(h2)は、ご自分のページに合わせて適切なレベルに変更してください。

コード

CSSコード
/* --- ボックス --- */
.section {
width: 298px; /* ボックスの幅 */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #c0c0c0 solid; /* ボックスの枠線 */
font-size: 80%; /* ボックスの文字サイズ */
}

/* --- 見出し --- */
.section h2 {
position: relative; /* IE6用 */
width: 100px; /* 見出しの幅 */
margin: -0.9em 0 0 3px; /* 見出しのマージン(上右下左) */
padding: 3px; /* 見出しのパディング */
background-color: #ffffff; /* 見出しの背景色 */
border: 1px #c0c0c0 solid; /* 見出しの枠線 */
font-size: 100%; /* 見出しの文字サイズ */
text-align: center;
}

/* --- ボックス内の段落 --- */
.section p {
margin: 1em 10px; /* 段落のマージン(上下、左右) */
}
HTMLコード
<div class="section">

<h2>見出し</h2>

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

</div>

備考

  • 見出しの上マージンにマイナス値を指定しているので、状況によっては他の要素と重なってしまったり、親要素からはみ出してしまう場合があります。それを避けたい場合は、ボックスに上マージンを指定するか、親要素に上パディングを指定してマイナス分の領域を確保しておいてください。
  • IE6での不具合(ボックスからはみ出た部分が消えてしまう)を避けるため、見出しに position: relative を指定しています。


inserted by FC2 system