- ベストアンサー
ddタグを上手に使うには？
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
定義リストで書かれている更新履歴・新着情報を幅の固定されたボックス内に整列させて表示させる方法ということで。 確かにtableよりは、定義リストでマークアップするほうが良いでしょう。 <dl id="news"> <dt>2008/12/15</dd> <dd>プロジェクトチームが病院などを視察（14:22）</dd> <dd>ネット販売していた無職男7人逮捕（13:50）</dd> <dt>2008/12/14</dt> <dd>大勢のファンが詰めかける（23:54）</dd> <dd>和解案に合意（21:06）</dd> </dl> このようにマークアップされていたとします。リンクは記述してない。 ★本来は、display: run-in などを使用すべきだが対応していないブラウザが多い。この場合も流し込まれる。 ★floatを使用する ★dd幅を固定し、長いときは折り返されること。 dl#news{ display: block; width: 300px; border: ridge 4px blue; padding: 0.5em 0.5em; } dl#news dt{ float: left; width: 6em; } dl#news dd{ margin-left: 6.5em; text-indent: -1em; font-size: 0.9em } dl#news dd:before{ content: "●"; font-weight: blod; color: red; }
その他の回答 (4)
何故ddに拘るのでしょうか？ 見栄え？ １と同じくtableの方が内容からして相応しい気がします。 但し「複数」記述が前提ですが。 又、自動改行されるのが嫌と云ってますが、閲覧者のディスプレイやブラウザの事を考えてるのでしょうか？ 考えたら自動改行させるのが常道なのですがね。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
要するに古代の<DL COMPACT>みたいなことをしたくてDT要素を floatしているのなら、参考URLをご覧ください。insetなborderで 囲まれた部分が該当します。 もちろん他にもいろんな手口はありますけどね。
dd {white-space:pre;} を追加すれば改行はされなくなりますが、けっきょく枠外に出たときの対処が必要になります。
- Tacosan
- ベストアンサー率23% (3656/15482)
こういうものこそ table で書けばいいと思うんだけどなぁ....
関連するQ&A
- floatさせたdtの内容が多い場合、ddの背景と高さが合いません
サイトの新着情報を<dl><dt><dd>で組んでいます。 罫線の上に左に画像、右に日付と新着内容が並んでいるように 見せたいのですが、<dt>を左にfloatし<dd>を回り込ませ、 <dd>に罫線の画像を背景で設定た場合、<dd>の内容が少ない時、 罫線画像が左の<dt>の画像と高さが合いません。 <dd>にClearfixを設定すると、モダンブラウザでは<dt>の高さと <dd>の罫線画像の高さが合い、希望通りの表示になりました。 しかし、IE6と7ではモダンブラウザと同じ表示にはなりません。 float以外の方法でも構いませんので、IE6以降とモダンブラウザ ともに<dl><dt><dd>で上記希望の表示を実現させる方法がありましたら、 アドバイス頂けないでしょうか、よろしくお願いしますm(__)m ソースは以下になります。 [HTML] <dl class="news"> <dt><img src="img/photo.jpg" width="50" height="50" /></dt> <dd><span>2009.01.01</span><br /> <a href="#">新着情報のテキストが入ります。</a></dd> <dt><img src="img/photo.jpg" width="50" height="50" /></dt> <dd><span>2009.01.01</span><br /> <a href="#">新着情報のテキストが入ります。</a></dd> <dt><img src="img/photo.jpg" width="50" height="50" /></dt> <dd><span>2009.01.01</span><br /> 新着情報のテキストが入ります。</dd> </dl> [CSS] #index dl.news { padding: 8px 15px; border: #999 1px solid; } #index dl.news dt { width: 50px; float: left; clear: left; } #index dl.news dd { margin: 0 0 6px; padding: 0 0 8px 57px; background: url(../img_cmn/linet.gif) repeat-x bottom; line-height: 125%; } #index dl.news dd:after {/* clearfix */ content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; }
- ベストアンサー
- HTML
- ddの内容が多い時のdtの背景を伸ばしたい
dtとddをfloatで横並びにしています。 dtの背景色が途中で切れてしまいます。 例えば、 <dl> <dt>場所 </dt> <dd>あいうえお市かきくけ町<br /> さしすせ公園<br /> 長文～～～～～～… </dd> </dl> とした場合。dtには背景色を指定、ddの内容が複数行あってもdtの背景色が1行分だけで終わってしまいます。 ddの内容が収まっている高さまでdtの背景色を伸ばすにはどうしたら良いでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- 入れ子にしたddタグをcssで制御できません。
入れ子にしたddタグのマージンをcssで指定してみましたが、うまくいきません。 </dd> <dl> <dt>111111</dt> <dd>22222222222222222</dd> <dd>33333333333</dd> <dt>４４４４４４</dt> <dd>５５５５５５５</dd> <dl> <dt>６６６６６６６６</dt> <dd>７７７７７７７７７</dd> </dl> </dd> </dl> のようにｄｄの中にまたdlから始まるのを入れ子にしました。 それで、cssで .hoge dd{ color:#FFFFFF; margin:10px; } とすると、ddタグの文字が白くなります。それはわかるのですが、上の入れ子の例の７７７７７７のように入れ子になったddだけにスタイルシートを掛けたいのです。 試しに .hoge dl dt dd dl dt dd{ color:#FFFFFF; margin:10px; } や、 .hoge dd dl dt dd{ color:#FFFFFF; margin:10px; } を試してみましたが、うまくいきませんでした。 どうしたら、入れ子の中のddだけにスタイルシートを適用できるようになりますでしょうか。もしくは、このようなddを入れ子にする方法は使わないのでしょうか。
- ベストアンサー
- HTML
- DD,DT,DDを横並び。paddingとmarginと無指定で
DD,DT,DDを横並び。paddingとmarginと無指定で 下記の内どれが一番使われているのでしょうか？ 理由も教えていただけれるとありがたいです。 dl,dt,dd{ margin:0; padding:0;} dt{ float:left; width:8em; } .list0 dd{ padding-left:7em;} .list2 dd{ margin-left:8em;} <div> <dl class="list0"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <dl class="list1"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <div class="list2"> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> </div> </div>
- ベストアンサー
- HTML
- dl,dt,ddタグでdtに対して、rowspan
お世話になっております。 表題の通り、 dl,dt,ddタグでdtに対して、rowspanってできませんか？ cssは記述しておりませんが、 現在、テーブルのように２列並んだ状態です イメージ（http://www.geocities.jp/eijispace/2011/0810.html） <dl> <dt>天気</dt> <dd>晴れ</dd> <dt>天気</dt> <dd>曇り</dd> <dt>天気</dt> <dd>雨</dd> </dl> これを天気の部分は縦に一つに纏めて表示したいのです。 tableタグでも良いのですが、 レスポンシブ化を計っており、 ウインドウサイズが小さくなると、 一列に表示ということがしたく、 ウインドウサイズが小さくなると jsか何かで、rowspanを0にする という方法でも良いのですが、 jsは余り使わず、mediaクエリで何とかならないものか考えております。 ご教授お願いします
- ベストアンサー
- CSS
- WinIE(5以降)で、ddタグをCSSで制御すると、ずれてしまいます。
WinIE(5以降)で、ddを下記のCSSで制御すると、「取締役/」と書かれた文字から先が、 前に3pxほどずれてしまいます。 ---------------------------------------------------- <html><head><title>dl組</title> <style type="text/css"> <!-- #works dl, dt, dd {font-size: 12px; line-height: 1.5em; margin: 0px; padding: 0px;} #works dt {padding: 0 0 5px 0; float: left;} #works dd {margin: 0 0 0 5.5em; padding: 0 0 5px 0;} --> </style> </head> <body> <div id="works"> <dl> <dt>会社創業</dt> <dd>昭和63年2月1日</dd> <dt>改組設立</dt> <dd>平成15年3月1日</dd> <dt>役員</dt> <dd>代表取締役社長/あいうえお<br> 常務取締役/かきくけこ<br> <!-- ここから --> 取締役/さしすせそ<br> 取締役/たちつてと<br> 取締役/なにぬねの<br> 取締役/はひふへほ</dd> <!-- ここまで --> </dl> </div> </body></html> ---------------------------------------------------- そこで下記のCSSを追加して、いちよう解決したのですが、何かすっきりしません。 ---------------------------------------------------- #works dd .sage {padding: 0 0 0 3px;} /* WinIE用 */ html>body #works dd .sage {padding: 0;} /* WinIE以外用 */ <!-- ここから --> <div class="sage">取締役/さしすせそ<br> 取締役/たちつてと<br> 取締役/なにぬねの<br> 取締役/はひふへほ</div></dd> <!-- ここまで --> ---------------------------------------------------- これ以外の方法で、もうちょっとシンプルに解決する方法はないでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- <dl><dt>タグ使用時、インデントが生じない
こんにちは。 <dl><dt><dd>タグを使った文章で、 よく、説明部分の字下げが生じないことが あります。 今回、 <img src="5.gif" style="float:left;"> <dl> <dt>作品例です。</dt> <dd>こんなものを作っています。</dd> </dl> <br clear="left"> というコードで、<dt>と<dd>部分が 並んで表示されます。 何度か、こういうことが生じて、 非常に困っています。 なにが、原因でしょうか。 何か分かる人がいましたら、 よろしくお願いします。
- ベストアンサー
- HTML
- webデザイン dl dt ddの横並び指定
初歩的な質問失礼します。 webサイトの「ニュース」や「インフォメーション」の記述によくある dl dt dd要素を使って、「日付、日時」をdtに、「内容、イベント」をddにマークアップして、floatで横並びにするレイアウトを作成していて、他のサイトを研究しながらなんとか形にできたのですが、正直ポイントがつかめていません。 なんとなく、(1) floatは<dt>に指定する。 (2)<dt>と<dd>の横の余白は、<dd>に<dt>幅分+空けたい分のpadding-leftを指定する。 (3)bottomにborderを指定したい場合は、<dd>に指定すると<dt>のbottomにもborderが表示される。 この三点はポイントなのかなー、と思ったのですが（いや、全然違うし。ってとこがあったら是非教えてください！！どうしてそうなのかも理由がよくわかってないんです。） 上下の余白の取り方もpaddingとmarginをいろいろ試して（結果両方使いました。） 思うような形に出来たのですが、全然理由がわかりませんでした。 dt ddを横並びにした時の左右、上下の余白の取り方を理由も含めて説明していただけないでしょうか？？ よろしくお願いします！
- ベストアンサー
- CSS
- 定義リスト 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
- HTMLタグのDL DT DDを使ってliやulの代わり
HTMLタグのDL DT DDを使ってliやulの代わりをしようとしていますが、 liの list-style-image: url("test.gif"); がDL DT DDで表現できません。 違った方法で表示できるのでしょうか？ それとも不可能なのでしょうか？
- ベストアンサー
- HTML
