SYNCERのロゴ
アイキャッチ画像

ol要素の番号を変更する方法

ol要素でリストを作る時、例えば番号を逆順にしたり、途中の番号を飛ばしたい場合があります。reversed属性、value属性を利用しましょう。

サンプルコード

逆順

番号を逆順にするには、reversed属性を付けましょう。

<ol reversed>
	<li>フォーンブース (2003)</li>
	<li>レオン (1994)</li>
	<li>フェイスオフ (1997)</li>
</ol>

変更

番号を変更するには、li要素のvalue属性に値を指定しましょう。その要素だけでなく、以降の要素にも影響する点に注意して下さい。例えば次の場合、1から100に飛び、その次は101になります。

<ol>
	<li>フォーンブース (2003)</li>
	<li value="100">レオン (1994)</li>
	<li>フェイスオフ (1997)</li>
</ol>

デモ

リストの番号を変更するデモです。

<!-- このコードは編集できます。 -->

<p>好きな映画をカウントダウン形式で発表します!</p>
<ol reversed>
	<li>フォーンブース (2003)</li>
	<li>レオン (1994)</li>
	<li>フェイスオフ (1997)</li>
</ol>

<p>木曜日から番号が飛びます。</p>
<ol>
	<li>月</li>
	<li>火</li>
	<li>水</li>
	<li value="100">木</li>
	<li>金</li>
	<li>土</li>
	<li>日</li>
</ol>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月14日 (木)
コンテンツを公開しました。