質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • HTML

    9563questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

ulとdlのどちらを使うか迷うことがある

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 8,197
退会済みユーザー

退会済みユーザー

ulとdlのどちらを使うか迷うことがあるのですが、
どう区別していますか?

dtの説明がddに来ている場合はdl。
何かの説明ではなくただ単語を羅列する場合は、ulという判断でしょうか? 

定義リストかただのリストかの違いだという事はわかるのですが、
具体的にその二つの違いがはっきりしません。


下記サイトの認識で良いのでしょうか?
http://www.hp-sakusei.info/07/index11.php


そもそもリストとは一覧表、名簿、目録などを意味するそうですが、
単語の羅列をする場合に、リストを使うという認識で良いのでしょうか?
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+7

改めて編集し直しました。
これまでの内容より分かりやすくなっていると思います。

各リスト要素の説明と主な用途

<ul> 順不同リスト(Unordered List)
箇条書きで項目を列挙したい時に使うリスト要素。
項目の順序が入れ替わっても不都合の無いリストは順不同リストを使う。


  • 目録
  • 一覧表
等々

<ol> 順序付きリスト(Ordered List)
順序が重要な項目を列挙したい時に使うリスト要素。
項目の順序が入れ替わると都合が悪いリストは順序付きリストを使う。


  • 目次
  • 順位・序列
  • 時系列
  • 段取り・手順
等々

<dl> 記述リスト(Description List)
項目(語句)とそれに言及した文章を列挙したい時に使うリスト要素。
見出しを付けてひとつのセクションとして扱うには少々大袈裟な内容をまとめる時に使う事が多い。
つまり、細目とそれに言及した文章を列挙する時に最適なのが記述リストであると考えられる。


HTML4.01やXHTMLなどでは定義リスト(Definition List)となっていましたが、HTML5では定義である必要が無くなり記述リスト(Description List)になりました。定義リストの使い方を迷う事はないと思うので、ここでは記述リストについて説明しています。


  • 用語と定義(説明)
  • 質問と回答
  • 日付と記録
  • 役とそれを担う人の名前(劇での配役や組織での役職など)
  • 原因(または予想)と結果
  • データのトピック(キー)と値
等々

各リスト要素を使った例

<h1>ビーフカレーのレシピ</h1>
<p>おいしいビーフカレーを作りましょう。</p>

<h2>材料</h2>
<p>4人前</p>
<!-- 箇条書きの項目<li> -->
<ul>
  <li>牛肉 400g</li>
  <li>たまねぎ 1個</li>
  <li>にんじん 1本</li>
  <li>以下略</li>
</ul>

<h2>作り方</h2>
<!-- 順序が重要な項目<li> -->
<ol>
  <li>たまねぎの半分をすりおろし、残りは薄切りにする。</li>
  <li>牛肉が大きい場合はひと口より少し大きめの食べやすいサイズに切る。</li>
  <li>すりおろしたたまねぎと牛肉を混ぜあわせ、塩コショウを振って1時間置く。</li>
  <li>にんじんとにんにく・しょうがをすりおろす。</li>
  <li>以下略</li>
</ol>

<h2>ビーフカレーにおすすめの部位</h2>
<p>ビーフカレーにぴったりな牛肉の部位を紹介します。色々な部位を試して自分好みのビーフカレーを作ってみてください。</p>
<!-- 語句(項目)<dt>と文章<dd>の組み合わせ -->
<dl>
  <dt>バラ肉</dt>
  <dd>赤身と脂身が薄く交互に重なった部位で、煮込んでも固くならず煮崩れないのでカレーと相性が良い。</dd>
  <dt>すね肉</dt>
  <dd>最も運動量が高い部位であるため筋や腱が多く脂肪分は少ない。しかし、じっくりと煮込む事で柔らかく旨味の濃い仕上がりになるため、一手間かけて作る時におすすめの部位。</dd>
  <dt>もも肉</dt>
  <dd>以下略</dd>
</dl>

<h2>よくある質問</h2>
<p>このレシピに関してよく寄せられる質問への回答をまとめました。</p>
<!-- 語句(項目)<dt>と文章<dd>の組み合わせ -->
<dl>
  <dt>牛肉以外のお肉でもおいしく出来ますか?</dt>
  <dd>もちろん!牛肉以外のお肉でもおいしくできます。お好きなお肉を使って自分好みのカレーを作ってみてください。</dd>
  <dt>豚肉で作る時はどのような部位がおすすめですか?</dt>
  <dd>甘い脂身と柔らかい肉質のばら肉や、しっかりとした噛みごたえと脂身の少ないヘルシーなもも肉がおすすめです。</dd>
  <dt>鶏肉で作る時はどのような部位がおすすめですか?</dt>
  <dd>以下略</dd>
</dl>

あとはドキュメントとその文脈に応じてリストを使い分ける事を意識していれば適切なマークアップが出来ると思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/01 23:11

    ありがとうございます。

    dlの方は、dtの説明分がddに来る場合という事でおかげさまでよくわかりました。

    ただ、問答をしているわけではありませんが、
    ulの例は

    <dt>財布の中身</dt>
    <dd>10000円札 2枚</dd>
    <dd>1000円札 3枚</dd>


    と考える事もできてしまうような気がするのですが、どうしてこちらでなくulの方をであると区別すれば良いのでしょうか?


    ちなみに、下記のようにタイトルや見出しの説明となっていない、ただの羅列の場合はdlでない事はもちろんわかります。
    <ul>
    <li>10000円札 2枚</li>
    <li>1000円札 3枚</li>
    <li>500円硬貨 1枚</li>
    <li>100円硬貨 6枚</li>
    <li>ライフカード</li>
    <li>Pontaカード</li>
    <li>TSUTAYAカード</li>
    </ul>

    キャンセル

  • 2015/07/02 00:55 編集

    すべて整理して回答の方にまとめました。

    キャンセル

同じタグがついた質問を見る

  • HTML

    9563questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。