125naroom / デザインするところ(会社)です。

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

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

start属性を使ってみる

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

See the Pen
【HTML】コメントアウトしたいけど、すでにコメントアウトが中にあるときのコメントアウト方法(頑張ってコメントアウトするなら)
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』の順番を途中から始める方法(start属性を使ってみる)
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;
}

さいごに

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

関連記事

【CSS】注釈(※、*1)を記載するときのインデント合わせ(頭合わせ)

【CSS】counter-incrementを使って擬似要素をリスト化する

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

信州アップルパイ研究所_Q
ちょっと思い出しただけ
【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える