- ベストアンサー
定義リストのコーディングについて
- CSS3を使用して、添付画像のようなデザインの定義リストを実現することは可能です。
- 定義リストの見出し（dt）とテキスト（dd）のフォントサイズやスタイルを異なるものに設定し、リスト部分に背景色を付けることもできます。
- ただし、リスト項目の高さを可変にするためには、JavaScriptを使用する必要があるかもしれません。
- suzienuzie
- お礼率100% (23/23)
- HTML
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
それってdtとddの組み合わせごとにdlを設定してはいけないのでしょうか？ <style> dl{ display:block; float:left; width:120px; background-Color:yellow; } dt,dd { display:block; margin:0px; } dt{ font-size:1.5em; background-Color:red; } dd{ font-size:0.8em; } </style> <div> <dl> <dt>見出し(1)</dt> <dd>テキストテキストテキストテキスト</dd> </dl> <dl> <dt>見出し見出し見出し(2)</dt> <dd>テキストテキストテキスト</dd> </dl> <dl> <dt>見出し(3)</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> </div>
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
これがソース・・HTML4.01strict ★指定しない場合は３つまで横並び ★指定した場合はその数横並びterm1～term4 (term3はなくてもよいが、将来のCSS変更のためつけてある) ★IE8,safari4,opera9,firefox3.5/3.6で確認 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 検証済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{margin:0px;padding:0px;} h1{ text-align:center;} div.DL2TABLE{ display:block;position:relative; width:600px; margin-right:auto;margin-left:auto; background-color:rgb(255,193,45); } div.DL2TABLE dl{ display:block; float:left; margin:1%; padding:0px; width:31%; } div.term1 dl{ width:97%; } div.term2 dl{ width:48%; } div.term4 dl{ width:23%; } div.term3 dl{ } div.DL2TABLE dl dt{ text-align:center; font-weight:bold; line-height:4ex; } div.DL2TABLE dl dd{ margin-left:0px; padding:0.5em; } hr{ visibility:hidden; clear:left; height:0px; } --> </style> </head> <body> <h1>サンプル</h1> <div class="DL2TABLE term3"> <dl> <dt>定義</dt> <dd>定義１の説明</dd> </dl> <dl> <dt>定義<br>定義</dt> <dd>定義２の説明</dd> </dl> <dl> <dt>定義</dt> <dd>定義３の説明<br>定義３の説明<br>定義３の説明定義３の説明</dd> </dl> <hr> </div> <div class="DL2TABLE term3"> <dl> <dt>定義</dt> <dd>定義１の説明</dd> </dl> <dl> <dt>定義<br>定義</dt> <dd>定義２の説明</dd> </dl> <dl> <dt>定義</dt> <dd>定義３の説明<br>定義３の説明<br>定義３の説明</dd> </dl> <dl> <dt>定義</dt> <dd>定義３の説明<br>定義３の説明<br>定義３の説明</dd> </dl> <hr> </div> </body> </html>
お礼
サンプルも作ってくださってありがとうございます！ 添付画像って縮小されてしまうんですね。せっかく作業いただいたのに見えなくなっちゃったのが残念です；
- ORUKA1951
- ベストアンサー率45% (5062/11036)
一つ一つ指定しないで簡単に済ませる方法は、一つの定義リストごとにdivで括ってしまう方法です。ポイントはhrとそれをvisibility:hiddenで隠すことかな。floatを使って親コンテナブロックを伸縮させるときの手法ですから覚えておくと色々な場面で活用できるでしょう。 とりあえず３つの定義ですが、リストの数が増えればHTML側で <dl style="width:31%;">部分を書き換えるか、ページ内CSSで指定するかでしょう。
お礼
ご回答ありがとうございます。 なるほど、参考にさせていただきます。 1つのリストごときでソースが冗長になってしまうのを避けたい思いがあったのですが、やはりメンテ性や時間との兼ね合いで仕方がない部分もありますね。
- LOHA
- ベストアンサー率52% (203/388)
定義リストでのやり方は他の人のを参考していただくとして、私なりの意見としては、今回の場合定義リストは使わずdiv,h2,pあたりを使えばよいかと思います。 <div> <h2>見出し１</h2> <p>テキスト</p> </div> <div> <h2>見出し２</h2> <p>テキストテキスト</p> </div> で、divにdisplay: inline-block;で完了です（もちろん適宜幅調整は必要です）。 ちなみにIE6でもzoomあたりを利用してinline-blockを再現できます。
お礼
ご回答ありがとうございます。 今回は意味合い的にhxはちょっと違うかな、と思い使いませんでしたが、ブロック横並びとしては王道の手法ですね！ 見出しという表現がまずかったです。用語ですね。すみません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSSはまだドラフト段階ですが、文字数をカウントする機能はありませんから困難なのではないかと。XHTMLなら、XSLT( XML Stylesheet Language Transformations )が使えるので、そういう処理もできるでしょう。やりたくもないけど・・ 最も簡便な方法は、HTML的には <dl> <dt>見出し(1)</dt> <dd>テキストテキストテキストテキスト</dd> </dl> <dl> <dt>見出し見出し見出し(2)</dt> <dd>テキストテキストテキスト</dd> <dl> <dt>見出し(3)</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> でしょうね。 それをしないなら、面倒ですが・・作成時にフォントサイズを決めて、かつ表示を確認しながらCSSを書いていくしかないでしょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{margin:0px;padding:0px;} h1{ taxt-align:center;} dl.column3{ display:block;position:relative; width:600px; margin-right:auto;margin-left:auto; background-color:rgb(255,193,45); height:10ex; } dl.column3 dt,.column3 dd{ position:relative; width:30%; margin-left:2%; } .column3 dt{ font-weight:bold; border-bottom:1px solid yellow; top:0.5ex; text-align:center; } dl.column3 dd{ background-color: rgb(255,220,80);} dl.column3 dt+dd+dt, dl.column3 dt+dd+dt+dd{ margin-left:35%; top:-5ex; } dl.column3 dt+dd+dt+dd+dt, dl.column3 dt+dd+dt+dd+dt+dd{ margin-left:68%; top:-13ex; } --> </style> </head> <body> <h1>サンプル</h1> <dl class="column3"> <dt>定義</dt> <dd>定義１の説明</dd> <dt>定義<br>定義</dt> <dd>定義２の説明</dd> <dt>定義</dt> <dd>定義３の説明</dd> </dl> </body> </html>
お礼
ご回答ありがとうございます。 決め打ちはちょっとやりたくないので、穏便に行こうと思います^^; ulで用語部分をiでくくることも考えています。
補足
iって何だ！ emですね。失礼しました
お礼
ご回答ありがとうございます。 関連性のあるキーワードなので、1つのdlでまとめたいと思っていましたが、やはりそれぞれくくるしかないですかね・・・ dlも1つの用語と定義を関連付けられるようになればよいのですが。 <dl> <li><dt>用語1</dt><dd>定義1</dd></li> <li><dt>用語2</dt><dd>定義2</dd></li> <li><dt>用語3</dt><dd>定義3</dd></li> </dl> こんな感じで。