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

スポンサーリンク

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. 表示されている文字を入~
  2. ログインをクリックしま~

CSSデザイン