【HTML】リスト『ol』の順番を途中から始める方法(順番を逆にもできる)

【HTML】リスト『ol』の順番を途中から始める方法(順番を逆にもできる)
きのこさん
リストなんですが、3番目から始めるとかってできますか?
きのこさん
できますよー。start属性を使うのが一番簡単ですねー

start属性を使ってみる

これが一番簡単ですね、
『ol』にstart属性をつけて数字を指定するだけです。

See the Pen 【HTML】リスト『ol』の順番を途中から始める方法(start属性を使ってみる) by 125naroom (@125naroom) on CodePen.

HTML

<ol start="3">
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

value属性を使ってみる

value属性は、『li』に使うことができます。

See the Pen 【HTML】リスト『ol』の順番を途中から始める方法(value属性を使ってみる) by 125naroom (@125naroom) on CodePen.

HTML

<ol>
  <li value="3">テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>
 
<ol>
  <li>テキスト</li>
  <li>テキスト</li>
  <li value="7">テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>
 
<ol>
  <li value="3">テキスト</li>
  <li value="7">テキスト</li>
  <li value="9">テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

reversed属性で順番を逆に並べる

『ol』にreversed属性を使うと順番を逆にすることができます。

See the Pen 【HTML】リスト『ol』の順番を途中から始める方法(reversed属性で順番を逆に並べる) by 125naroom (@125naroom) on CodePen.

HTML

<ol reversed>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>
 
<ol reversed start="9">
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>
 
<ol reversed>
  <li value="3">テキスト</li>
  <li value="5">テキスト</li>
  <li value="7">テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

CSSでもできたりする

うーん、CSSを使うといろいろ手間ですねー。olのcounter-reset: itemに1を引いた値を入れます。3番から始めたい時は2を入れます。で、liはブロック要素にしてインデントの調整。いやー、大変ですがCSSでコントロールすることはできますねー。どんな時に使うのでしょうか。。まだ使ったことはないのですが備忘録ということで。

See the Pen 【HTML】リスト『ol』の順番を途中から始める方法(CSSでもできたりする) by 125naroom (@125naroom) on CodePen.

HTML

<ol class="totyuu">
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>うーん、CSSを使うといろいろ手間ですねー。olのcounter-reset: itemに1を引いた値を入れます。3番から始めたい時は2を入れます。で、liはブロック要素にしてインデントの調整。いやー、大変ですがCSSでコントロールすることはできますねー。どんな時に使うのでしょうか。。まだ使ったことはないのですが備忘録ということで。</li>
  <li>テキスト</li>
</ol>

CSS

ol.totyuu {
  counter-reset: item 2;
  padding-left: 0;
}
ol.totyuu li {
  display: block;
  text-indent: -1.2em;
  padding-left: 1.2em;
}
ol.totyuu li:before {
  content: counter(item) ". ";
  counter-increment: item;
}

さいごに

きのこさん
すごーい
きのこさん
さ、ドーナツ食べましょー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

3

/

19

2024

Googleさんの
おすすめ

3

/

19

2024

デザインの記事

HAKUTAI WEDDING
増量計画
【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える