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> |
|