ホームページ作成の基礎からご提供するホームページ作成Space

枠の種類は、border-styleで『solid（実線）』、『double（二重線）』、『groove（凹んだような立体枠）』から選べます。

サンプルフィールドAスタイル指定もできます。この部分は、
border-width:3px;
border-color:red;
border-style:solid;
padding:0 10px 5px 10px;
です。 サンプルフィールドBスタイル指定もできます。この部分は、
border-width:3px;
border-color:blue;
border-style:double;
padding:0 10px 5px 10px;
です。 サンプルフィールドCスタイル指定もできます。この部分は、
border-width:3px;
border-color:green;
border-style:;groove;
padding:0 10px 5px 10px;
です。
このサンプルのソースは次のようになっています。

<style type="text/css">
<!--
.samplelegend {
font-size:14px;
font-weight:bold;
color:red;
padding:0 10px;
margin-top:10px;
}

.samplefield_a {
border-width:3px;
border-color:red;
border-style:solid;
padding:0 10px 5px 10px;
}

.samplefield_b {
border-width:3px;
border-color:blue;
border-style:double;
padding:0 10px 5px 10px;
}

.samplefield_c {
border-width:3px;
border-color:green;
border-style:;groove;
padding:0 10px 5px 10px;
}
-->
</style>

<div class="sample">
<fieldset class="samplefield_a">
<legend class="sample">サンプルフィールドA</legend>
スタイル指定もできます。この部分は、
<div style="margin-left:20px;">
border-width:3px;<br>
border-color:red;<br>
border-style:solid;<br>
padding:0 10px 5px 10px;</div>
です。
</fieldset>

<fieldset class="samplefield_b">
<legend class="sample">サンプルフィールドB</legend>
スタイル指定もできます。この部分は、
<div style="margin-left:20px;">
border-width:3px;<br>
border-color:blue;<br>
border-style:double;<br>
padding:0 10px 5px 10px;</div>
です。
</fieldset>

<fieldset class="samplefield_c">
<legend class="sample">サンプルフィールドC</legend>
スタイル指定もできます。この部分は、
<div style="margin-left:20px;">
border-width:3px;<br>
border-color:green;<br>
border-style:;groove;<br>
padding:0 10px 5px 10px;</div>
です。
</fieldset>
一般的なブロックタグと同様に、高さや幅、align属性で表示位置を指定することもできます。