- ベストアンサー
定義リストのコーディングについて
- CSS3を使用して、添付画像のようなデザインの定義リストを実現することは可能です。
- 定義リストの見出し（dt）とテキスト（dd）のフォントサイズやスタイルを異なるものに設定し、リスト部分に背景色を付けることもできます。
- ただし、リスト項目の高さを可変にするためには、JavaScriptを使用する必要があるかもしれません。
- suzienuzie
- お礼率100% (23/23)
- HTML
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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ですね。失礼しました
関連するQ&A
- HTML list-styleに見出し
HTMLで、ブラウザ上での表示が 以下の様になるよう組んでいます。 ----------------------------------- コンテンツ大見出し （←大見出しはh3を使用予定） 1．見出し見出し見出し見出し 内容テキスト内容テキスト内容テキスト内容テキスト 内容テキスト内容テキスト内容テキスト内容テキスト 2．見出し見出し見出し見出し 内容テキスト内容テキスト内容テキスト内容テキスト 内容テキスト内容テキスト内容テキスト内容テキスト ～以下同様7、8項目くらい下に続く ----------------------------------- この場合、1～7項目まで続く、いわゆるリストなので list-styleを使った方がいいかな、と思い、当初 ↓ ----------------------------------- <ul> <li> <h4>見出し見出し見出し</h4> テキスト内容テキスト内容テキスト内容テキスト内容 </li> <li> <h4>見出し見出し見出し</h4> テキスト内容テキスト内容テキスト内容テキスト内容 </li> ～ </ul> ----------------------------------- と書いてみましたが、 <li>の中には<h>タグを入れるべきではないと拝見し、 では<dl>を使って ↓ ----------------------------------- <dl> <dt>見出し見出し見出し</dt> <dd>テキスト内容テキスト内容テキスト内容テキスト内容 </dd> <dt>見出し見出し見出し</dt> <dd>テキスト内容テキスト内容テキスト内容テキスト内容 </dd> ～ </dl> ----------------------------------- と組んでみました。 が、そうすると<dt>に番号がふれないのです。 どこかのサイトで、以下の様にスタイルシートに記述すればOKとありましたが dt { display: list-item; list-style: disc outside; … } 上記を記述しても実現できませんでした。 勿論「disc」の部分を「decimal」にしました。 実現方法だけで考えれば、 ・<dl>を使用して、見出し文の頭に自分で数字をつける ・<ul><li>を使用して、見出しの部分だけ<p>か何かで囲み、 スタイルシートで文字の大きさ太さを調整する ・list-styleではなく、各項目<div>で囲み、見出しは<h>タグを使う など、方法はあるのですが、 ・番号がふられている見出しはそれなりに重要視しているので できればhタグか、見出しだと分かるタグを使用したい。 ・番号がふられているリスト（のようなもの）なのでlist-styleが適当のような気がする。 このような場合、皆さんはどう記述されていますか？ どのような記述が正しいのでしょうか。 宜しくお願いします。
- ベストアンサー
- CSS
- 定義リストで先頭にアイコン
先頭にアイコンをつけたいのですが、テキストが重なってしまいます。 できれば下記のように定義リストで実現したいです。 .qaarea dl { margin: 1em; padding: 0; } .qaarea dt { font-weight: bold; color: #035AA3; background: #CCCCCC url(../qa_img/q_back.gif) no-repeat left center; padding: 5px; } .qaarea dd { background: #FFFFFF url(../qa_img/a_back.gif) no-repeat left top; padding: 5px; margin: 10px 0 10px 50px; } ------------- <div class="qaarea"> <dl> <dt>質問が入ります。</dt> <dd>回答が入ります。</dd> </div>
- ベストアンサー
- HTML
- 定義リストタグの正しい使い方
定義リストタグ(dl,dt,dd)の正しい使い方が分かりません。 これらのタグを用いてサイドバーを記述しても正しいのでしょうか？ 例えば、 <dl class="sidebar"> <dt>最近のエントリ</dt> <dd> <ul class="entry"> <li>エントリ1</li> <li>エントリ2</li> </ul> </dd> </dt> </dl> この記述は構造的には間違っていないと思うのですが、HTMLの意味的に正しいでしょうか？関係があるのか分かりませんが、バージョンはXHTML 1.0 Strictを考えています。
- ベストアンサー
- HTML
- ul、dlタグでリストを作成すると行間に余白が
とても基本的な質問なのですが、どなたか教えて頂けると助かります。 ul、dlタグを使い、画像を縦に並べようとしているのですが、IEではどうしても画像と画像の間に余白が入ってしまいます。 この余白を消したいのですが、どうすれば宜しいでしょうか？ ■htmlの記述 <ul> <li>画像１</li> <li>画像２</li> <li>画像３</li> </ul> <dl> <dt>画像1-1</dt> <dd>画像1-2</dd> <dt>画像2-1</dt> <dd>画像2-2</dd> <dt>画像3-1</dt> <dd>画像3-2</dd> </dl> ■CSSの記述 #ul{ margin:0; padding:0; line-height:0; list-style:none; } #ul li{ margin:0; padding:0; line-height:0; } #dl{ margin:0; padding:0; line-height:0; list-style:none; } アドバイスをどうぞ宜しくお願いします。
- 締切済み
- Mac
- webデザイン, コーディング
webサイトのコーディングをしています。下のようなコーディングをしているのですが、div内に指定したbackgroundが<dl>内に反映されません。何故かわかりません。原因が分かる方教えてください！ <div style="background: url(....) repeat;"> <dl> <dt style="float: left">title</dt> <dd style="float: right">contents</dd> </dl> </div>
- ベストアンサー
- HTML
- CSSの定義リスト <dl>で、用語の部分を太字で表示するには？
CSSの定義リスト <dl>で、用語の部分を太字で表示するには？ スタイルシートの記述先がリンクになっています。<dt>用語</dt>の部分を常に太字で表示したいのです。方法をお教えください。 <dl> <dt>用語</dt> <dd>説明</dd> </dl>
- ベストアンサー
- ホームページ作成ソフト
- 定義リスト dl dd dt
困っています。お願いします。 このソースのレイアウトとしましては、 dl1、dl2、dl3と横に並んでいます。 各dtに画像、ddにテキストです。 このカタチが2行続いています。 3行目は、三列の一番左にdl7が置かれるかたちです。 全体としては、 dl1 dl2 dl3 dl4 dl5 dl6 dl7 という感じです。 dl1～dl7まで全て、同じサイズの画像とddにテキストが入っています。 問題はレイアウトではなく、リンクです。 dl1～dl7のdtの中の画像には全てリンクがはれるのですが、 dd部分の一部テキストにはリンクがはれません。 リンクがはれるのは、dl5、dl6、dl7です。 後はリンクを設定しても、リンクがはれない状態です。 いろいろ試してみたのですが、原因がわかりません。 一つ思うことは、dl1、dl2、dl3、dl4の下にはdl4、dl5、dl6があるわけなので、何か下にあるとリンクが効かないのかなあとも思います。 どなたか、教えて頂きたいです。 分かりづらい説明で申し訳ないのですが、宜しくお願い致します。 <dl id="dl1"> <dt id="dt1"> <a href="#"><img src="img/image1.jpg" /></a> </dt> <dd class="dd1"> <a href="#">ああああ</a> </dd> </dl> <dl id="dl2"> <dt id="dt2"> <a href="#"><img src="img/image1.jpg" /></a> </dt> <dd class="dd1"> <a href="#">いいいい</a> </dd> </dl> このカタチをdl7まで繰り返し、htmlに記述します。 次にcssです。 #dl1 { position: relative; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0px 0px 0px 0px; float: left; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } #dt1 a { display: block; width: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a:hover { background-image: url(img/image1-2.jpg); text-decoration: none; } こちらも同様に、dt7まで繰り返しcssを指定。 cssの中身は、画像にホバーしたら、画像が切り替わるようになっています。 次に、テキストのdd部分のcssです。 こちらはクラス指定で、dl1～dl7までの各dd使用。 .dd1 { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd1 a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd1 a:hover { text-decoration: underline; color: #ffffff; } 長々と失礼いたしました。
- ベストアンサー
- HTML
- タグ リストについての質問です。（超初心者です）
タグ リストについての質問です。（超初心者です） リストについてなのですが、複数のリストに複数のスタイルを設定したいのですができません。 何が悪いのか教えて下さい。また解決方法も教えて下さい。 ホームページ作成の初心者です。悪戦苦闘しながら作成しています。 タグについてyahoo知恵袋や教えて!gooなどたくさん調べたつもりなのですが、分かりません・・・ 教えて下さい。 複数のリストに各々スタイルを指定したいのですが、２つめのリストに反映されません。 スタイルシートで作成しているのですが・・・ どのようにしたら良いのでしょうか？ == HTMLは、下記のような形 == <div id="main"> ・ ・ ・ <div id="navigation"> <dl id="navi"> <dt>野菜の種類</dt> <dd><a href="#">キャベツ</a></dd> <dd><a href="#">にんじん</a></dd> </dl> <dl id="navi2"> <dt>車の種類</dt> <dd><a href="#">セダン</a></dd> <dd><a href="#">ワゴン</a></dd> </dl> </div> ・ ・ ・ </div> == CSSは、下記のような形 == #navigation dl#navi { background: #999999; } #navigation dl#navi dt { margin: 0 0 1px; } #navigation dl#navi dd { background: url(bg_01.png) no-repeat; } #navigation dl#navi dd.first { padding-top: 14px; background-position: 0 -1px; } #navigation dl#navi dd a { color: #000000; text-decoration: none } #navigation dl#navi dd a:hover { color: #A6FF28; } #navigation dl#navi2 { background: #FFFF66; } #navigation dl#navi2 dt { margin: 0 0 1px; } #navigation dl#navi2 dd { background: url(bg_01.png) no-repeat; } #navigation dl#navi2 dd.first { padding-top: 14px; background-position: 0 -1px; } #navigation dl#navi2 dd a { color: #000000; text-decoration: none } #navigation dl#navi2 dd a:hover { color: #CC0033; } 上記のような形で、<dl id="navi2">のスタイルが適用されません・・・ なぜでしょうか？ ちなみに<dl id="navi">はちゃんと反映します。 よろしくお願いします。
- ベストアンサー
- HTML
- 定義リストに下線をつけたいと思っています。
定義リストに下線をつけたいと思っています。 （実際は、dt=日付、dd=お知らせ内容を記載するので、１行ごとの仕切りとして） dt,ddの両方に下線をつけたところ、 ・"compact"を入れると下線がdtとddの下線が重なり、破線が一部直線になる ・"float:left；"と幅指定をするとdtとddの間に2pxの隙間ができてしまう という問題がおきます。 そこで、ddにのみ下線をつける方法で回避しようとしました。 が、下記の記述では”dtの前半分くらいに下線がつかない”という現象になります。 《CSS》 dt { width: 70px; margin-left: 5px; padding: 5px 0 5px 0; } dd{ border-bottom:1px dotted #999 ; padding: 5px 0 5px 70px; } 《HTML》 <dl compact> <dt><img src="./image/aaa.png">2010.9.1</dt><dd>*****</dd> <dt><img src="./image/aaa.png">2010.9.2</dt><dd>****</dd> <dt><img src="./image/aaa.png">2010.9.3</dt><dd>***</dd> </dl> どのようにすれば、きれいにdtの最初からddの最後まで下線がひけるでしょうか。
- ベストアンサー
- CSS
お礼
ご回答ありがとうございます。 関連性のあるキーワードなので、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> こんな感じで。