olタグの使い方を覚える!【1分でわかるHTML編】

olタグの解説HTML

こんにちはみっくです。

今回はHTMLのolタグについてのお話です。

みっく
みっく

このolタグは順序のあるリストを作るタグです♪

olタグ(オーエルタグ)とは

みっく
みっく

「ol」はオーダード リストordered list)で順序のあるリストを表します。

みっく
みっく

オーダードで順番を定められたという意味ですね!

<ol> ~ </ol>で囲まれた範囲内にリストを定義できます。

<ol> ~ </ol> の中には、必ず <li> ~ </li> 入れてリストの項目を指定します。

liタグについては、以下の記事を参考にお願いします。

liタグの解説HTML liタグの使い方を覚える!【1分でわかるHTML編】
メモ

olタグはブロックレベルです。

olタグの表示例

HTML

<p>今日の献立の手順</p>

<ol>
<li>タマネギをカットする</li>
<li>カットしたタマネギを炒める</li>
<li>炒めたタマネギに調味料をかける</li>
</ol>

ブラウザでの表示

今日の献立の手順

  1. タマネギをカットする
  2. カットしたタマネギを炒める
  3. 炒めたタマネギに調味料をかける
メモ

上の例のように、物事に順番があるリストを定義する際に使用します。

みっく
みっく

一般的には、パンくずリストなどはolタグで作る事が多いですね♪

パンくずリスト
メモ

パンくずリストとは、童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを落としながら歩いたという出来事が由来です。

みっく
みっく

パンくずリストとは、WEBサイトを見た一般ユーザーが迷わないようにする道しるべですね。

olタグの難易度

みっくのレビュー
難易度
 (2)

シンプルなタグではありますが、olタグの中にはliタグしか書けないなど制約がありますので、難易度は★2つレベルです。

みっぴー
みっぴー

ulタグとそっくりですね♪

olタグの使用頻度

みっくのレビュー
使用頻度
 (3)

順序のあるリストを定義する際以外にも、WEBサイトのパンくずリストなどで使用される事がありますので、使用頻度は 3つレベルです。

さっぴー
さっぴー

必要に応じて適度に使用されるという事ですね!

olタグの重要度

みっくのレビュー
重要度
 (3)

必要によって使用しますが、ulタグよりは重要度は下がると思いますで、重要度は 3つレベルです。

みっく
みっく

まずはulタグを覚えて、その流れでolタグを覚えるのがオススメです。

ulタグの解説HTML ulタグの使い方を覚える!【1分でわかるHTML編】

まとめ

「ol」はオーダード リストordered list)で順序のあるリストを表します。

<ol> ~ </ol> の中には、必ず <li> ~ </li> 入れてリストの項目を指定します。

一般的には、パンくずリストなどはolタグで作る事が多いです。

olタグの中にはliタグしか書けないなど制約がありますので、難易度は★2つレベルです。

WEBサイトのパンくずリストなどで使用される事がありますので、使用頻度は 3つレベルです。

必要によって使用しますが、ulタグよりは重要度は下がると思いますで、重要度は 3つレベルです。

みっく
みっく

ulタグとセットで覚えてしまいましょう♪

コメントを残す

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