ドイツ生まれの地球に優しいバイオ・ハイテク洗剤

olタグ

更新日
現在のページは約2分で読めます。

olタグとは

ブロックレベル要素の1つで、番号付きの箇条書きリストを紹介するときに使います。リストタグの1つです。

番号付きではなく普通の箇条リストを作成する場合はulタグを記述します。

サンプルコード

<ol>
<li>手順1</li>
<li>手順2</li>
</ol>

ul要素のときと同様で、ol要素にliタグを入れます。

使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>olタグ</title>
</head>
<body>

<h1>olタグの使い方</h1>

<h2>基本</h2>
<ol>
<li>応募</li>
<li>面接</li>
<li>内定</li>
</ol>

<h2>入れ子(階層化)</h2>
<ol>
<li>会社案内
<ol>
<li>経営理念</li>
<li>事業内容</li>
</ol>
</li>
<li>リクルート
<ol>
<li>採用応募</li>
<li>説明会</li>
</ol>
</li>
<li>お問い合わせ
</ol>

</body>
</html>

ul要素と同じでリストを階層化させることもできます。

ブラウザの見え方

ulタグとolタグの使い方

ulとolはどちらをどのように使い分けるか悩むかと思います。デフォルトですとulは黒点、olは数値が表示されますが、いずれもcssで先頭マーカーの種類を指定することができるため、厳密に使い分ける必要はないかと思います。

ただ、CSSで指定しなくてやり方の手順を紹介する場合は、ol要素を使ったほうが数値が順番で表示されるのでこちらを推奨します。

まとめ

ul要素と同様にol要素もよく使われるリストタグですのでマスターしておきましょう。

 

情報提供、雑談等