* [CODE(HTMLe)[ul]] 要素型 (HTML, XHTML 1) [9] [[HTML]] の [DFN[[CODE(HTMLe)[ul]] [[要素]]]]は、 順序に深い意味の無い[RUBY[[[並び]]] @en[[[リスト]]]]を表します。 [[並び]]の各項目は子 [CODE(HTMLe)[[[li]]]] [[要素]]とします。 [21] 仕様書: - [[HTML 4]] -- [10] :状態:[[W3C]] [[勧告]] :[[名前空間URI]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] :[[局所名]]:[CODE(HTMLe)[ul]] ([Q@en[unordered list]] ([Q[順序付けられていない並び]]) より) :[[開始タグ]]:必須 :[[終了タグ]]:必須 :[[内容模型]]:[CODE(SGML)[([CODE(HTMLe)[[[li]]]])+]] :出現できる文脈:[CODE(SGML)[%[[list]];]] が出現できる文脈 :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,状態 ,出典 ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML4] %[[coreattr]] ,[CODE(HTMLa)[[[compact]]]] ,([[真偽値属性]]) ,(偽) ,小表示 ,[HTML4] 非推奨 ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML4] %[[i18n]] ,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML4] %i18n ,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML1] ,[CODE(HTMLa)[[[onclick]]]] , , , ,[HTML4] %[[events]] ,[CODE(HTMLa)[[[ondblclick]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeydown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeypress]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeyup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmousedown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmousemove]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseout]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseover]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[style]]]] , , ,スタイル情報 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[type]]]] ,[CODE(SGML)[([CODE(HTML)[[[disc]]]] | [CODE(HTML)[[[square]]]] | [CODE(HTML)[[[circle]]]])]] ,(入れ子の深さ依存) ,項目の印の種類 ,[HTML4] 非推奨 [29] '''項目が1個の箇条書き''': [Q@en[リスト]]というと一般的には2個以上の項目が含まれていないといけないような気がすることもありますが、 それがリスト (箇条書き) である (べき) と思うのであれば 1個でも [CODE(HTML)@en[[[ul]]]] や [CODE(HTML)@en[[[ol]]]] を使って構いません [WEAK[(というよりそうするべきです)]]。 [WEAK[([[計算機]]の世界で普通リストといえば項目は0個以上です。 [[HTML 4]] のリストの項目は1個以上ですが、 [[HTML 5]] では0個以上になっています。)]] 例: >>30 [[#comment]] ** レンダリング [11] HTML 4 によると、 [CODE(HTMLe)[ul]] と [CODE(HTMLe)[[[ol]]]] は視覚的 [[UA]] では同じように[[レンダリング]]されます。 ただし、 [CODE(HTMLe)[ol]] は番号付けされませんが、 [CODE(HTMLe)[ul]] は番号付けされません。 というような記述は、仕様書で [Q[must]] を使って書かれているわけではありませんし、すべての場面における強制ではなく、 [[既定スタイル]]の推奨程度と受け止めるべきでしょう。 (そうしないと、 [[CSS]] で [CODE(HTMLe)[ul]] に [SAMP(CSS)[[[list-style-type]]: [VAR[数系]]]] を指定するようなことまで否定されてしまいますが、そのような制限は慣習的に適当とは思えません。) [12] ではいくつかの視覚的 UA での慣習が説明されています。 (こちらは参考と明記されています。) - 入れ子の深さにしたがってレンダリングします。 - [CODE(HTMLa)[type]] 属性をレンダリングのヒントとします。 - [CODE(HTMLa)[type]] 属性の既定値は入れ子の深さに依存します。 - [CODE(HTMLa)[type]] 属性の値とそれに対応する、表示するべき形。 ([CODE(HTLMa)[[[type]]]] 属性の説明を参照。) [17] [CODE(HTMLa)[[[type]]]] 属性や [CODE(HTMLa)[[[compact]]]] 属性の説明も参照。 [[#comment]] ** 歴史 [33] [CODE(HTMLe)@en[[[ul]]]] は [[HTML]] のかなりはじめの頃から (おそらくは最初から) 存在していた[[要素型]]です。 [CODE(HTMLe)@en[[[ul]]]], [CODE(HTMLe)@en[[[ol]]]], [CODE(HTMLe)@en[[[li]]]] を使った[[リスト]]の[[マーク付け]]の[[モデル]]は [[SGML応用]]でよく採用されているもので、 [[HTML]] でもそれを流用しています。 [CODE(HTMLe)@en[[[ol]]]] も同時に [[HTML]] の仕様に採り入れられましたが、 [[Webブラウザ]]の側では長く未実装のままで、 専ら [CODE(HTMLe)@en[[[ul]]]] が用いられてきました。 [[#comment]] ** 不思議解釈 [22] [CODE(HTMLe)[[[ul]]]] 要素の[[子供]]には [CODE(HTMLe)[[[li]]]] 要素しか記述できません。 しかし、古い時代の[[利用者エージェント]]は [CODE(HTMLe)[[[ul]]]] 要素内では[[字下げ]]し (左右の[[余白]]を多めに取り)、 [CODE(HTMLe)[[[li]]]] 要素の[[開始タグ]]のところでリスト記号を[[レンダリング]]するという方法を採っていたので、 [Q[[CODE(HTMLe)[[[ul]]]] [[タグ]]を使うと[[字下げ]]ができる]] と勘違いする人が出てきました。自分が勝手に勘違いするだけならまだしも、 人に教える人や本や雑誌に書く人、[Q[裏技]]といってはしゃぐ人、 果ては[[字下げ]]のために [CODE(HTMLe)[[[ul]]]] や [CODE(HTMLe)[[[ol]]]] を積極的に使うべき [WEAK[(文章全体を囲むとか。そうすれば[Q[読みやすくなる]])]] など電波がかった主張をする人まで出てくる始末でした。 というのは1990年代後半の話で、 [[CSS]] が普及した昨今では流石にここまで逝った主張は見なくなりました。 [CODE(HTMLe)[[[blockquote]]]] で[[字下げ]]する人は今でも稀に見かけますがね。 (2005年) [[#comment]] ** 関連 [23] '''[CODE(HTMLe)[ul]] と [CODE(HTMLe)[ol]]''': [CODE(HTMLe)[ul]] ([Q@en[unordered list]] : 順序付けられていない並び) と同じように[[リスト]]を表す [[HTML]] の[[要素型]]に [CODE(HTMLe)[[[ol]]]] ([Q@en[ordered list]] : 順序付けられた並び) があります。 項目の順序に重要な意味がある場合は、 [CODE(HTMLe)[[[ol]]]] を使います。例えば、 [[料理]]の[[調理法]]は最初の項目から順に行っていく必要があります。 ですから、 [CODE(HTMLe)[[[ol]]]] を使います。 項目の順序が然程重要ではない場合は、 [CODE(HTMLe)[[[ul]]]] を使います。例えば [[HTML]] の[[要素型]]の一覧は、 どの要素型を先に示すかに特別な意味はありません。 [CODE(HTMLe)[[[p]]]] を先に紹介しても、 [CODE(HTMLe)[[[ul]]]] を先に紹介しても、本質的な違いはありません。 [WEAK[(入門書における要素型の説明の話ではありませんよ。)]] [24] たとえ順序に深い意味が無くても、 項目の前の印として番号を付けたいことはよくあります。 そのような時でも、 [[HTML]] の[[要素型]]としては [CODE(HTMLe)[[[ol]]]] を使います。番号をつけて[[レンダリング]]することは、 [[CSS]] の [CODE(CSS)[[[list-style-type]]]] [[特性]]によって記述できます。 [25] '''項目を無作為に入れ替えても良い??''': たまに、 [CODE(HTMLe)[ul]] は [Q[無作為に順序を入れ替えても問題が無いようなリスト]] と紹介されることがあります。が、これを余り鵜呑みにしてはいけません。例えば、 [PRE(HTML example code)[

HTML の要素型には次のようなものがあります。

1つ目の p は、段落を表します。 2つ目の ul は、順序無しの並びを表します。 最後の ol は、順序ありの並びを表します。

]PRE] の [CODE(HTMLe)[ul]] は、 [Q[無作為に順序を入れ替え]]ると最後の段落と矛盾してしまいます。でも、 このリストの3つの項目の並び順にはそんなに意味がある [WEAK[([CODE(HTMLe)@en[[[ol]]]] にするべきな)]] のでしょうか? 実際の文章ではこの例文のようにリストに掲げた並び順が前後の文章に影響してくることが少なくありません。 影響があるから [CODE(HTMLe)[ol]] にしなければならないということはなく、 [CODE(HTMLe)[ul]] か [CODE(HTMLe)[ol]] かの選択は本質的にそのリストが順序付けられるべきかどうかを考慮して行うべきものです。 [Q[無作為に順序を入れ替え]]てみるのは迷った時の判断基準として悪くはありませんが、 言葉どおりに受取って本質を見失ってはいけません。 [31] ''メモ'': 前後の文脈で[Q[1つ目]]のような参照をするのがよくないのだ、 そういう文章は [[HTML]] には適さない、という意見があります。 確かに、 [[SGML]] で一般に行われている方法を採るなら [PRE(SGML example code)[

HTML の要素型には次のようなものがあります。

の p は、段落を表します。 の ul は、順序無しの並びを表します。 の ol は、順序ありの並びを表します。

]PRE] とでもするべきでしょう。 [CODE(SGMLe)@en[ref]] [[要素]]の[[内容]]は[[利用エージェント]]が参照先と文脈から適当に生成します。 しかし歴史的に [[HTML]] はこのような形の参照と生成を使っておらず、 こちらの方が余程 [[HTML]] にはなじみません。 [26] '''[CODE(HTMLe)[ul]] と [CODE(HTMLe)[dl]]''': リストが単純な一次元的な並びではなく、 見出しと説明の組の並びのようなものの時は、 [CODE(HTMLe)[ul]] ではなく [CODE(HTMLe)[[[dl]]]] を使います。 例えば用語集は用語と説明の組が並んだものですから、 [CODE(HTMLe)[[[dl]]]] を使います。 [27] '''[CODE(HTMLe)[ul]] と [CODE(HTMLe)[menu]] と [CODE(HTMLe)[dir]]''': 古い時代の [[HTML]] には [CODE(HTMLe)[ul]] の他に [CODE(HTMLe)[[[menu]]]] と [CODE(HTMLe)[[[dir]]]] がありました。3者は意味的にはほぼ同じで、 項目の長さとそれに合わせたレンダリング方法に違いがありました。 しかし、 [CODE(HTMLe)[[[menu]]]] と [CODE(HTMLe)[[[dir]]]] は [CODE(HTMLe)[ul]] に吸収され、使わないことになっています。 [28] '''[CODE(XMLe)[rdf:Bag]]''': [[RDF]] の[[語彙]]である [CODE(XMLe)[rdf:[[Bag]]]] は、 [CODE(HTMLe)[ul]] と同じように [Q[順序を持たない並び]]という意味を持っています。 [[#comment]] *** HTML のリスト系要素型の使い分け [DEL[ - [1] [CODE(HTML)[UL]] と [[ol]] の使い分け: ''Strict-HTML スレッド10'' - [2] リスト系要素の使い分けは古今東西問わず頻出問題ですね。 - [3] [[HTML]] にはリスト系要素が [CODE(HTML)[UL]], [CODE(HTML)[OL]], [[dl]], [[nl]], [[dir]], [[menu]] と沢山ありますからねぇ。 - [4] [[某方面]]では[[100の質問]]のマーク付けのときにも問題になってます。 - [5] [[Strict]] 的思想にはなじまないかもしれませんが、そもそもの SGML/HTML の初期の [CODE[UL]]/[CODE[OL]] の使い分けというのは、番号を振るかどうかだった。 [CODE[OL]] はあくまでも、自動で番号を振ってくれる機能つきのリストだったのですよ。 - [6] >>5 今の Strict は文書の構造をとことん突き詰める方へ向かっていますけど、当時は当時の時代的制約で、そんなのは夢のまた夢、あるいは夢にも思われていなかったんですよね。だから、 SGML 文書のマーク付けってのはあくまでも、表示書式の抽象化のためのものであったのでして。 [WEAK[(もちろん今は必ずしもそうではない。)]] - [7] [[並び]] ([[列挙]]) はなんでも [CODE(HTML)[ul]] or [CODE(HTML)[ol]] でマークしたがる香具師が多いけど、 HTML における重要な概念、 [[ブロック要素]]と[[インライン要素]]の違いを思い出すべきだよな。 [CODE(HTML)[ul]] も [CODE(HTML)[ol]] もブロック水準の並びであって、[SAMP[A, B, そして C のような種類がある]]とかのような文中の列挙までそうするのは生きすぎだし、ナビゲーションのリンク並びも (無理矢理分類して) インライン水準なら [CODE(HTML)[ul]] は不適切だと思う。 - [8] >>7 [[表現と構造の分離]]思想の行き過ぎで、ブロック/行内という区別自体が表現的構成要素だと考えてしまう人もいるみたいだけど、そうじゃなくて、[[文]]あるいは[[行]]という水準の上がブロック、下が行内という、構造の大きさの概念と理解できるのでして。 [18] 90年代中頃の糞解説書には、リスト要素は余り使われなくなってきていて、確かに余り融通が効かないし、敢えて必要もないよね、みたいなことを書いてあるものまでありました。その主たる根拠は marker の自由度が低いこと。 悔しいけど当時の状況は糞本著者の言う通りで、丁度マーク放棄、自分のブラウザで表示できればそれでよしの風潮が高まっていった時期ですし、当時のブラウザで list marker は [CODE(HTMLa)[type]] 属性で指定できる分しか選択肢がなかったです。 ([[HTML 3.0]] には [CODE(HTMLe)[[[li]]]] 要素に [CODE(HTMLa)[[[src]]]] 属性 (いまでいうところの [[CSS]] の [SAMP(CSS)[[[list-style]]: url([VAR[foo]])]]) があったけど、実装はほとんどなかったしなあ。) 当時の [[WYSIWYG]] な[[著述ソフトウェア]]の中には、 list marker の画像を [CODE(HTMLe)[[[table]]]] で実現しているものもあったっけ (もちろん、利用者には他の list marker と同列に見せて、実は)。 需要は高まる一方なのに標準化も実装も追い付かないというか違う方向にすすんでいるというか、 ある意味誰にとっても不幸な時代だったような気がします。 ]DEL] ** 例 [13] [PRE(HTML)[
  • Unordered information.
  • Ordered information.
  • Definitions.
]PRE] (HTML 4 仕様書より) [14] [PRE(HTML)[

現在インターネットでもっともよく使われているサービスは次のものだろう。

  • WWW
  • 電子メイル
  • P2P
]PRE] [15] 入れ子の例: [PRE(HTML)[

主要なマーク付け言語:

  • XML
    • XHTML
    • MathML
    • SVG
    • SMIL
    • DocBook (XML)
  • SGML
    • HTML
    • DocBook
    • TEI
  • TeX
    • LaTeX
    • Texinfo

    TeX はマーク付け言語的な側面もプログラム言語的側面もある。

  • Wiki 系
    • 本家 WikiWikiWeb
    • YukiWiki
    • Tiki
    • Pukiwiki
]PRE] [19] [[目次]]の例 [PRE(HTML example)[ <[CODE(HTMLe)[[[div]]]] [CODE(HTMLa)[[[class]]]]="subtoc"> <[CODE(HTMLe)[[[p]]]]><[CODE(HTMLe)[[[strong]]]]>Contents <[CODE(HTMLe)[[[ul]]]] [CODE(HTMLa)[[[class]]]]="toc"> <[CODE(HTMLe)[[[li]]]] [CODE(HTMLa)[[[class]]]]="tocline">4.1. <[CODE(HTMLe)[[[a]]]] [CODE(HTMLa)[[[href]]]]="[CODE(URI)[#sec_4.1.]]" [CODE(HTMLa)[[[class]]]]="tocxref">Syntactic Conventions <[CODE(HTMLe)[[[li]]]] [CODE(HTMLa)[[[class]]]]="tocline">4.2. <[CODE(HTMLe)[[[a]]]] [CODE(HTMLa)[[[href]]]]="[CODE(URI)[#s_common_types]]" [CODE(HTMLa)[[[class]]]]="tocxref">Content Types <[CODE(HTMLe)[[[li]]]] [CODE(HTMLa)[[[class]]]]="tocline">4.3. <[CODE(HTMLe)[[[a]]]] [CODE(HTMLa)[[[href]]]]="[CODE(URI)[#s_common_attrtypes]]" [CODE(HTMLa)[[[class]]]]="tocxref">Attribute Types <[CODE(HTMLe)[[[li]]]] [CODE(HTMLa)[[[class]]]]="tocline">4.4. <[CODE(HTMLe)[[[a]]]] [CODE(HTMLa)[[[href]]]]="[CODE(URI)[#sec_4.4.]]" [CODE(HTMLa)[[[class]]]]="tocxref">An Example Abstract Module Definition <[CODE(HTMLe)[[[ul]]]] [CODE(HTMLa)[[[class]]]]="toc"> <[CODE(HTMLe)[[[li]]]] [CODE(HTMLa)[[[class]]]]="tocline">4.4.1. <[CODE(HTMLe)[[[a]]]] [CODE(HTMLa)[[[href]]]]="[CODE(URI)[#sec_4.4.1.]]" [CODE(HTMLa)[[[class]]]]="tocxref">XHTML Skiing Module ]PRE] 出典: [CITE[Modularization of XHTML - Defining Abstract Modules]] [20] [[Webサイト]]の案内の例 [PRE(HTML example)[ <[CODE(HTMLe)[[[ul]]]] [CODE(HTMLa)[[[class]]]]="navigation"> <[CODE(HTMLe)[[[li]]]] [CODE(HTMLa)[[[class]]]]="this"><[CODE(HTMLe)[[[strong]]]]>Home <[CODE(HTMLe)[[[li]]]]><[CODE(HTMLe)[[[a]]]] [CODE(HTMLa)[[[href]]]]="[CODE(URI)[/news/]]">News <[CODE(HTMLe)[[[li]]]]><[CODE(HTMLe)[[[a]]]] [CODE(HTMLa)[[[href]]]]="[CODE(URI)[/demos/]]">Demos <[CODE(HTMLe)[[[li]]]]><[CODE(HTMLe)[[[a]]]] [CODE(HTMLa)[[[href]]]]="[CODE(URI)[/specs/]]">Specifications <[CODE(HTMLe)[[[li]]]]><[CODE(HTMLe)[[[a]]]] [CODE(HTMLa)[[[href]]]]="[CODE(URI)[/charter]]">Charter <[CODE(HTMLe)[[[li]]]]><[CODE(HTMLe)[[[a]]]] [CODE(HTMLa)[[[href]]]]="[CODE(URI)[/mailing-list]]">Mailing List ]PRE] 出典: [CITE[Web Hypertext Application Technology Working Group]] (2005年1月付け) [[Webサイト]]内の主要な[[頁]]への[[リンク集]]で、 リンク先の各[[頁]]にも同様な [CODE(HTMLe)[[[ul]]]] 要素が含まれています。 別途指定されている [[CSS]] と[[画像]]により、[[視覚UA]] では [[GUI]] でよく使われる[[タブ]]のような見た目で横並びに表示されます。 [16] [CODE(HTMLe)[[[ol]]]] 要素, [CODE(HTMLe)[[[dl]]]] 要素, [CODE(HTMLe)[[[li]]]] 要素, [CODE(HTMLa)[[[type]]]] 属性, [CODE(HTMLa)[[[compact]]]] 属性の例も参照。 [30] '''項目が1個の箇条書き''': [PRE(HTML example code)[

A コースの人は、次のものを用意してください。

  • 水筒
  • ホース

B コースの人は、次のものを用意してください。

  • 洗濯ばさみ (5ヶ)
]PRE] 解説: >>29 ([[名無しさん]] [sage]) [[#comment]] ** メモ [[#comment]] * メモ [34] [CITE@en[Re: ''''''[''''''css3-lists'''''']'''''' padding-left on
    and
      elements]] ( ([[Gérard Talbot]] 著, [TIME[2014-02-22 23:09:24 +09:00]] 版))