フィールド指定して文章を枠で囲む

タグを使ってフィールド指定(複数エレメントのグループ化)することで、文章を枠で囲むことができます。


見出しとする語句
フィールド内の文章

という形式になります

フィールド指定(複数エレメントのグループ化)

fieldsetタグを使ってフィールド指定をすると、こんなふうに四角で囲むことができます。

このサンプルのソースは、次のようになっています。


フィールド指定(複数エレメントのグループ化)

fieldsetタグを使ってフィールド指定をすると、こんなふうに四角で囲
むことができます。


スタイル指定で、枠の色、太さ、種類、幅、高さおよび余白なども指定することができます。

Code:
枠の種類は、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属性で表示位置を指定することもできます。