フィールド指定して文章を枠で囲む
<fieldset>タグを使ってフィールド指定（複数エレメントのグループ化）することで、文章を枠で囲むことができます。
<fieldset>
<legend>見出しとする語句</legend>
フィールド内の文章
</fieldset>
<legend>見出しとする語句</legend>
フィールド内の文章
</fieldset>
という形式になります
このサンプルのソースは、次のようになっています。
<fieldset>
<legend>フィールド指定(複数エレメントのグループ化)</legend>
<p>fieldsetタグを使ってフィールド指定をすると、こんなふうに四角で囲
むことができます。</p>
</fieldset>
<legend>フィールド指定(複数エレメントのグループ化)</legend>
<p>fieldsetタグを使ってフィールド指定をすると、こんなふうに四角で囲
むことができます。</p>
</fieldset>
スタイル指定で、枠の色、太さ、種類、幅、高さおよび余白なども指定することができます。
枠の種類は、border-styleで『solid（実線）』、『double（二重線）』、『groove（凹んだような立体枠）』から選べます。
このサンプルのソースは次のようになっています。
<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>
<!--
.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属性で表示位置を指定することもできます。
ランキングに参加中です! お役に立てたらクリックをお願いします→
同一カテゴリ内一覧
コンピュータとインターネット > データ形式 > HTML > リファレンス