fieldset要素・legned要素の、IE, Mozilla, Operaなどでのデフォルトスタイルのような表示を、CSSを使って実現する試み。
<fieldset> <legend>legend</legend> filedset </fieldset>
┌ legend ─────┐ │ │ │ fieldset │ ←こんなの └─────────┘
例としてblockquote要素にスタイル適用する場合を想定します。
例えばh3要素で引用文の題名を記述する場合。
<blockquote> <h3>引用文の題名</h3> <p>これは引用文です。</p> </blockquote>
※題名にh[1-6]要素、または他のどの要素を使うかについては、状況に応じて文脈などから判断する必要があります。
blockquote {
border:groove 2px #ccc;
position:relative;
}
blockquote h3 {
position:absolute;
top:-0.5em;
left:0.5em;
font-size:1em;
font-weight:bold;
display:inline;
margin:0;
padding:0 0.5em;
background-color:#fff;
}
（背景が白(#fff)の場合）
引用文の題名をblockquote要素のtitle属性として記述する場合。
<blockquote title="引用文の題名"> <p>これは引用文です。</p> </blockquote>
blockquote {
border:groove 2px #ccc;
}
blockquote:before {
content:attr(title);
margin-top:0;
margin-left:0.5em;
padding:0.5em;
display:inline;
font-size:1em;
font-weight:bold;
background-color:#fff;
}