HTMLのlist(リスト)タグ、ol、ul、liの使い分け方とは?
スポンサーリンク

あらすじ

htmlには<ol><ul>といったリストを作成するためのタグがあります。
 
htmlについてはこちらをご覧ください

 

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

 

具体的には

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

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

 

スポンサーリンク

プロパティ

 

list

 

<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-typenoneを指定するとマークを無くすことができます。

 

スポンサーリンク

子要素<li>

 

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

 

具体的には

 

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

 

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

 

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

といった形になります。

 

親要素<ol>と<ul>

 

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

 

<ol>

 

list

 

概要

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

 

list

 

概要

<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種類の値を指定することができます。

 

使い方

 

website

 

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

 

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

 

まとめ

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

 

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

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

 

スポンサーリンク

Twitterでフォローしよう