TOPページ >  文章を修飾する(背景色、画像、枠など...) > フィールド指定して文章を枠で囲む

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

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

<fieldset>
<legend>見出しとする語句</legend>
フィールド内の文章
</fieldset>

という形式になります

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

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

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

<fieldset>
<legend>フィールド指定(複数エレメントのグループ化)</legend>
<p>fieldsetタグを使ってフィールド指定をすると、こんなふうに四角で囲
むことができます。</p>
</fieldset>

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


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

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
フィールド指定して文章を枠で囲む
文字や文章、画像の行揃えを指定する
文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
文章や文字、画像を囲む枠の種類を指定する
文字や文章、画像を囲む枠の色を指定する
文章や文字、画像を枠で囲む
マージンとパディングの違い
余白を入れる(パディング)
余白を入れる(マージン)
改行する/改行を禁止する
文章の背景色、背景画像、配置方法をまとめて指定する
文字や文章、テーブルなどの背景画像の位置を指定する
文章の背景に画像を固定表示する
文章の背景に指定した画像を繰返し表示する
段落文章の横幅を指定する
文章の行間隔を指定する
文章の背景画像を指定する
文章の背景色を指定する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス