LINEで現役エンジニアに直接質問してみよう!登録無料

HTML ul、ol、liタグで箇条書きリストを作成する方法

この記事のまとめ

HTMLでリストを作る方法を解説します。

HTMLのリストには順番なしリストと順番ありリストの2種類があり、使い所に迷ってしまうかもしれません。初心者からのそのようなよくある質問やデザインに関する裏技を紹介します。

この記事で、ul・il・liタグをマスターしましょう!

順番なしリストと順番ありリストの違い

冒頭で「順番なしリスト」と「順番ありリスト」の2種類あることをお伝えしました。まず、これらの違いを確認しましょう!

なお、本記事では「順番なしリストと順番ありリスト」を合わせて「箇条書き」としていきます。

順番なしリストとは?

  • 順番なしリスト1
  • 順番なしリスト2
  • 順番なしリスト3

順番なしリストとは、リストの先頭に「・」などのマーカーが付いており、どのような順番でも構わないリストのことです。

TODOリスト、メモ書き、名簿一覧、会社情報など使われます。

全3種類とマーカー無しに変更出来ます。

  • 順番なしリスト1
  • 順番なしリスト2
  • 順番なしリスト3
  • 順番なしリスト1
  • 順番なしリスト2
  • 順番なしリスト3

使い方などの詳しい情報は、この記事の下記で解説します。

順番ありリストとは?

  1. 順番ありリスト1
  2. 順番ありリスト2
  3. 順番ありリスト3

順番ありリストとは、このようにリストの先頭に番号が付いており、順番が重要になるリストのことです。

手順の流れを書いたり、目次などに使われます。

また、リストの先頭に表示する添字は算用数字だけではなく、アルファベットや漢数字、ひらがなの「あいうえお」やカタカナなど全15種類以上とマーカー無しに変更出来ます。ここでは4種類だけ紹介します。

  1. 順番ありリスト1
  2. 順番ありリスト2
  3. 順番ありリスト3
  1. 順番ありリスト1
  2. 順番ありリスト2
  3. 順番ありリスト3
  1. 順番ありリスト1
  2. 順番ありリスト2
  3. 順番ありリスト3
  1. 順番ありリスト1
  2. 順番ありリスト2
  3. 順番ありリスト3

これも使い方などの詳しい情報は、この記事の下記で解説します。

HTMLでul、ol、liリスト作り方

HTMLで箇条書きを書くには、「<ul> + <li>」で書くか「<ol> + <li>」で書くかを選びます。「<ul> + <li>」で書けば順番ありリストになり、「<ol> + <li>」で書けば順番なしリストになります。

ここでは例として「<ul> + <li>」をつかって箇条書きを作ってみます。

ここではわかりやすいように作り方を3つのステップにまとめました。

  1. ステップ1: 行ごとにリストを作ろう
  2. ステップ2: リストそれぞれを<li>で囲おう
  3. ステップ3: リスト全体を<ul>で囲おう

順番に解説していきます。

順番なしリスト1
順番なしリスト2
順番なしリスト3

リストにする文章を1行ごとに改行してまとめましょう。

<li>順番なしリスト1</li>
<li>順番なしリスト2</li>
<li>順番なしリスト3</li>

次に各行を<li>で囲みます。

<ul>
<li>順番なしリスト1</li>
<li>順番なしリスト2</li>
<li>順番なしリスト3</li>
</ul>

全体を<ul>で囲みます。

このようにしてリストを作成します。

まとめると、

  1. リストを<li>で囲む
  2. <li>全体を<ul><ol>で囲む

です。

ulで囲った順番なしリスト

<ul>を使った順番なしリストについてもっと詳しく見ていきましょう!

ulとは「Unordered List」の略で、順不同(順番の関係ない)の箇条書きを作成するときに使います。順番を変更しても意味が大きく変わらないものに関して使います。

ソースコード

<ul>
<li>順番なしリスト1</li>
<li>順番なしリスト2</li>
<li>順番なしリスト3</li>
</ul>

ブラウザ表示

  • 順番なしリスト1
  • 順番なしリスト2
  • 順番なしリスト3

このように、<li><ul>で囲った場合は順番無しの意味になり、マーカーが黒丸のリストになります。

olで囲った順番ありリスト

<ol>を使った順番ありリストについても詳しく見ていきましょう!

olとは、「Ordered List」の略で順番のある箇条書きリストを作成する時に使います。順序が変わると文章の意味が変わってしまう部分に使います。

ソースコード

<ol>
<li>順番ありリスト1</li>
<li>順番ありリスト2</li>
<li>順番ありリスト3</li>
</ol>

ブラウザ表示

  1. 順番ありリスト1
  2. 順番ありリスト2
  3. 順番ありリスト3

リストを作る時の注意点

ul・ol・liを作る時に注意点があります。それは、<ul><ol>には<li>しか入れてはいけないという事です。

具体的に見ていきましょう!ダメな例と良い例を比較して紹介します。

ダメな例

<!-- ダメな例1 -->
<ul>
<p>ulの中の段落</p>
<li>順番なしリスト1</li>
<li>順番なしリスト2</li>
<li>順番なしリスト3</li>
</ul>
 
<!-- ダメな例2 -->
<ol>
<li>順番ありリスト1</li>
<li>順番ありリスト2</li>
<span>olの中にspan</span>
<li>順番ありリスト3</li>
</ol>

良い例

<!-- 良い例1 -->
<ul>
<li>順番なしリスト1
    <p>リストの中に段落</p>
</li>
<li>順番なしリスト2</li>
<li>順番なしリスト3</li>
</ul>
 
<!-- 良い例2 -->
<ol>
<li>順番ありリスト1</li>
<li>順番ありリスト2</li>
<li>順番ありリスト3
    <span>olの中にspan</span>
</li>
</ol>

このように、<ul><ol>の中には<li>しか入れないようにしましょう!

MEMO

もし、ダメな例でWebページを作った場合、どのように表示されるかはブラウザごとに変わってきます。

強制的に正しいHTMLに作り変えるタイプ、無視するタイプ、そのまま解釈するタイプなど様々です。バージョンごとにも変わる可能性もあります。

ulやolは箇条書き以外で使うことも多い

ulやolで作った箇条書きリストはもちろん文章中でも使うことが出来ます。しかし、一見箇条書きには見えない部分に使われていることも多くあります。

この章ではそのような応用的な使い方をされた例をいくつか見ていきましょう!

MEMO

箇条書きの見えない部分でulやolを使ってもいいの?

初心者はおそらく「ulやolは箇条書きを表すんでしょ?なのに、箇条書きでない部分でulやolを使っていいの?」という疑問を持っているかと思います。

結論から言うと、全く問題ありません

なぜなら、

  • ul: 規則性のある順番が入れ替わっても問題ないコンテンツ
  • ol: 規則性のある順番が入れ替わったら意味も変わってしまうコンテンツ

としか定義されていないからです。

ですので、これに沿った内容であればどんなコンテンツも入れることができます。

ulの応用1: ナビゲーションメニュー

yahoo japan

参考サイトとして「yahoo.co.jp」を見てみましょう!

画像でわかるように、至る所に<ul><li>が使われています。メニュー全体に<ul>、メニューの各リンクが<li>で作られています。

ulの応用2: スライダー・カーセル

波佐見焼 オンラインショップ|アイユー(aiyu)

2つ目に紹介する参考サイトは「波佐見焼 オンラインショップ|アイユー(aiyu)」です。

最初の画面に大きく登場するスライダーは、画像1つ1つが<li>でリスト化されており、横に流れる1行全体が<ul>で囲まれている構造になっています。

ulの応用3: フォトギャラリー

HOTEL HOKKE CLAB KAGOSHIMA

3つ目に紹介する参考サイトは「HOTEL HOKKE CLAB KAGOSHIMA」です。

ホテル内の食べ物や様子を写したたくさんの写真は全て<ul><li>によって作られています。

olの応用1: レシピの手順

レシピ大百科 – こだわり手作り!回鍋肉

olの応用例として紹介するのは、レシピの手順です。手順全体が<ol>で囲まれており、1つ1つの手順が<li>で作られています。

MEMO

どっちを使えばいいか迷った!どうすればいい?

結論から言うと、迷った場合は<ul>を使うようにしましょう。なぜなら、順番ありよりも順番なしの方が適用できる範囲が広く失敗することが少ないからです。

<ol>では順番を言えれ変えた時、前後関係がおかしくなる可能性がありますが、<ul>の方はありません。

一時的に<ul>で作成し、順番が前後する可能性がなくなれば<ol>で作成する方法でもOKです。

箇条書きリスト内で改行したい!

箇条書きリスト内で改行する方法を紹介します。方法は2種類あります。

  1. 改行をしたい場所に<br>を配置する(オススメ)
  2. 改行をしたい場所をブロック要素にする

改行をしたい場所に<br>を配置する

ソースコード

<ul>
<li>順番なし<br>リスト1</li>
<li>順番なしリスト2</li>
</ul>

ブラウザ表示

  • 順番なし
    リスト1
  • 順番なしリスト2

この方法は至ってシンプルです。改行したい場所に<br>を入れるだけです。入れた部分で改行できます。

改行をしたい場所をブロック要素にする

ソースコード

<ul>
<li>順番なし<div>リスト1</div></li>
<li>順番なしリスト2</li>
</ul>

ブラウザ表示

  • 順番なし
    リスト1
  • 順番なしリスト2

この方法はあまり使われませんが、改行したい行とごにブロック要素で囲むという方法もあります。

箇条書きリストのマーカーデザインを変える

これより先に進む前に

ここからはCSSを使ってデザインを変更する方法を解説していきます。
CSSというHTMLとは別の言語を取り扱うので、学んでいない人には理解できない部分が出てくるかもしれません。

そんな人のために、CSS入門記事を用意しています。
10分ほどで読み終わる内容なので、CSSを先に学びたい!という人は下記記事で学習してくだいね!

【初心者向け】CSSとは?10分でわかる基礎と書き方をイラストを使って解説

ここから、箇条書きリストの見た目や黒ポチのマーカーデザインの変え方下記4方法を紹介します。

  1. マーカーの表示を変える
  2. マーカーを消す
  3. マーカーを画像に変更する
  4. マーカーをCSSで作る

マーカーの表示を変える

まずはマーカーの表示を変えてみましょう!

マーカーを変えるにはCSSのlist-style-typeを変更します。<ul><ol>では使えるマーカーの種類が変わるので、分けて紹介してきます。

まずは<ul>を使ったマーカー一覧です。黒丸、白丸、黒四角の3つの種類の中から選択出来ます。

マーカー名CSS
黒丸list-style-type: disc;
白丸list-style-type: circle;
黒四角list-style-type: square;

実際にCSSを使ったソースコードと見た目はこのようになります。

<ul>のマーカー一覧

ul {
  list-style-type: disc;
}
 
ul {
  list-style-type: circle;
}
 
ul {
  list-style-type: square;
}

list-style-type: disc;

  • リスト1
  • リスト2

list-style-type: circle;

  • リスト1
  • リスト2

list-style-type: square;

  • リスト1
  • リスト2

次に<ol>を使ったマーカー一覧です。

マーカー名CSS
小文字のローマ数字list-style-type: lower-roman;
大文字のローマ数字list-style-type: upper-roman;
小文字のギリシャ文字list-style-type: lower-greek;
算用数字list-style-type: decimal;
先頭に0をつけた算用数字list-style-type: decimal-leading-zero;
小文字のアルファベットlist-style-type: lower-latin;
大文字のアルファベットlist-style-type: upper-latin;
漢数字list-style-type: cjk-ideographic;
ひらがなのあいうえお順list-style-type: hiragana;
カタカナのアイウエオ順list-style-type: katakana;
ひらがなのいろはにほへと順list-style-type: hiragana-iroha;
カタカナのイロハニホヘト順list-style-type: katakana-iroha;
ヘブライ数字list-style-type: hebrew;
アルメニア数字list-style-type: armenian;
グルジア数字list-style-type: georgian;

これらもCSSを使ったソースコードと見た目を用意しました。

<ul>のマーカー一覧

ul { list-style-type: lower-roman; }
 
ul { list-style-type: upper-roman; }
 
ul { list-style-type: lower-greek; }
 
ul { list-style-type: decimal; }
 
ul { list-style-type: decimal-leading-zero; }
 
ul { list-style-type: lower-latin; }
 
ul { list-style-type: upper-latin; }
 
ul { list-style-type: cjk-ideographic; }
 
ul { list-style-type: hiragana; }
 
ul { list-style-type: katakana; }
 
ul { list-style-type: hiragana-iroha; }
 
ul { list-style-type: katakana-iroha; }
 
ul { list-style-type: hebrew; }
 
ul { list-style-type: armenian; }
 
ul { list-style-type: georgian; }

list-style-type: lower-roman;

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

list-style-type: upper-roman;

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

list-style-type: lower-greek;

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

list-style-type: decimal;

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

list-style-type: decimal-leading-zero;

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

list-style-type: lower-latin;

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

list-style-type: upper-latin;

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

list-style-type: cjk-ideographic;

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

list-style-type: hiragana;

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

list-style-type: katakana;

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

list-style-type: hiragana-iroha;

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

list-style-type: katakana-iroha;

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

list-style-type: hebrew;

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

list-style-type: armenian;

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

list-style-type: georgian;

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

<ol>の場合は種類が豊富にありますが、実際に使うのは殆どdecimalだけです。その他は「こんなに色々種類があるんだなー」ぐらいに覚えておけばOKです。

また、マーカーの種類によって検索順位に影響を与えることはないので、あなたが一番わかり易いと思うものを使えば大丈夫です。

マーカーを消す

先程解説した「yahoo.co.jp」や「スライダー」のようにリストマーカーが不要な場合もあります。この時はCSSでマーカーを消すことも出来ます。

ソースコード

ul {
  list-style-type: none;
}

ブラウザ表示

  • リスト1
  • リスト2

マーカーを消したら、次に解説する「マーカーを画像に変更」したり「マーカーをCSSで作る」といった事ができます。これらの基礎となるので、簡単な内容ですがしっかり覚えておきましょう!

マーカーを画像に変更する

リストマーカーは画像で作成することもできます。今回はアイコンとして「FLAT ICON DESIGN」さんのアイコンを使用しました。

ソースコード

ul {
    list-style-type: none;
    padding-left: 1.5em;
}
ul li:before {
    content: '';
    padding-left: 25px;
    background: url(orange.svg) no-repeat left center;
}

ブラウザ表示

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

list-style-type: none;でデフォルトのマーカーを消し、疑似要素:beforeを使って背景画像として画像アイコンを設定します。

padding-leftでマーカー間のスペースを調節したら完成です。

マーカーをCSSで作る

CSSだけでマーカーをデザインし、設定することが出来ます。

CSSのみでアイコンを描画させることができるコードが集められた「CSS ICON」というアイコン集があります。

この中のチェック()のアイコンをリストマーカーに設定してみたいと思います。

ソースコード

ul {
  list-style-type: none;
  padding-left: 2.5em;
}
ul li {
  position: relative;
}
ul li:before {
  content: '';
  color: #000;
  position: absolute;
  margin-left: 3px;
  margin-top: 4px;
  width: 14px;
  height: 8px;
  border-bottom: solid 1px currentColor;
  border-left: solid 1px currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: -25px;
  top: 8px;
  color: #c134bc;
}

ブラウザ表示

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

リストを横並びにする

リストを横並びにするには大きく3種類の方法があります。

  1. flexboxを使う
  2. inline-blockを使う
  3. floatを使う

この中で一番オススメなのが、flexboxを使う方法です。それでは順番に解説していきます。

推奨: 「flexbox」を使って横並び

現在、横並びにさせる方法として主流になりつつあるのが、このflexboxを使った方法です。

ソースコード

ブラウザ表示

非推奨: 「inline-block」を使う

inline-blockを使ってても横並びにすることができます。

ソースコード

ブラウザ表示

注意

この方法では、どうしても要素と要素の間に隙間ができてしまいます。 原因は

  1. HTMLコード上でliliの間にスペースや改行がある
  2. inline-blockの設定でで要素がインライン要素になっている

ことです。

解決方法は、HTML上のスペースや改行を削除することですが、ソースコードが見にくくなったり、思わぬスタイル崩れの原因となるため、この方法自体がオススメできません。

非推奨:「float」を使う

昔ながらのよ、横並びの方法としてfloatがあります。floatはblock要素に対して指定します。

ソースコード

ブラウザ表示

ただしこの方法は、CSSの設定名が「float」という名前のように、要素が浮いているかのような振る舞いをします。
具体的には、下に来た要素が回り込んでしまいます。

ソースコード

ブラウザ表示

これを解決するには、CSSのclearを駆使する方法が一般的です。また、clearを扱いやすくしたテクニックとして「clearfix」というものもあります。

下記では、clearfixを使ったfloatの回り込みを解決する例を紹介します。詳しくは「clearfix」で検索して調べてみてください。

ソースコード

ブラウザ表示

まとめ

  • リストを作成するには「ul + li」か「ol + li」を使う
  • ul + li」で作成すると順番なしリストになる
  • ol + li」で作成すると順番ありリストになる
  • 改行は<br>かブロック要素で囲む
  • リストマーカーを作る方法は3種類。「CSSで設定」「画像を使う」「CSSで作る」
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。