角丸ボックス1-4

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

角丸ボックスを作成するHTMLとCSSのサンプルコードです。

「角丸ボックス1-3」とほぼ同じですが、影の長さはやや短めになっています。

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

幅100pxの角丸ボックス

【ボックス】

ボックスの内容

ボックスの内容

幅150pxの角丸ボックス

【ボックス】

ボックスの内容

ボックスの内容

幅200pxの角丸ボックス

【ボックス】

ボックスの内容

ボックスの内容

幅300pxの角丸ボックス

【ボックス】

ボックスの内容

ボックスの内容

幅400pxの角丸ボックス

【ボックス】

ボックスの内容

ボックスの内容

幅500pxの角丸ボックス

【ボックス】

ボックスの内容

ボックスの内容

幅600pxの角丸ボックス

【ボックス】

ボックスの内容

ボックスの内容

幅700pxの角丸ボックス

【ボックス】

ボックスの内容

ボックスの内容

  • 幅は固定、高さは可変のボックスとなります。上記の各サンプルでは、ボックスの幅を100px〜700pxで固定しています。
  • ボックスの背景には下側の枠線画像を、見出しの背景には上側の枠線画像を設定しています。この2つを重ね合わせて、ボックス全体の枠線に見せています。
  • 下側の枠線画像の高さは500pxなので、ボックスの高さは最大で「500px + 見出しの高さ」までとなります。
  • 見出しの部分で使用しているタグ（h2）は、ご自分のページに合わせて適切なレベルに変更してください。
使用している画像

ボックスの幅と同じサイズの背景画像を使用してください。

背景色は白となります。（角丸の部分は透過されていません）

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

コード

以下のCSSコードは、ボックスの幅を300pxに指定する場合の設定内容となります。幅を変更したい場合は、「ボックスの幅」「ボックスの背景画像」「見出しの背景画像」、この3ヵ所を変更してください。

CSSコード
.example {
padding: 30px 10px;
background-color: #ffffff;
font-size: 80%;
color: #000000;
}

/* --- ボックス --- */
.section {
width: 300px; /* ボックスの幅 */
padding-bottom: 5px; /* ボックスの下パディング */
background: #ffffff url(maru3_300_bottom.gif) no-repeat bottom; /* ボックスの背景 */
}

/* --- 見出し --- */
.section h2 {
margin: 0; /* 見出しのマージン */
padding: 1em 15px 0 10px; /* 見出しのパディング（上右下左） */
background: #ffffff url(maru3_300_top.gif) no-repeat top; /* 見出しの背景 */
font-size: 100%; /* 見出しの文字サイズ */
}

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

<div class="section">

<h2>見出し</h2>

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

</div>

</div>

備考

  • この角丸ボックスでは、ボックス内に見出しが含まれている必要があります。見出しを入れたくない場合は、別の要素を使用して背景画像を設定してください（あまりオススメはしませんが）。
  • ボックス内の各余白は、影の分（5px程度）を計算して設定されています。（見出しのパディングや段落マージンは、左右の値が異なります）
inserted by FC2 system