角丸ボックス1-2

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

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

「角丸ボックス1」をベースに、8種類のサイズ（幅）をご用意しました。

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

幅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: 1px; /* ボックスの下パディング */
background: #ffffff url(maru1_300_bottom.gif) no-repeat bottom; /* ボックスの背景 */
}

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

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

<div class="section">

<h2>見出し</h2>

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

</div>

</div>

備考

  • この角丸ボックスでは、ボックス内に見出しが含まれている必要があります。見出しを入れたくない場合は、別の要素を使用して背景画像を設定してください（あまりオススメはしませんが）。
inserted by FC2 system