2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

ol要素とは? 分かりやすく解説します!

olの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.ol要素とは?

ol要素はordered listの略で、順序のあるリストを表示する際に使用します。

リスト項目は、liタグで指定します。

順序のあるリストを作りたい場合、ol要素を利用しましょう。

一方、順序のないリストを作成する際にはul要素を利用しましょう。




2.ol要素の使い方

それではol要素の使い方をみていきましょう。

以下のソースコードは料理作業手順をol要素で表しています。

・・・

<ol>
 <li>レシピの確認</li>
 <li>材料をそろえる</li>
 <li>下ごしらえを終わらせる</li>
 <li>調味料を合わせておく</li>
 <li>調理する</li>
 <li>味見をする</li>
 <li>盛り付ける</li>
</ol>

・・・

降順リストの作成する

ol要素に reversed を追加すると、リストの順序が逆順(降順)になります。

以下のようにreversed属性を指定することで最大の数値から降順に並べられるリストを表せます。

・・・

<ol resersed>
 <li>リスト項目</li>
 <li>リスト項目</li>
 <li>リスト項目</li>
</ol>

・・・

開始番号を変更する

ol要素に start=”” を追加すると、リストの開始番号を変更することができます。

以下の場合、リストの開始番号が3からになります。

・・・

<ol start="3">
 <li>リスト項目</li>
 <li>リスト項目</li>
 <li>リスト項目</li>
</ol>

・・・




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です