From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/ol/index.html | 224 ++++++++++++++++++++++++++++++++ 1 file changed, 224 insertions(+) create mode 100644 files/ja/web/html/element/ol/index.html (limited to 'files/ja/web/html/element/ol') diff --git a/files/ja/web/html/element/ol/index.html b/files/ja/web/html/element/ol/index.html new file mode 100644 index 0000000000..277a818ff9 --- /dev/null +++ b/files/ja/web/html/element/ol/index.html @@ -0,0 +1,224 @@ +--- +title: '
    : 順序付きリスト要素' +slug: Web/HTML/Element/ol +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Reference +translation_of: Web/HTML/Element/ol +--- +
    {{HTMLRef}}
    + +

    HTML の <ol> 要素は、項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。

    + +
    {{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    コンテンツカテゴリフローコンテンツ。また、<ol> 要素の子に少なくとも 1 個の {{HTMLElement("li")}} 要素を包含する場合は、知覚可能コンテンツ。
    許可されている内容0個以上の {{HTMLElement("li")}}, {{HTMLElement("script")}}, {{HTMLElement("template")}} の各要素。
    タグの省略{{no_tag_omission}}
    許可されている親要素フローコンテンツを受け入れるすべての要素
    Implicit ARIA rolelist
    許可されている ARIA ロール{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}
    DOM インターフェイス{{DOMxRef("HTMLOListElement")}}
    + +

    属性

    + +

    この要素はグローバル属性も受け付けます。

    + +
    +
    {{HTMLAttrDef("reversed")}} {{HTMLVersionInline(5)}}
    +
    論理属性で、リストの項目が逆順で指定されていることを指定します。項目は大きい方から小さい方へ番号付けされます。
    +
    {{HTMLAttrDef("start")}} {{HTMLVersionInline(5)}}
    +
    整数値を持つ属性で、リスト項目の序数の開始値を指定します。この値は、番号付けの種類が文字やローマ数字であっても、常にアラビア数字 (1, 2, 3, など) で指定します。例えば、 "d" の文字や "iv" のローマ数字から始める場合は、 start="4" を使用してください。
    +
    {{HTMLAttrDef("type")}}
    +
    この属性は、番号付けの種類を設定します。 +
      +
    • a は、英小文字を示します
      • +
    • A は、英大文字を示します
      • +
    • i は、小文字のローマ数字を示します
      • +
    • I は、大文字のローマ数字を示します
      • +
    • 1 は、数字を示します (既定値)
      • +
    + +

    指定された種類は、内部の {{HTMLElement("li")}} 要素で異なる {{HTMLAttrxRef("type", "li")}} 属性が使用されない限り、リスト全体に使用されます。

    + +
    +

    注: (法律文書や技術文書の箇条書きなどのように) リスト番号の種類に重要性がない限り、代わりに CSS の {{CSSxRef("list-style-type")}} プロパティを使用してください。

    +
    +
    +
    + +

    使用上の注意

    + +

    ふつう、順序付きリストの項目は、先頭に数字や文字などのマーカーが表示されます。

    + +

    <ol> 要素と {{HTMLElement("ul")}} 要素は、必要なだけ深く入れ子にすることができ、 <ol> と <ul> を好きなだけ変更することもできます。

    + +

    <ol> と {{HTMLElement("ul")}} は、どちらも項目のリストを表します。両者の違いは、 <ol> 要素では順序に意味があることです。例えば次のようなものです。

    + + + +

    どちらのリストを使用するか判断するには、リスト項目の順序を変更してみてください。意味が変わるようであれば <ol> 要素を使用し、そうでない場合は、 {{HTMLElement("ul")}} 要素を使用することができます。

    + +

    例

    + +

    単純な例

    + +
    <ol>
+  <li>Fee</li>
+  <li>Fi</li>
+  <li>Fo</li>
+  <li>Fum</li>
+</ol>
+
    + +

    上記の HTML は次のように出力されます。

    + +

    {{EmbedLiveSample("Simple_example", 400, 100)}}

    + +

    ローマ数字の使用

    + +
    <ol type="i">
+  <li>Introduction</li>
+  <li>List of Greivances</li>
+  <li>Conclusion</li>
+</ol>
    + +

    上記の HTML は次のように出力されます。

    + +

    {{EmbedLiveSample("Using_Roman_Numeral_type", 400, 100)}}

    + +

    start 属性の使用

    + +
    <p>Finishing places of contestants not in the winners’ circle:</p>
+
+<ol start="4">
+  <li>Speedwalk Stu</li>
+  <li>Saunterin’ Sam</li>
+  <li>Slowpoke Rodriguez</li>
+</ol>
+
    + +

    上記の HTML は次のように出力されます。

    + +

    {{EmbedLiveSample("Using_the_start_attribute", 400, 100)}}

    + +

    入れ子のリスト

    + +
    <ol>
+  <li>first item</li>
+  <li>second item  <!-- ここに終了タグ </li> はありません！ -->
+    <ol>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ol>
+  </li>            <!-- 終了タグ </li> はここです -->
+  <li>third item</li>
+</ol>
+
    + +

    上記の HTML は次のように出力されます。

    + +

    {{EmbedLiveSample("Nesting_lists", 400, 150)}}

    + +

    順序付きリストの中の順序なしリスト

    + +
    <ol>
+  <li>first item</li>
+  <li>second item  <!-- ここに終了タグ </li> はありません！ -->
+    <ul>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ul>
+  </li>            <!-- 終了タグ </li> はここです -->
+  <li>third item</li>
+</ol>
+
    + +

    上記の HTML は次のように出力されます。

    + +

    {{EmbedLiveSample("Unordered_list_inside_ordered_list", 400, 150)}}

    + +

    仕様書

    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    仕様書状態備考
    {{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '<ol>')}}{{Spec2('HTML WHATWG')}}最新の W3C スナップショットである {{SpecName('HTML5 W3C')}} から変更なし
    {{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}{{Spec2('HTML5 W3C')}}reversed および start 属性を追加、type の非推奨を解除
    {{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}}{{Spec2('HTML4.01')}}compact および type を非推奨に指定
    + +

    ブラウザーの互換性

    + + + +

    {{Compat("html.elements.ol")}}

    + +

    関連情報

    + + -- cgit v1.2.3-54-g00ecf