ol li 序列リスト コピペで使えるHTML+CSS

2021.01.05
スポンサーリンク
スポンサーリンク

ol,li要素の概要

順番付けの序列リストHTML
<ol><li>～</li>…<li>～</li></ol>
目的 作業手順やランキングなど、順番のあるものなど
関連 <ul> <li> <dl> <dt> <dd>
  1. WordPressのログイン画面にアクセスしてください。
  2. IDとワスワードを入力してください。
  3. 表示されている文字を入力してください。
  4. ログインをクリックします。
 
<ol>
    <li>WordPressのログイン画面にアクセスしてください。</li>
    <li>IDとワスワードを入力してください。</li>
    <li>表示されている文字を入力してください。</li>
    <li>ログインをクリックします。</li>
</ol>

属性

ol要素の属性

reversed

順序を逆順、つまり降順にする

<ol reversed>
    <li>WordPressのログイン画～</li>
    <li>IDとワスワードを入力し～</li>
    <li>表示されている文字を入～</li>
    <li>ログインをクリックしま～</li>
</ol>
  1. WordPressのログイン画～
  2. IDとワスワードを入力し～
  3. 表示されている文字を入～
  4. ログインをクリックしま～
start

開始番号を指定する

<ol start="3">
    <li>WordPressのログイン画～</li>
    <li>IDとワスワードを入力し～</li>
    <li>表示されている文字を入～</li>
    <li>ログインをクリックしま～</li>
</ol>
  1. WordPressのログイン画～
  2. IDとワスワードを入力し～
  3. 表示されている文字を入～
  4. ログインをクリックしま～
type

序列番号の形式を指定する

<ol type="1">
    <li>WordPressのログイン画～</li>
    <li>IDとワスワードを入力し～</li>
    <li>表示されている文字を入～</li>
</ol>
  1. WordPressのログイン画～
  2. IDとワスワードを入力し～
  3. 表示されている文字を入～
 
<ol type="a">
    <li>WordPressのログイン画～</li>
    <li>IDとワスワードを入力し～</li>
    <li>表示されている文字を入～</li>
</ol>
  1. WordPressのログイン画～
  2. IDとワスワードを入力し～
  3. 表示されている文字を入～
 
<ol type="A">
    <li>WordPressのログイン画～</li>
    <li>IDとワスワードを入力し～</li>
    <li>表示されている文字を入～</li>
</ol>
  1. WordPressのログイン画～
  2. IDとワスワードを入力し～
  3. 表示されている文字を入～
 
<ol type="i">
    <li>WordPressのログイン画～</li>
    <li>IDとワスワードを入力し～</li>
    <li>表示されている文字を入～</li>
</ol>
  1. WordPressのログイン画～
  2. IDとワスワードを入力し～
  3. 表示されている文字を入～
 
<ol type="I">
    <li>WordPressのログイン画～</li>
    <li>IDとワスワードを入力し～</li>
    <li>表示されている文字を入～</li>
</ol>
  1. WordPressのログイン画～
  2. IDとワスワードを入力し～
  3. 表示されている文字を入

li要素の属性

value

番号を指定する値からスタートさせることができます。valueには数字のみ指定できる。Fを指定したい場合は、olにてtype=”A”としたうえで、value=”6″（FはAから6番目）とする。

<ol>
    <li>WordPressのログイン画～</li>
    <li value="15">IDとワスワードを入力し～</li>
    <li value="10">表示されている文字を入～</li>
    <li>ログインをクリックしま～</li>
</ol>
  1. WordPressのログイン画～
  2. IDとワスワードを入力し～
  3. 表示されている文字を入～
  4. ログインをクリックしま～
 
<ol type="A">
    <li>WordPressのログイン画～</li>
    <li value="6">IDとワスワードを入力し～</li>
    <li value="10">表示されている文字を入～</li>
    <li>ログインをクリックしま～</li>
</ol>
  1. WordPressのログイン画～
  2. IDとワスワードを入力し～
  3. 表示されている文字を入～
  4. ログインをクリックしま～

属性の組合せ例

<ol reversed start="2" type="A">
    <li>WordPressのログイン画～</li>
    <li>IDとワスワードを入力し～</li>
    <li>表示されている文字を入～</li>
    <li>ログインをクリックしま～</li>
</ol>
  1. WordPressのログイン画～
  2. IDとワスワードを入力し～
  3. 表示されている文字を入～
  4. ログインをクリックしま～

※逆順(reversed)でマイナス圏になる場合になる。ZYX..となるわけではありません。

注意点

入れ子構造

入れ子構造にする場合は ol – li – ol -li とすること。 ol – ol -li としてはならない。

<ol>
    <li>WordPressのログイン画～</li>
    <ol type="a"> 
        <li>IDとワスワードを入力し～</li>
        <li>表示されている文字を入～</li>
    </ol> 
    <li>ログインをクリックしま～</li>
</ol>
  1. WordPressのログイン画～
    1. IDとワスワードを入力し～
    2. 表示されている文字を入～
  3. ログインをクリックしま～

CSSデザイン

スポンサーリンク