ol,li要素の概要
順番付けの序列リストHTML | ||
<ol><li>~</li>…<li>~</li></ol> | ||
目的 | 作業手順やランキングなど、順番のあるものなど | |
関連 | <ul> <li> <dl> <dt> <dd> | |
| ||
<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>
- WordPressのログイン画~
- IDとワスワードを入力し~
- 表示されている文字を入~
- ログインをクリックしま~
- start
開始番号を指定する
<ol start="3"> <li>WordPressのログイン画~</li> <li>IDとワスワードを入力し~</li> <li>表示されている文字を入~</li> <li>ログインをクリックしま~</li> </ol>
- WordPressのログイン画~
- IDとワスワードを入力し~
- 表示されている文字を入~
- ログインをクリックしま~
- type
序列番号の形式を指定する
<ol type="1"> <li>WordPressのログイン画~</li> <li>IDとワスワードを入力し~</li> <li>表示されている文字を入~</li> </ol>
- WordPressのログイン画~
- IDとワスワードを入力し~
- 表示されている文字を入~
<ol type="a"> <li>WordPressのログイン画~</li> <li>IDとワスワードを入力し~</li> <li>表示されている文字を入~</li> </ol>
- WordPressのログイン画~
- IDとワスワードを入力し~
- 表示されている文字を入~
<ol type="A"> <li>WordPressのログイン画~</li> <li>IDとワスワードを入力し~</li> <li>表示されている文字を入~</li> </ol>
- WordPressのログイン画~
- IDとワスワードを入力し~
- 表示されている文字を入~
<ol type="i"> <li>WordPressのログイン画~</li> <li>IDとワスワードを入力し~</li> <li>表示されている文字を入~</li> </ol>
- WordPressのログイン画~
- IDとワスワードを入力し~
- 表示されている文字を入~
<ol type="I"> <li>WordPressのログイン画~</li> <li>IDとワスワードを入力し~</li> <li>表示されている文字を入~</li> </ol>
- WordPressのログイン画~
- IDとワスワードを入力し~
- 表示されている文字を入
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>
- WordPressのログイン画~
- IDとワスワードを入力し~
- 表示されている文字を入~
- ログインをクリックしま~
<ol type="A"> <li>WordPressのログイン画~</li> <li value="6">IDとワスワードを入力し~</li> <li value="10">表示されている文字を入~</li> <li>ログインをクリックしま~</li> </ol>
- WordPressのログイン画~
- IDとワスワードを入力し~
- 表示されている文字を入~
- ログインをクリックしま~
属性の組合せ例
<ol reversed start="2" type="A"> <li>WordPressのログイン画~</li> <li>IDとワスワードを入力し~</li> <li>表示されている文字を入~</li> <li>ログインをクリックしま~</li> </ol> |
|
※逆順(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> |
|