ol/ulタグの使い方と違いについて

olとulタグの使い方

olとulタグはリストを作る要素です。olは順番を表示し、ulは順不同のリストを作る際に利用します。

HTML5になり追加された属性も掲載しています。

olタグ

カテゴリ リスト
タグ <ol></ol>
機能 番号順のリストを作ります
属性 start
reversed
type
使用例
<ol><li></li></ol>

olタグの説明

リストを作るときに使用します。下の例のように記述します。するとリストの行頭に順番が表示されます。

  1. リスト
  2. リスト
  3. リスト
  1. リスト
  2. リスト
  3. リスト

start

リストのスタート番号を決めることができます。

  1. リスト
  2. リスト
  3. リスト
start属性のプレビュー
  1. リスト
  2. リスト
  3. リスト

reversed

リストは上から順番に重要な順に番号をつけるものですが、reversedを指定すると逆に表示されます。

  1. リスト
  2. リスト
  3. リスト
start属性のプレビュー
  1. リスト
  2. リスト
  3. リスト

リストを使ったホームページ作成のヒント

olタグを使ったホームページ作成

<ol> は必須のタグですが、使い方は文章内の項目を箇条書きにして説明したい場合に使うのが基本的な使い方です。よく見かける例としはブログの目次に利用されています。

ページのコンテンツの上部にこれから説明するコンテンツの内容を要約して、表示することで、このページが何について書かれているかを伝える役目もあります。

こちらの画像のようにページ上部に目次があるとわかりやすい。
olタグを利用した目次の例として

<ol><ul>で書かれたものはGoogleが重要度の高い文字として認識するといわれています。

ulタグ

カテゴリ リスト
タグ <ul></ul>
機能 順不同のリストを作ります
属性 なし
使用例
<ul><li></li></ul>

ulタグ説明

順不同(番号のない丸や四角等)のリストを作るときに使用します。行頭記号のスタイルはCSSで指定します。また、検索エンジン上では重要な項目として認識されます。

グローバルナビゲーションやローカルナビゲーションを作るときににも使用します。スタイルシート(CSS)でデザインを作ります。

ulタグを使ったホームページ作成

グローバルナビゲーションやサイドメニューを作る際にも<ul>を使うのが一般的です。パンくずナビゲーションを作る際にも利用できます。

グローバルナビゲーションを作りたい方はこちらの記事を参考にしてください。
グローバルナビゲーションの作り方

また、行頭記号をチェックマークなどの画像にする方法もよく使います。スタイルシートの「list-style-image」などを使いますが、フォントやアイコンのサイズによって、ずれが生じます。

そのような時には「background」にアイコンを設定して、「margin/paddin/line-height」などで調整します。詳しくは下記記事にまとめてあります。
「ずれないリスト画像の設定方法」もご覧ください。

入れ子リストの場合

  • 1-1リスト
  • 1-2リスト
    • 2-1リスト
    • 2-2リスト
  • 1-3リスト
  • 1-1リスト
  • 1-2リスト
    • 2-1リスト
    • 2-2リスト
  • 1-3リスト

入れ子のリストの表示がうまくいかない場合は「CSSリストを入れ子にするとサイズが大きくなって困ったことはありませんか?」記事をご覧ください。