定義リストで表のように見せる
定義リストを横並びにし、表のように見せる
- 定義リストの利用
- 定義リストとは
- dt 要素に対し dd 要素を２回出現させ、これらを横並びにします
定義リストとは
dl (Definition List) 要素は、「用語」 とその 「解説」 など、対になって表現されるものを表すのに使用されます。dl 要素の子要素としては、dt (definition term) 要素または dd (definition description) 要素が一つ以上出現することができます。dt 要素は用語を示すもので、その内容モデルはインライン要素のみです。一方、dd 要素は用語に対する解説を示し、ブロックレベル要素を含むことができますので、段落や他のリストなどを記述することも可能です。
- XHTMLソース：
- <dl>
- <dt>XHTML</dt>
- <dd>Extensible Hyper Text Markup Languageの略。HTML を XML の文法に基づいて再定義したもの。</dd>
- <dt>CSS</dt>
- <dd>Cascading Style Sheets の略。策定中を含め、下記の仕様が存在する。
- <ol>
- <li>Cascading Style Sheets, level 1</li>
- <li>Cascading Style Sheets, level 2</li>
- <li>Cascading Style Sheets, level 2 revision
1</li>
- <li>Cascading Style Sheets, level 3</li>
- </ol>
- </dd>
- </dl>
これにスタイルをセットしてみました。
- CSSソース：
- dl {
- background-color : #ffffcc ;
- border : 1px solid #808000 ;
- padding : 1em ;
- }
- dl dt {
- background-color : #eeeeaa ;
- margin-top : 0.5em ;
- padding : 0.2em 0.5em ;
- }
- dl dd {
- background-color : #ffffdd ;
- border-left : 5px solid #808000 ;
- padding : 0.3em 0.5em ;
- }
ＤＴＤ上では、dl 要素内での dt/dd 要素の出現順に指定はなく、またその回数もどちらか一方が一回以上出現すればいいことになっています。
定義リストは、用語とその解説以外にも使用することができます。このこのことから、定義リストを利用して、索引を表現してみました。
dt 要素に対し dd 要素を２回出現させ、これらを横並びにします
定義リストはブロックレベル要素なので、float プロパティを使用して、定義リストの dt 要素と dd 要素を横並びに表示させることにしました。また、width
値の調整で dd 要素を２回出現させました。
例として当サイトの索引を、dt 要素と dd 要素で作ってみました。
- XHTMLソース：
- <dl class="css_index">
- <dt class="dt1">ア行</dt>
- <dd class="dd1">説明</dd>
- <dd class="dd2">ページ</dd>
- <dt>アカウント情報</dt>
- <dd class="d1">接続する時のアカウント名、パスワードなど</dd>
- <dd cladd="d2"><a href="hpb22.html">hpb22</a></dd>
- <dt>アクセシビリティメータ</dt>
- <dd class="d1">アクセシビリティ レベルを解析し表示する</dd>
- <dd cladd="d2"><a href="hpb01.html">hpb01</a></dd>
- </dl>
- CSSソース：
- dl.css_index {
- width : 100% ;
- float : left ;
- color : #333333 ;
- border : 1px solid #999999 ;
- }
- dl.css_index dt {
- float : left ;
- clear : both ;
- width : 24% ;
- margin-right : 0 ;
- margin-bottom : 0.1em ;
- padding ; 0.1em 0em 0.1em 0.2em ;
- font-weight : bold ;
- }
- dl.css_index dt.dt1{
- background-image : url(../images/wallppr049.gif)
;
- background-repeat : repeat-x ;
- background-position : left top ;
- border-top : 1px solid #999999 ;
- text-align : center ;
- }
- dl.css_index .dd1 {
- width : 52% ;
- float : left ;
- margin-bottom : 0.1em ;
- padding : 0.1em 0.2em 0.1em 0.2em ;
- background-image : url(../images/wallppr057.gif)
;
- background-repeat : repeat-x ;
- background-position : left top ;
- border-top : 1px solid #999999 ;
- text-align : center ;
- }
- dl.css_index .dd2 {
- width : 22.1% ;
- float : left ;
- margin-bottom : 0.1em ;
- padding : 0.1em 0.1em 0.1em 0.2em ;
- background-image : url(../images/wallppr015.gif)
;
- background-repeat : repeat-x ;
- background-position : left top ;
- border-top : 1px solid #999999 ;
- }
- dl.css_index .d1 {
- width : 52% ;
- float : left ;
- margin-bottom : 0.1em ;
- padding : 0.1em 0.2em 0.1em 0.2em ;
- }
- dl.css_index .d2 {
- width : 22% ;
- float : left ;
- margin-bottom : 0.1em ;
- padding : 0.1em 0.1em 0.1em 0.2em ;
- }
dt 要素に float と clear を同時に指定することでこれを実現しております。この指定により、dt 要素が先行する dd 要素の下に回り込むのを解除しつつ、dt 要素の横に後続の dd
要素を配置できるのです。
ページトップへ