- ベストアンサー
定義リスト
質問です。 定義リストに関してですが、<dt>タグに対して複数の<dd>タグは使用可能でしょうか？ 例） <dl> <dt>見出し</dt> <dd>コメント1</dd> <dd>コメント2</dd> </dl> HTMLソースチェックをしたところエラーにはなりませんでした。 よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- 定義リストのコーディングについて
定義リストのコーディングについて 添付画像のようなデザインを、css3だけで実現可能でしょうか。 ソース <dl> <dt>見出し(1)</dt> <dd>テキストテキストテキストテキスト</dd> <dt>見出し見出し見出し(2)</dt> <dd>テキストテキストテキスト</dd> <dt>見出し(3)</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> ポイント ・見出し（dt）とテキスト（dd）のフォントサイズ・スタイルは違う ・見出しとテキストの文字数＝高さは一定ではない ・リスト部分に背景色あり。一番高さのある項目に合わせて可変 素直にulでやれよという感じですが、リストの意味合い的に、できれば定義リストを使いたく… divやその他のタグの追加は、文書構造的におかしくなければある程度許容できます。 モダンブラウザで正しく見えればokです。 無理そうな気もしますが、もし方法があれば、どうぞご教授ください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- DL,DT,DDタグについて
HTMLのタグで"DL"（定義リスト）、"DT"（定義される用語）、"DD"(定義の内容)というのがあるのですが、実際どういう使い方をするのでしょうか。 表示をみると単なる見出しと箇条書きって感じなんですが、特別な意味があるのでしょうか？ ご存知の方、教えていただけますか<m(__)m>
- ベストアンサー
- HTML
- 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
- 定義リストタグの正しい使い方
定義リストタグ(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
- 定義リストに下線をつけたいと思っています。
定義リストに下線をつけたいと思っています。 （実際は、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
- CSSの定義リスト <dl>で、用語の部分を太字で表示するには？
CSSの定義リスト <dl>で、用語の部分を太字で表示するには？ スタイルシートの記述先がリンクになっています。<dt>用語</dt>の部分を常に太字で表示したいのです。方法をお教えください。 <dl> <dt>用語</dt> <dd>説明</dd> </dl>
- ベストアンサー
- ホームページ作成ソフト
- ＨＴＭＬのマークアップ方法
WEB製作を勉強中のものですが、こうゆうソースを見つけたので教えていただけないでしょうか？ <dl class="top_list"> <dd><a href="http://www---------">ぬくぬくマフラーを編もう</a></dd> </dl> <dl class="top_list"> <dd><a href="http://www---------">かぎ針・棒針体験</a></dd> </dl> <dl class="top_list"> <dd><a href="http://www---------">フェルトで季節のスウィーツ作り</a></dd> </dl> のように定義リストで<dt>タグがなくても成立するのですか？ Dreamweaver cs3を使用しているのですがソースは手入力ですか？
- ベストアンサー
- グラフィックソフト
- タグ リストについての質問です。（超初心者です）
タグ リストについての質問です。（超初心者です） リストについてなのですが、複数のリストに複数のスタイルを設定したいのですができません。 何が悪いのか教えて下さい。また解決方法も教えて下さい。 ホームページ作成の初心者です。悪戦苦闘しながら作成しています。 タグについて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
- HTMLタグのDL DT DDを使ってliやulの代わり
HTMLタグのDL DT DDを使ってliやulの代わりをしようとしていますが、 liの list-style-image: url("test.gif"); がDL DT DDで表現できません。 違った方法で表示できるのでしょうか？ それとも不可能なのでしょうか？
- ベストアンサー
- HTML
- どなたか知恵を貸していただけないでしょうか。
どなたか知恵を貸していただけないでしょうか。 定義タグを使って以下のような文書を作ってます。 (1)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (2)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (3)テキストテキストテキストテキストテキストテキストテキストテキストテキスト てきすとてきすとてきすとてきすと てきすとてきすとてきすと １.<dl><dt> ~ </dt></dl>で囲みました。 テキストが長すぎて、改行した時に↓次の行の先頭文字が(1)と同じところまできてしまうので困っています。 (1)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (2)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (3)テキストテキストテキストテキストテキストテキストテキストテキストテキスト てきすとてきすとてきすとてきす てきすとてきすとてきすと もともとの<dt>タグは改行した時、インデントが次の行にも効かないものでしょうか。 以前は効いていたページもあったのですが、スタイルシートが変わって <dt>タグにいろいろ設定してしまったので、もともとの設定が効かなくなったのでしょうか。 2.<dt><dd>の横並びという方法も考えました。 XHTML <dl class="list309"> <dt>（1）</dt><dd>テキストテキスト......</dd> <dt>（2）</dt><dd>テキストテキスト......</dd> <dt>（3）</dt><dd>テキストテキスト......</dd> </dl> dl.list309 dt { clear: left; float: left; margin: 0 0 0 1em; width: 1em; padding-left: 0px; } dl.list309 dd { margin-bottom: 1em; margin-left: 0.5em; } ところが、(3)の本文中↓で<dd>を使いたいので困っています。 「 てきすとてきすとてきすとてきす てきすとてきすとてきすと」 いったいどうすればよいでしょうか。
- ベストアンサー
- HTML
お礼
ありがとうございます。 納得しました。