数字付きリスト「olタグ」とは? ul要素の違い・丸数字表示方法も分かりやすく解説!

ol要素について知りたい人

ol要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること
  • ol要素とは? ul要素との違いは?
  • ol要素の使い方
  • 丸数字表示方法は?

htmlのol要素は項目の順序付きリストを表します。

リスト内の項目は、ol要素内に配置するli要素で示すことになります。

ol要素は箇条書きを作成するときに欠かせませんし、属性を使うことで様々なアレンジが可能です。

そこでこの記事ではol要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

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

1.ol要素とは?

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

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

具体的には作業リスト、ランキングリストなどで利用します。

番号はデフォルトでついているので、自分で番号をふる必要もありません。

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

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

ol要素またはul要素にすべきかは、その時の文脈で判断しましょう。


↓↓↓↓ ul要素について詳しく知りたい方は以下の記事をご覧になって下さい。

[点を消す方法] htmlのulタグの意味は? 読み方・入れ子にする方法も分かりやすく解説!




2.ol要素の使い方

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

HTMLのol要素は、順序が重要なリストを作るために使います。

ol要素はリスト全体を、各項目はli要素で表現します。

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

作業手順などは並び順が重要な意味を持つリストなので、ol要素を使うと一番いいかと思います。

一方、リストの並び順が気にならないものはul要素を使いましょう。

・・・

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

・・・

降順リストの作成する

HTML5ではol要素に新しくreversedが追加されています。

reversedは古いバージョンのブラウザではサポートされていないので注意してください。

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

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

具体的には「1、2、3」という並び順にはならず、「3、2,1」という並び順になります。

・・・

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

・・・

開始番号を変更する

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

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

・・・

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

・・・

番号を途中で変更する

番号を途中で変更したい場合もあるかと思います。

その時、value=”” を追加すると、リストの番号を途中で変更することができます。

以下の場合、リストの番号を途中で5とすることができます。

それ以降の番号は6からになります。

・・・

<ol>
 <li>リスト項目</li>
 <li value="5">リスト項目</li>
 <li>リスト項目</li>
</ol>

・・・

リストを入れ子にする

リストの中に別のリストを入れることができます。

リストをさらに細かくリストアップしたいときは以下のようにします。

・・・

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

・・・

番号の種類を変更する

デフォルトは数字となっています。

ol要素にtype属性を指定すると他の表記に変更することができます。

ABC順にしたいときは「type=”A”」、ローマ数字にしたいときは「type=”I”」、数字にしたいときは「type=”1″」とします。

ABC順

・・・

<ol type="A">
 <li>リスト項目</li>
 <li>リスト項目</li>
 <li>リスト項目</li>
</ol>

・・・

ローマ数字

・・・

<ol type="I">
 <li>リスト項目</li>
 <li>リスト項目</li>
 <li>リスト項目</li>
</ol>

・・・

数字

・・・

<ol type="1">
 <li>リスト項目</li>
 <li>リスト項目</li>
 <li>リスト項目</li>
</ol>

・・・




3.丸数字表示方法は?

リストを丸数字にしたいときもあるかと思います。

丸数字とは数字を丸で囲った文字のことです。

そこでここでは丸数字表示方法をご紹介していきます。

丸数字は以下のようにします。

丸数字 文字参照
&#9450;
&#9312;
&#9313;
&#9314;
&#9315;
&#9316;
&#9317;
&#9318;
&#9319;
&#9320;
&#9321;

丸数字をどのように記述していくのかをみていきましょう!

・・・

<ol>
 <li>&#9312; リスト項目</li>
 <li>&#9313; リスト項目</li>
 <li>&#9314; リスト項目</li>
</ol>

・・・

上記のようにすることで簡易的に丸数字を表現します。

凝ったデザインにしたいという方はCSSで変更しましょう!

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?