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

2019年8月8日 2020年4月21日

xxsuguruxx

1 あらすじ
2 プロパティ
3 子要素<li>
4 親要素<ol>と<ul>
- 4.1 <ol>
- 4.2 <ul>
5 使い方
- 5.1 ナビゲーションメニューとしての使われ方
- 5.2 単純に手順などを記載するとき
6 まとめ

あらすじ

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

htmlについてはこちらをご覧ください

HTML5とは？初心者必見！タグ、バージョン、文法など

2019.7.24

あらすじフロントエンジニアやwebデザイナーは知っていて当たり前といってもいい言語HTML。今回はそんなHTMLとは具体的にはどのようなものなのかを詳しく紹介していきます。主にマークアップ言語とは HTMLとは HTMLの文法 HTMLのバーション HTMLの代表的なタグ例といった項目で...

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

具体的には

プロパティ
子要素<li>
親要素<ol>と<ul>
使い方

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

プロパティ

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

list-style-position
list-style-image
list-style-type

memo

プロパティとはスタイルの種類です。

例えば、文字の色を青にする場合は「Color:blue」といった構文になります。
ここでの「color」がプロパティになります。

colorの他にも

高さを指定するHeight

幅を指定するwidth

背景の色を指定するbackground-color

など色々あります。

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

list-style-position

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

基本的には

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>

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

サッカー
野球
バスケ

といった形になります。

親要素<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

と表示されます。

その他には

「A」
「a」
「I」
「i」

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

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(デフォルト)

circle

square

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

CSSでの指定

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

記載方法は

li {
list-style-type: Circle
}

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

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

circle
disc
square

の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>