|
|
|
HOME > HTML & CSSパーツ > CSS box(ボックス)サンプル > CSS 角丸box(ボックス)サンプル |
|
CSS 角丸box(ボックス)サンプル |
|
|
|
|
|
|
|
|
|
角丸の見出し付きボックスのサンプルです。 |
|
|
|
|
|
サンプル |
|
|
|
|
ボックス１ |
|
見出しサンプル
ここに文字を記入します
ここに文字を記入します
ここに文字を記入します
ここに文字を記入します
ここに文字を記入します
|
|
|
|
|
|
|
|
|
|
|
|
|
使用している画像 |
|
|
|
|
|
ue1.jpg |
|
 |
|
|
|
 |
|
shita.jpg |
|
|
|
|
|
設置方法 |
|
|
|
|
|
 CSS(スタイルシート）記述例 |
|
|
|
|
div.box1 {
width: 452px; /* ボックスの幅 */
padding-bottom: 5px;
background: url(bar/shita.jpg) no-repeat bottom; /* ボックスの背景 */
font-size: 90%;
}
div.box1 h3 {
margin: 0;
background: url(bar/ue1.jpg) no-repeat top; /* 見出しの背景 */
line-height: 29px;
padding-top:5px;
padding-left:10px;
border-bottom: 1px #666666 solid; /* 見出しの下境界線 */
font-size: 110%; /* 見出しの文字サイズ */
}
div.box1 p {
margin: 5px 10px; /* 段落の間隔 */
}
|
|
|
|
|
|
|
|
|
HTML記述例 |
|
|
|
|
<div class="box1">
<h3>見出しサンプル</h3>
<p>ここに文字を記入します</p>
<p>ここに文字を記入します</p>
<p>ここに文字を記入します</p>
<p>ここに文字を記入します</p>
<p>ここに文字を記入します</p>
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
