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

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

ただいまの
回答率

90.51%

  • JavaScript

    20383questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2626questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

何故「ol」は最新記事に使われないのか

解決済

回答 5

投稿

  • 評価
  • クリップ 3
  • VIEW 940

megu9859

score 8

HTMLについて質問です。

ときどき、ウェブサイトの最新記事一覧を「ul」で組むべきか「dl」で組むべきかという議題が発生しますよね。後者はごくごく少数派な印象ですが‥‥
しかしそこでいつも疑問なのが、何故「ol」だけは検討対象に含まれないのでしょう? 例えば、トップページに最新記事5件の一覧があったとして、それは明らかに上から下へ新しい「順番」の序列ですよね。

現に、下記URLのようにolでマークアップされている方も存在します。
https://gray-code.com/html_css/markup-to-date-and-time/amp
「数字を消しているならolの意味がない」と主張されている方もいますが、そのような制約は仕様に記述がありません。

※個人的に、最新記事一覧では「ul」か「ol」かで迷うところです。結局「ol」を採用しているケースを1度も見たことがないため、何だかんだでいつも「ul」を採用してしまっています。

アドヴァイスをいただければ幸いです。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 5

checkベストアンサー

+8

ul要素

ul要素の ul は Unordered List の略で、順不同リストとも言われています。この名前の通り、この要素は項目の順序が重要ではなく、もしも順序を変更しても意味が変化することのないリストに使用します。 

ol要素

ol要素の ol は Ordered List の略で、順序付きリストとも言われています。この名前の通り、項目の順序が重要で、もしも順序が変更されてしまった場合文書としての意味が変化してしまうリストに使用します。 

dl要素

dl要素の dl は Description List の略で、説明リストとも言われています。この名前の通り、項目とそれに対する説明を列挙したい場合に使用します。

最新記事の一覧にはどのリスト要素を使うべきか

結論としては、ol要素を使うべきだと思います。

ul要素 vs ol要素

CSS を使用することで、ul要素をol要素のように見せることが出来ますが、それはあくまでも見た目を変更したに過ぎないので、文書の意味としては順序付けられていないリストとなってしまいます。もしもリスト項目の順序を変えたときにリスト全体の意味が変わってしまうのであれば、ol要素を使うようにするべきです。最新記事のリストは、記事の順番が前後することで意味が変化してしまうため、ol要素を使用することが適切だと思います。

ol要素 vs dl要素

dl要素は項目と説明の対応付けを行うことで、各日付に対する説明として最新記事の情報を記述することが出来ます。しかし、dl要素では順序を明確にすることが出来ません。そのため、項目の順序が重要である最新記事の一覧では、dl要素よりもol要素の方が適切だと思います。

もし単なる一覧で、順序が重要ではない場合は、dl要素を使うほうが良い場合もあると思います。ただし、dl要素は、同一リスト内に同じ項目が存在するべきではないため、リスト構造的に項目が重複してしまう場合、dl要素は不適切です。

The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements, possibly as children of a div element child) followed by one or more values (dd elements, possibly as children of a div element child), ignoring any nodes other than dt and dd element children, and dt and dd elements that are children of div element children. Within a single dl element, there should not be more than one dt element for each name.

参考: HTML Standard - 4.4.9 The dl element

なぜul要素が使われるのか

Web 上にある多くのナビゲーションでは、項目の順序が重要ではないことがほとんどなので、ul要素がよく使われます。このような背景から「最新記事のリストも一覧だし、とりあえずul要素で作ろう」ということになり、ul要素が使われるようになったのではないかと思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/04/13 23:50 編集

    回答文では、「どのリスト要素を使うことが好ましいか」を書きましたが、すべてのリストをリスト要素でマークアップする必要はありません。一覧の内容や構造によっては、リスト要素よりも好ましい手段が存在する場合があります。

    キャンセル

  • 2019/04/20 15:04

    ご回答いただきまして誠にありがとうございます。最も説得力があり、迷いが消えました。
    ※ご連絡が遅れまして申し訳ございません。

    キャンセル

+1

ol要素

ol要素は、順序を変更することが文書の意味を変更するような、意図的に順序づけられた項目のリストを表す。

...(中略)...

リストの順序を変更すると、どのように文書の意味が変化するかに注意する。次の例は、最初の2つの項目にある相対順序を変更することで、著者の故郷を変更している:

序列を定義する

現に、下記URLのようにolでマークアップされている方も存在します。
https://gray-code.com/html_css/markup-to-date-and-time/amp
「数字を消しているならolの意味がない」と主張されている方もいますが、そのような制約は仕様に記述がありません。

それは論理構造を認識する上での「考え方」の一部であって仕様ではありません。
ol要素は序列を定義するわけですが、それはすなわち順序に意味があるという事であり、序列Noとしての「1. -> 2. -> 3.」が表出しても、論理構造上、問題ない必要があります。
(序列があるのですから、序列Noが表出して論理構造上、破綻するのはおかしいでしょう)

<ol>
  <li>記事A</li>
  <li>記事B</li>
  <li>記事C</li>
</ol>

例えば、上記HTMLにおいて、次の全てを満たせるようなマークアップになっていますか。

  • リストマーカーが出現したとしても、それは序列を表す数字として自然な表示である
  • 最初の記事Aは最古の記事であり、最新の記事ではない(なぜなら、初めに最新の記事がある場合、最新記事が追加される度に序列が変化してしまい、記事の管理上、好ましくない)
  • 記事の順序を逆順ソートした場合、リストマーカーである序列Noは記事に追従し、ナンバリングし直さない動作が正しい

teratailのように、記事Noとして、「1. -> 2. -> 3.」を定義しているのなら有とは思うのですが、ほとんどの場合はそういう管理の仕方にはなっていないので、article要素でマークアップするのが妥当なケースが多いように私は思います。
本記事を例にとるなら、次のようにマークアップする事は可能です。

<ol>
  <li value="184261"><a href="https://teratail.com/questions/184261">JavaScript - 何故「ol」は最新記事に使われないのか|teratail</a></li>
</ol>

ol要素を親に持つli要素は、value属性によって序列Noを指定することが出来ます。

Re: megu9859 さん

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/04/20 15:07 編集

    ご回答いただきまして誠にありがとうございます。
    >序列Noが表出して論理構造上、破綻するのはおかしい
    確かに‥‥と感じたものの、<ol>は、序列Noが表出しないパンくずリストでも多用される部分なので「正解はどうなのだろう?」と迷いが生じました。
    ※ご連絡が遅れまして申し訳ございません。

    キャンセル

0

結論どう解釈させるかによって使い分けになるかと思いますが、ほとんどの場合最新記事一覧でもそれぞれの記事コンテンツを並列な扱いにさせたいためulを使ってる場合が多いと思います。それぞれ記事は独立したコンテンツですからね。
どちらかというとolは関連性のあるコンテンツの順番を明確化させたい時に使うイメージです。
例えば、ランキング、パンくずリスト、順をおった説明文、何かのフローなどですかね。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/04/20 15:11

    ご回答いただきまして誠にありがとうございます。今後の参考のひとつになりました。
    ※ご連絡が遅れまして申し訳ございません。

    キャンセル

0

何故「ol」だけは検討対象に含まれないのでしょう?

デザイン(表現)に番号が不要な場合が多いだけでは?
必要な場合は「ol」を使いますし、「含まれない」訳ではありません。

※「Javascript」タグは関係ないと思われます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/04/14 13:13

    なぜ故に、私だけでなく、全ての回答に「低評価」が押されているのでしょうか?
    せめて、間違い部分の指摘コメントは欲しいなと、個人的に思います。
    (^^;)

    キャンセル

  • 2019/04/20 15:10

    ご回答いただきまして誠にありがとうございます。無関係なタグを含めてしまいました。ご指摘ありがとうございます。
    ※ご連絡が遅れまして申し訳ございません。

    キャンセル

0

例えば以下のようなサイトがあったとします。

〜 新着記事 〜
猫の飼い方 (4/13)
猫は可愛い (4/10)
猫だーいすき (4/7)

この3つの記事は新着順で上から1,2,3と番号を付けられますがあくまでも並列的な関係です。
(個人的にはこういう時はolの方がいいなーとか勝手に思ってますが明確な区分けわけがないので...)
まぁそれでも「新着なんだからolでもいいだろ!」と言われたりするのでようは好みの問題では?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/04/20 15:09

    ご回答いただきまして誠にありがとうございます。好みの問題、というのも参考になりました。
    ※ご連絡が遅れまして申し訳ございません。

    キャンセル

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

  • JavaScript

    20383questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2626questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。