USEFULL CSS SAMPLE B

定義タグを使ったレイアウトサンプル

Mac ie5、Win ie6、 opera7、nn7、 firefox1で検証してます。　スタイルシートはブラウザによって解釈がまちまちですが、以上のブラウザでは同じように表示されます。

このファイルは HTML 4.01 Transitionalで、loose.dtdを指定していません。loose.dtdを設定しているバージョンはこちらからどうぞ。ブラウザによってはloose.dtdを設定していると「dd」に「ul」等のタグを使うと激しくずれます。「position」を指定しているとloose.dtdを設定してなくても崩れます。なお、loose.dtdについてはこちらをご覧下さい。

スタイルシートを外した時のデフォルト表示

「dd」は自動で改行され、全体にインデントされます。
注意：このサンプルには特にスタイルを指定していませんが、フォントサイズ、マージン等はページに指定したものを継承している為、一部修正しています。

sample A

定義部分: ここは「dd」の中です。定義タグを使ったレイアウトサンプル用のダミー文章です。
定義部分定義部分定義部分: ここは「dd」の中です。定義部分を長くしてみました。定義タグを使ったレイアウトサンプル用のダミー文章です。
定義部分: ここは「dd」の中です。定義タグを使ったレイアウトサンプル用のダミー文章です。定義タグを使ったレイアウトサンプル用のダミー文章です。

基本HTMLソース

<div id="ID">
<dl>
 <dt>定義部分</dt>
<dd><p>定義タグを使ったレイアウトサンプル用のダミー文章です。</p></dd>
 <dt>定義部分</dt>
<dd>
<p>定義タグを使ったレイアウトサンプル用のダミー文章です。</p>
</dd>
 <dt>定義部分</dt>
<dd><p>定義タグを使ったレイアウトサンプル用のダミー文章です。</p></dd>
 <dt>定義部分</dt>
<dd><p>定義タグを使ったレイアウトサンプル用のダミー文章です。</p></dd>
</dl>
</div>

スタイルシートで定義タグを「dt」「dd」を並列にする

「dt」「dd」を並列にするには、いくつか方法がありますが、ここでは一番シンプルと思える方法を紹介します。

まず取りあえず「dt」「dd」のマージンとパディングを「0」に指定し消します。
さらに「dt」「dd」の行の高さを揃えます。
サンプルの場合「1.2em」
「dd」の「margin-top」を揃えた行の高さ分「マイナス」にする。　
サンプルの場合「-1.2em」
「dt」の幅を文字数にまたは文字数＋1文字程度に合わせる。
サンプルの場合「6.5em」
「dd」displayプロパティをrelativeにする。topプロパティを「0」、leftプロパティを「dt」の幅に合わせる。サンプルの場合「6.5em」

以上が「dt」「dd」を並列にするの基本です。

アレンジの際の注意：単位「em」は大文字1文字のサイズを基準とした単位です。「dt」の幅と「dd」の左ポジションを「em」で指定すれば、ユーザーが文字サイズを変更しても、文字サイズに合わせて自動的に変更されるのでレイアウトが崩れません。行の高さも同様です。

ただし全体のブロックの幅を「em」で指定すると、文字サイズに合わせて際限なく広がるなったりするので、（ボディーが画面より大きくなることまありえる）本体或いは本文の部分は「%」等で指定することをお勧めします。

sample B

「dt」を太文字にしてみました。

登場人物 A：: 定義タグを使ったレイアウトサンプル用のダミー文章です。
登場人物 B：: 定義タグを使ったレイアウトサンプル用のダミー文章です。
登場人物 C：: 定義タグを使ったレイアウトサンプル用のダミー文章です。
登場人物 D：: DL要素の「dt」「dd」を並列にするサンプル用のダミー文章です。親の「div」の幅は500pxに指定しています。
登場人物 E：: DL要素の「dt」「dd」を並列にするサンプル用のダミー文章です。フォントサイズ「dt」「dd」の幅、高さは相対値で指定しているので、ユーザーがブラウザでフォントサイズを変えてもレイアウトは崩れません。

CSSソース

#ID {width:500px;}
#ID dl { 
margin:  0px 0px 0px 0px;
padding:  0px 0px 0px 0px;
font-size:x-small;
}
#ID dt {
font-style: normal;font-weight:bold;
line-height: 1.2em;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:6.5em;
}
#ID dd {
position:relative; 
top:-1.2em; 
left:6.5em;
border-width: 0px; 
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px; 
line-height: 100%;
z-index:1;
width:80%;line-height: 1.2em;
}
#ID p{margin:0 0 7px 0;padding:0;}

sample C

「dt」を右寄せにしてみました。

ねこ：: 定義タグを使ったレイアウトサンプル用のダミー文章です。
しまうま：: 定義タグを使ったレイアウトサンプル用のダミー文章です。定義タグを使ったレイアウトサンプル用のダミー文章です。定義タグを使ったレイアウトサンプル用のダミー文章です。定義タグを使ったレイアウトサンプル用のダミー文章です。
きりん：: 定義タグを使ったレイアウトサンプル用のダミー文章です。
うさぎ：: DL要素の「dt」「dd」を並列にするサンプル用のダミー文章です。親の「div」の幅は500pxに指定しています。
いのしし：: DL要素の「dt」「dd」を並列にするサンプル用のダミー文章です。フォントサイズ「dt」「dd」の幅、高さは相対値で指定しているので、ユーザーがブラウザでフォントサイズを変えてもレイアウトは崩れません。

CSSソース

/* 並列　サンプル　右寄せ */
#ID {width:500px;}
#ID dl { 
margin:  0px 0px 0px 0px;
padding:  0px 0px 0px 0px;
font-size:x-small;
}
#ID dt {
font-style: normal;
font-weight:bold;
line-height: 1.2em;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:6em;text-align:right;
}
#ID dd {
position:relative; 
top:-1.2em; 
left:6.2em;
border-width: 0px; 
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px; 
line-height: 100%;
z-index:1;
width:80%;line-height: 1.2em;
}
#ID p{margin:0 0 7px 0;padding:0;}

Sample D

「dt」の頭にリストマークもどきを入れる

「dl」「dt」「dd」のパディング、マージンは「dt」の左パディング以外は値0に指定してあります。「dt」の左パディングはリストマークもどきの画像用分だけ取りました。　

モジラ系では、「dt」の左パディングを幅に含まないので、（Win IEがボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう）その分「dd」の左マージンを多めに取ってください。

2004.10.22: ここは「dd」の中です。定義タグを使ったレイアウトサンプル用のダミー文章です。ここは「dd」の中です。定義タグを使ったレイアウトサンプル用のダミー文章です。
2004.10.22: サンプル用のダミー文章です。
2004.10.22: サンプル用のダミー文章です。ここは「dd」の中です。定義タグを使ったレイアウトサンプル用のダミー文章です。
2004.10.22: DL要素の「dt」「dd」を並列にするサンプル用のダミー文章です。フォントサイズ「dt」「dd」の幅、高さは相対値で指定しているので、ユーザーがブラウザでフォントサイズを変えてもレイアウトは崩れません。

CSSソース

#ID_c {width:500px;}
#ID dl { 
margin:  0px 0px 0px 0px;
padding:  0px 0px 0px 0px;
font-size:x-small;
}
#ID dt {
font-style: normal;
line-height: 1.2em;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 15px;
background-image:url(xxx.gif);
background-repeat:no-repeat;
background-position:0% 0%;width:6em;
}
#ID dd {
position:relative; top:-1.2em; left:6.9em;
border-width: 0px; 
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px; 
line-height: 100%;
z-index:1;
width:80%; 
line-height: 1.2em;
}
#ID p{margin:0 0 4px 0;padding:0;}

その他、定義タグのレイアウトアレンジ

「dt」Definition Termの前後を画像で修飾

「dt」の頭を修飾するのは「Sample D」のリストマークもどきと同じです。

テキストのすぐ後ろに画像を置くには、要素をインラインにして、画像の幅分だけ右にパディングを取ります。そのため「dt」の中のテキストをspanで括ります。

sample E

定義部分

ここは「dd」の中です。定義タグを使ったレイアウトサンプル用のダミー文章です。ここは「dd」の中です。定義タグを使ったレイアウトサンプル用のダミー文章です。

定義部分定義部分

ここは「dd」の中です。定義部分を長くしてみました。ここは「dd」の中です。定義タグを使ったレイアウトサンプル用のダミー文章です。

定義部分

ここは「dd」の中です。「dd」の中にアウンオーダード・リストを入れてみました。

サンプル用のダミー文章です。
サンプル用のダミー文章です。
サンプル用のダミー文章です。
サンプル用のダミー文章です。

注意！注意！注意！

Macで「position」に「relative」を指定した「dd」の中に「ul」を入れると、思いっきりずれます。loose.dtdを設定していると「position」に「relative」を指定していなくてもずれます。

CSSソース

HTMLソース
<div id="ID">
<hr>
<dl>
<dt><span class="mydt_d">定義部分</span></dt>
<dd><p>定義タグを使ったレイアウトサンプル用のダミー文章です。</p></dd>
<dt><span class="mydt_d">定義部分</span></dt>
<dd><p>定義タグを使ったレイアウトサンプル用のダミー文章です。</p></dd>
<dt><span class="mydt_d">定義部分</span></dt>
<dd><p>定義タグを使ったレイアウトサンプル用のダミー文章です。</p></dd>
</dl><hr>
</div>
#ID {width:500px;}
#ID dl {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:x-small;
}
#ID dt{font-style: normal;
line-height: 1.2em;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 15px;
background-image:url(xxx.gif);
background-repeat:no-repeat;
background-position:0% 50%;}
.mydt_d {padding: 0 55px 0 0; background-image:url(xxx.gif);
background-repeat:no-repeat;
background-position:100% 30%;margin:0;}
#ID dd {margin:  5px 0px 0px 30px;
padding: 0px 0px 0px 0px;line-height:120%;}
#sample_d p{margin:0 0 17px 0;padding:0;line-height:150%;}

定義タグを使ったレイアウトサンプル

スタイルシートを外した時のデフォルト表示

sample A

スタイルシートで定義タグを「dt」「dd」を並列にする

sample B

sample C

Sample D

その他、定義タグのレイアウトアレンジ

sample E

サンプル

リファレンス

その他

文字サイズ