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>
関連記事
- ソースコードの改行を表示に反映する方法
- ソースコードの改行を表示でも反映したい場合は、pre要素を利用します。
- 安全に外部サイトにリンクする方法
- 100%、信用のできない外部サイトにリンクをする時は、rel属性にnoopenerを指定しておきましょう。
- 電話番号にリンクが自動で付くのを防ぐ方法
- スマホで電話番号に自動でリンクが付くのを防ぎます。
- 数値の入力フォームを作る方法
- ユーザーが数値を入力しやすいフォームを作成します。
- iOSで入力フォームでズームするのを防ぐ方法
- iOSで入力フォームにフォーカスした時、自動でズームアップするのを防ぐには、フォントサイズを16px以上に設定します。
- 別ウィンドウでリンクを開く方法
- リンクを新しいウィンドウで開きます。