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

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

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

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

この記事でお話すること

ol要素とは? ul要素との違いは?
ol要素の使い方
丸数字表示方法は?
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

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

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

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

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

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

ol要素の評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

1.ol要素とは?

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

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

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

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

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

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

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

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

2021年5月31日【点を消す方法】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.丸数字表示方法は?

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

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

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

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

丸数字	文字参照
⓪	⓪
①	①
②	②
③	③
④	④
⑤	⑤
⑥	⑥
⑦	⑦
⑧	⑧
⑨	⑨
⑩	⑩

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

・・・

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

・・・

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

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

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

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

リンク

4.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント