- 締切済み
htmlの<DL>というタグについて質問です
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。1000文字制限で書けなかったので ＿＿＿<ol id="contentTable"> ＿＿＿＿<li><a href="#CHECK">ご注文完了まで</a></li> ＿＿＿＿<li><a href="#NAME">お客様情報の入力</a></li> ＿＿＿＿<li><a href="#TEL">電話番号の入力</a></li> ＿＿＿</ol> は、 ＿＿＿<ol id="contentTable"> ＿＿＿＿<li><a href="#CHECK"><img src="http://img14.shop-pro.jp/PA01143/396/etc/botan1.jpg" width="206" height="42" alt="ご注文完了まで"></a></li> ＿＿＿＿<li><a href="#NAME"><img src="http://img14.shop-pro.jp/PA01143/396/etc/botan2.jpg" width="206" height="42" alt="お客様情報の入力"></a></li> ＿＿＿＿<li><a href="#TEL"><img src="http://img14.shop-pro.jp/PA01143/396/etc/botan3.jpg" width="206" height="42" alt="電話番号の入力"></a></li> ＿＿＿</ol> のほうが、企業サイトでは後方互換を考慮すると良いと思います。
関連するQ&A
- タグ リストについての質問です。（超初心者です）
タグ リストについての質問です。（超初心者です） リストについてなのですが、複数のリストに複数のスタイルを設定したいのですができません。 何が悪いのか教えて下さい。また解決方法も教えて下さい。 ホームページ作成の初心者です。悪戦苦闘しながら作成しています。 タグについて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
- inlineでテキストの入ったボックスを横に並べる
いつもお世話になっています。 inlineでテキストが中に入った高さの違うボックスを横に並べる方法に ついてです。float1～6が題名で、あいうえお等がその下に説明文として 並ぶと思ってください。 確認ブラウザ 【OK】Win ie6、ie7、Fx3.5.2、Opera、Mac Safari 【NG】Mac Fx2.0 添付画像のように<dt>と<dd>が横に並んでしまい、<dt>の下に来てくれ ません。<dt><dd>どちらをclearしてもだめでした…。 宜しくお願いします！！ <style> div.wrap { width: 600px; background: #EEEEEE; padding: 8px; border: 1px solid #333333; } div.box { display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1; width: 160px; height: 130px; margin: 8px; border: 2px solid #333333; background: #DDDDDD; vertical-align: top; padding: 8px; } div.height { height: 200px; border: 2px solid #FF9999; background: #FFEEEE; } dd{ width: 150px; float: left; } dt { float: left; clear: left; } </style> <html> <body> <div class="wrap"> <div class="box"> <dt>float 1</dt> <dd>ああああああああああああああああああああああああああああああああああああ</dd> </div><!-- --><div class="box height"> <dt>float 2</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd></div><!-- --><div class="box"> <dt>float 3</dt> <dd>うううううううううううううううううううううううううううううううううううう</dd> </div><!-- --><div class="box"> <dt>float 4</dt> <dd>ええええええええええええええええええええええええええええええええええええ</dd></div><!-- --><div class="box"> <dt>float 5</dt> <dd>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dd> </div><!-- --><div class="box"> <dt>float 6</dt> <dd>かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか</dd></div> </div> </body> </html>
- ベストアンサー
- 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>をリストマークの画像にして <dd>をテキストにします。 細かいレイアウトのズレはCSSで調整しています。 ほかにもっと良いやり方がある気がして。。 ご存知の方いらっしゃいましたら、何卒ご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- 複数の<option>と一致するものを表示するには
サンプルで作ったコードは、 <select name="select1">の<option>、 <select name="select2">の<option>、 <select name="select3">の<option>で選び、その下にあるボタンを押すと、 <div class="sample_in">の<dd>タグ内と上記３つの項目に一致するにものだけを表示させたい と考え下記コードを作りました。しかし、select1とselect2は処理が行われません。 select3のみが処理されてしまいます。例えば・・・ 「1組,男子,おとなしい」を選んだ場合、サンプルでは一致するものは１つしかないので その親である<div class="sample_in">のみを表示させたいですが、 2組、女子でも表示の対象になり、一致するものが２つになってしまいます。 解決に役立つ様なプロパティやメソッドはないでしょうか。ヒントだけでもお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>サンプル</title> <style type="text/css"> #mainBox { width: 300px; border: 3px solid black; padding: 10px; } .sample_in { width: 250px; border: 1px solid SteelBlue; padding: 10px; margin: 20px; } .sample_in dt { color: Magenta; } </style> </head> <body> <form name="myForm" action="#"> <select name="select1"> <option value="指定なし" selected="selected">指定なし</option> <option value="1組">1組</option> <option value="2組">2組</option> <option value="3組">3組</option> </select> <select name="select2"> <option value="指定なし" selected="selected">指定なし</option> <option value="男子">男子</option> <option value="女子">女子</option> </select> <select name="select3"> <option value="指定なし" selected="selected">指定なし</option> <option value="おとなしい">おとなしい</option> <option value="活発">活発</option> <option value="普通">普通</option> </select> <input type="button" value="OK" onclick="test0()"> </form> <div id="sample"> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> </div> <script type="text/javascript"> function test0() { var div1 = document.getElementById('sample'); var div2 = div1.children; var index1 = document.myForm.select1.selectedIndex; var index2 = document.myForm.select2.selectedIndex; var index3 = document.myForm.select3.selectedIndex; var str1 = document.myForm.select1.options[index1].text; var str2 = document.myForm.select2.options[index2].text; var str3 = document.myForm.select3.options[index3].text; var ary = [str1, str2, str3]; for(m=0; m<ary.length; m++){ for(i=0, len1=div2.length; i<len1; i++){ var dd = div2[i].getElementsByTagName("dd"); for(j=0, len2=dd.length; j<len2; j++){ var ddText = dd[j].textContent; if( ary[m] == ddText ){ dd[j].parentNode.parentNode.style.display = ''; break; }else{ dd[j].parentNode.parentNode.style.display = 'none'; } } } } alert("エラーなし"); //動作確認用 } </script></body></html>
- ベストアンサー
- JavaScript
- <li>の画像およびテキストリンクのランダム複数表示
javascriptでランダム表示する方法を教えて下さい。 サイト内に商品の一覧を作成しようと考えており、それぞれの商品画像、テキストリンクをランダムで動かしたいと思っております。 商品数は10点くらいになる予定です。 <div id="sample"> <ul> <li> <dl> <dt>商品1</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> <li> <dl> <dt>商品2</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> </ul> </div> ソースはこんな感じで、10点程の掲載予定です。 <li>～～</li>リスト10点をランダム表示する javascriptを教えて下さい。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 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
- htmlのデザインについて質問です。
htmlのデザインについて質問です。 cssに色々とコンテンツの位置を指定しています。 そして次のような記述をしました。 div#～ { width: 250px; height: 460px; background-image: (画像のURL);} このように画像を使うと、指定した位置に画像が表示されるのですが、 div#～ { width: 250px; height: 460px; border-style: solid; } と、枠にすると何故か指定した位置からズレるんです。 なぜなんでしょうか？ 分かる方がいたら教えて下さい。
- ベストアンサー
- HTML
- 定義リスト 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
- リストタグを使ったレイアウトで困っています。
リストタグを使ったレイアウトで困っています。 olタグを使い、入れ子にしたdtタグに書かれた文字列に番号を降っています。 それを下記のようなレイアウトにしたいんです。 １．左側の内容 ２．右側の内容 ３．左側の内容 ４．右側の内容 ５．左側の内容 ６．右側の内容 単純に１、３、５を１つずつdivでまとめ、CSSでfloat: leftを指定して ２、４、６のdivと交互に書いてます。 すると、Firefoxではリストの番号がちゃんと１、２、３…と表示されたのですが IEでは全て１になってしまい番号が降れていませんでした。 CSS自体はfloatの指定しかしていません。 上記のようなレイアウトをしたい場合、このような考え方ではダメなんでしょうか？ htmlのソースは下記のような感じで書いてます。 <ol> <div id="left"> <li> <dl> <dt>左側</dt> <dd>左側の内容</dd> </dl> </li> </div> <div id="right"> <li> <dl> <dt>右側</dt> <dd>右側の内容</dd> </dl> </li> </div> </ol> どなたか分かる方いらっしゃいましたらアドバイスをお願い致します…！
- 締切済み
- HTML