web-dev-qa-db-ja.com

順序付きリストの開始番号を指定することはできますか？

最初の番号を6にする順序付きリストがあります。これは、HTML 4.01では supported （現在は非推奨）であることがわかりました。この仕様では、CSSを使用して開始整数を指定できると述べています。 （start属性の代わりに）

CSSで開始番号をどのように指定しますか？

htmlcsshtml-lists
108
vrish88

特定の時点で順序付きリスト（OL）を開始する機能が必要な場合は、DoctypeをHTML 5として指定する必要があります。これは：

<!doctype html>

そのDoctypeでは、順序付きリストにstart属性を設定することが有効です。といった：

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>
137
Travis

<ol start="">は HTML5 で非推奨ではなくなったため、HTML4.01の内容に関係なく、使用し続けるだけです。

64
Ms2ger

start="number"は、その前の番号付けに基づいて自動的に変更されないため、ひどいです。

より複雑なニーズに対応できる別の方法は、counter-resetとcounter-incrementを使用することです。

問題

次のようなものが必要だとしましょう：

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

2番目のliの3番目のolにstart="3"を設定できますが、最初のolにアイテムを追加するたびに変更する必要があります

ソリューション

最初に、現在の番号付けのフォーマットをクリアしましょう。

ol {
  list-style: none;
}

各リーにカウンターを表示させます

ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

ここで、各カウンタではなく、最初のolでのみカウンタをリセットする必要があります。

ol:first-of-type {
  counter-reset: mycounter;
}

デモ

http://codepen.io/ajkochanowicz/pen/mJeNwY

これで、どちらかのリストにできるだけ多くの項目を追加でき、番号付けは保持されます。

1. Item one
2. Item two
...
n. Item n

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...
28
Adam Grant

このスレッドで答えが見つからなかったことに驚いています。

このソース を見つけました。これを以下に要約します。

HTMLの代わりにCSSを使用して順序付きリストの開始属性を設定するには、counter-incrementプロパティは次のとおりです。

ol {
  list-style: none;
  counter-increment: start 3;
  }
li:before {
  content: counter(start, lower-alpha) ") ";
  counter-increment: start;
  }

counter-incrementは0からインデックス付けされているようです。4から始まるリストを取得するには、3。

次のHTML

<ol>
  <li>Buy milk</li>
  <li>Feed the dog</li>
  <li>Drink coffee</li>
</ol>

私の結果は

d) Buy milk
e) Feed the dog
f) Drink coffee

私の fiddle をチェックしてください

W3 wikiリファレンス も参照してください

9
hcmcf

他の人が示唆したように、start要素のol属性を使用できます。

または、value要素のli属性を使用できます。両方の属性は HTML 4.01 では非推奨としてマークされていますが、HTML 5ではそうではありません（ ol および li ）。

<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>
8
Andrey

リストがネストされている場合、ネストされたリストアイテムを除外する処理が必要です。これは、グランドペアレントがリストアイテムではないことを確認することで実現しました。

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
  if (list[i].parentElement.parentElement.nodeName!="LI") {
    cnt += 1;
    list[i].setAttribute("value",cnt);
  }
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>
0
LoonyNoob

CSSでは、ネストされたリストアイテムがある場合に対応するのは少し難しいため、最初のリストレベルのみが、新しい順序付きリストごとに中断しないカスタムの番号付けを取得します。 CSSコンビネータ '>'を使用して、カスタムナンバリングを取得するリストアイテムへの可能なパスを定義しています。 https://www.w3schools.com/css/css_combinators.asp を参照してください

body {
  counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
  list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
  counter-increment: li_cnt;
  content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
  list-style-type: decimal;
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>
0
LoonyNoob

デフォルト値（ "1"）とは異なる番号から順序付きリストの番号付けを開始するには、start属性が必要です。この属性は HTML 4.01仕様 （この質問が投稿された時点ではまだHTML 4.01は「置き換えられた仕様」ではなかった）で許可され（非推奨ではありません）、現在の HTML 5.2仕様 。 ol要素には、 XHTML 1.0の移行DTD にオプションのstart属性もありましたが、 XHTML 1.0の厳密なDTD （文字列ATTLIST olを検索し、属性リストを確認してください）。したがって、いくつかの古いコメントにあるように、start属性はdeprecatedではありませんでした。むしろ、HTML 4.01およびXHTML 1.0の厳密なDTDではinvalidでした。コメントの1つが主張していることにもかかわらず、start属性はul要素で許可されておらず、現在FirefoxおよびChromiumでは機能しません。

また、千単位の区切り記号は機能しません（FirefoxとChromiumの現在のバージョンでは）。次のコードスニペットでは、10.000は10として解釈されます。同じことが10,000にも当てはまります。したがって、次のタイプのcounter値を使用しないでください。

<ol start="10.000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

したがって、使用する必要があるのは次のとおりです（まれに、1000を超える値が必要な場合があります）。

<ol start="10000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

他の回答のいくつかは、CSSプロパティcounterの使用を提案していますが、これは、コンテンツとレイアウトの従来の分離（それぞれHTMLとCSS）に反します。特定の視覚障害を持つユーザーは、独自のスタイルシートを使用でき、その結果、counter値が失われる可能性があります。 counterのスクリーンリーダーのサポートもテストする必要があります。 CSSのコンテンツに対するスクリーンリーダーのサポートは比較的最近の機能であり、動作に必ずしも一貫性はありません。 スクリーンリーダーとCSS：スタイルから（およびコンテンツ）に移行していますか？ WebAIMブログ（2017年8月）のJohn Northupによる。

0
Christophe Strobbe