HTMLのlist(リスト)タグ、ol、ul、liの使い分け方とは？

あらすじ

htmlには<ol>や<ul>といったリストを作成するためのタグがあります。

htmlについてはこちらをご覧くださいfa-arrow-circle-down

HTML5とは？初心者必見！できることや書き方について解説します！

2019.7.24

あらすじ フロントエンジニアやwebデザイナーは知っていて当たり前といってもいい言語HTML5。 HTML5の5はバージョンを表しており、今現在の最新のバージョンが5となります。 今回はそんなHTML5についてどのようなことができるのか、もしくはどのように書いていけばいいのかを解説していきたいと思い...

今回はこの<ol>や<ul>それぞれの役割や使い分け方、使う場面などを詳しく解説していきたいと思います。

具体的には

といった項目に分けて説明していきます。

プロパティ

<ul>や<ol>タグにはそれぞれ下記のようなプロパティをCSSで指定することができます。

それぞれどのようなスタイルの種類なのかは下記にて詳しく解説します。

list-style-position

このプロパティではリストの先頭にあるマークをリストの内側に含める(inside)か含めない(outside)かを指定することができます。

基本的には

の2つのどちらかを指定することができます。

list-style-image

このプロパティはその名の通りリストのマーク部分を画像に変更するためのプロパティです。

list-style-image: url("#");

list-style-type

リストの記述方法を指定することができるプロパティです。詳しくは後ほど解説しますが、ここでは値「none」についてだけ説明します。

list-style-typeでnoneを指定するとマークを無くすことができます。

子要素<li>

<ul>や<ol>は通常親要素となり、その下には子要素となる<li>がリストの要素となります。

具体的には

<ul>
  <li>サッカー</li>
  <li>野球</li>
  <li>バスケ</li>
</ul>

といった構成になり、表示のされかたは

1. サッカー
2. 野球
3. バスケ

といった形になります。

親要素<ol>と<ul>

子要素には<li>しかありませんでしたが、親要素には<ol>と<ul>の二つがあります。

<ol>

概要

<ol>タグとはordered list (並べられたリスト)の略で、リストを並べる際に先頭に数字やアルファベット、ひらがなといった文字を表示させることができるリストタグのことです。

具体的には、

1. りんご
2. いちご
3. ぶどう

や

a. 犬
b. 猫
c. 鳥

といった感じのリストです。

この<ol>リストの先頭にくる文字ですが、アルファベットなのか数字なのか、などどのような形式のリストにするかを指定する方法が二つあります。

Type属性での指定方法

この方法はhtmlに直接「属性」として記載する方法です。

例えば、

<ol type=”1”>
  <li>Hello World</li>
  <li>Hello World</li>
  <li>Hello World</li>
</ol>

と指定すると

1. Hello World
2. Hello World
3. Hello World

と表示されます。

その他には

などの値を指定することができます。

CSSでの指定

もう一つがCSSで指定する方法です。

冒頭でも少し説明しましたが、CSSで指定する場合、list-style-typeというプロパティを使用します。

list-style-typeの値の種類には以下のものがあります。

Armenian (アルメニア)
Cjk-ideographic ()
Decimal (数字)
Decimal-leading-zero (0が先頭につく数字)
Georgian
Hebrew (ヘブライ)
Hiragana (ひらがな)
Hiragana-iroha (いろは)
Katakana (カタカナ)
Katakana-iroha (イロハ)
Lower-alpha (アルファベット小文字)
Lower-greek
Lower-latin (ラテン語小文字)
Lower-roman
None (なし)
Upper-alpha (アルファベット大文字)
Upper-greek
Upper-latin (ラテン語大文字)
Upper-roman
initial

<ul>

概要

<ul>タグは<ol>タグの逆であるunordered list(並んでいないリスト)の略です。

<ol>とは違い、数字やアルファベットは使わず、代わりに四角や三角といった図形を使用したリストになっています。

具体的には

• Hello World
• Hello World
• Hello World

といったようなリストのことを言います。

リストの形を指定する方法はこちらも2通りあります。

Type属性での指定方法

こちらも<ol>タグ同様htmlに直接「属性」として記載する方法です。

<ul type=“disc”>
  <li>くま</li>
  <li>ライオン</li>
  <li>わに</li>
</ul>

と記載すると

• くま
• ライオン
• わに

といった感じで表示してくれます。

指定できる値として

disc(デフォルト)

fa-circle

circle

fa-circle-thin

square

fa-stop

の3種類を指定することができます。

CSSでの指定

CSSでの指定方法も<ol>タグと一緒で、list-style-typeで指定してあげます。

記載方法は

li {
list-style-type: Circle
}

といった感じになります。

こちらもtype属性での指定方法同様に

の3種類の値を指定することができます。

使い方

<ul>と<ol>のことについてはある程度わかってもらえたと思います。

しかし、実際にどのような場面でこの<ul>や<ol>タグは使われるのでしょうか。

ナビゲーションメニューとしての使われ方

<ul>タグの使われ方で一番多いのがナビゲーションメニューとして使う方法ではないでしょうか。

<ul>タグ内のlt;li>一つ一つにlt;a>タグでリンクを貼り、それぞれのページに飛べるようにしてあげる方法です。

<ul>
  <li><a href=”#”>ホーム</a></li>
  <li><a href=”#”>ページ1</a></li>
  <li><a href=”#”>ページ2</a></li>
  <li><a href=”#”>お問い合わせ</a></li>
</ul>

といったコードをCSSで装飾することでナビゲーションメニューとして利用することができます。

単純に手順などを記載するとき

<ol>でよく使われるのが、ソフトウェアの操作や料理の作成などといった、何かしらの手順を説明する時です。

例えば、Facebookのアプリでタイムラインを投稿する手順を説明するときは

<ol>
  <li>Facebookのアプリを開きます。</li>
  <li>Facebookで自分のアカウントを開きます。</li>
  <li>タイムラインの一番上にある投稿箇所をタップします。</li>
  <li>投稿したい内容を記載し、投稿ボタンをクリックします。</li>
</ol>

1. Facebookのアプリを開きます。fa-facebook-square
2. Facebookで自分のアカウントを開きます。
3. タイムラインの一番上にある投稿箇所をタップします。
4. 投稿したい内容を記載し、投稿ボタンをクリックします。

といった具合に、上から順に操作手順を記載することで、相手に順番通りに説明することができます。

まとめ

いかがだったでしょうか。

多少なりともリストタグの使い方をご理解いただけたのではないでしょうか。

かなり便利なタグですので、是非ともマスターして活用していただければと思います。

合わせて読みたい

ブロック要素とインライン要素の違いとは？インラインブロックで解決！

2019.9.21

あらすじ ブロック要素やインライン要素とはhtmlではよく耳にする言葉です。 しかし、html初心者の人やhtmlの知識が浅い人にとっては少し理解に苦しむこともあるかと思います。 今回はそんな方達に向けて、ブロック要素やインライン要素とは何なのか詳しく説明していきたいと思います。 具体的には ...