• HTML

HTMLで箇条書き【ul･ol･liタグの使い方を初心者にもわかりやすく解説】

投稿日:2020年12月13日（最終更新日:2022年07月05日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

HTMLで箇条書きを行うには？

HTMLで要素を箇条書きの形式で並べたり、リストを作りたい場合にはulタグ（もしくはolタグ）とliタグを使用します。

他のタグを使うことでも箇条書きのように見せることは可能ですが、HTMLのルールに沿って正しい構造で記述するのであれば「ul･ol･li」タグを使って記述します。

WEBサイトでは、リストの他にもメニュー項目の作成にもこれらのタグが利用されることが多いです。

ulタグ（olタグ）とliタグの使い方

ulタグ（もしくはolタグ）とliタグはセットで使用します。ulタグ（olタグ）を親要素にし、その中に子要素となるように、項目ひとつひとつをliタグで記述することでリストができあがります。

ulやolでリストを作ると各項目の左側には自動的に記号が表示されます。この記号はCSSで変更することも可能になっています。

ulとolの違いと使い分け

ulは「unorder list」の略、olは「order list」の略となっています。

どちらもli要素を子要素にしたリストを作るタグですが、ulが順序のないリストを作る時に使うのに対し、olは順序を持った項目を並べる時に使うというように状況に応じて分けて使用します。

ulタグを使うと各項目の左には黒丸が表示され、olタグを使うと上から順に数字が自動的に割り振られます。

ulタグでリストを作る

<ul>
    <li>東京都</li>
    <li>埼玉県</li>
    <li>神奈川県</li>
    <li>千葉県</li>
</ul>

上記の例では、各項目の左には黒丸が表示されていますが、CSSのlist-styleプロパティを使えば、この記号を自由に変更することが可能です。

olタグで番号付きのリストを作る

olタグを使うと番号の付いたリストを作成することができます。順番を記したいときに活用します。

次の例ではli要素をolタグで囲むように変更したので、項目の左には上から順に番号が付くようになりました。

<ol>
    <li>東京都</li>
    <li>埼玉県</li>
    <li>神奈川県</li>
    <li>千葉県</li>
</ol>

olタグによる順序を持つリストは、属性を追記により細かい調整も可能です。

属性を使って並び順を変更する

ol要素では、デフォルトでは「1、2、3...」と小さい順に数字が割り振られますが、「reversed」属性を追記すると大きい順に数字が割り振られるように変更することができます。

あくまで番号の割り振りが逆になるだけなので要素自体の表示順序が変更されるわけではありません。

<ol  reversed>
    <li>東京都</li>
    <li>埼玉県</li>
    <li>神奈川県</li>
    <li>千葉県</li>
</ol>

開始番号を変更する

ol要素では、デフォルトでは「1、2、3...」と1から順に数字が割り振られますが、「start」属性を使うと任意の数字から開始するように変更することができます。

<ol start="10">
    <li>東京都</li>
    <li>埼玉県</li>
    <li>神奈川県</li>
    <li>千葉県</li>
</ol>

特定の番号を固定する

ol要素では、デフォルトでは「1、2、3...」と1から順に数字が割り振られますが、liタグに「value」属性を使えば任意の数字を表示することができます。

value属性で番号を変更すると、後に続く項目の番号も変更されます。

<ol>
    <li>東京都</li>
    <li>埼玉県</li>
    <li value="8">神奈川県</li>
    <li>千葉県</li>
</ol>

入れ子にしてリストに階層を持たせる

ulタグ（olタグ）で作ったリストの中に、更にリストを作成して階層を持たせることが可能です。

ナビゲーションメニューなど要素同士に階層を持たせる必要があるときには、ulタグを使って入れ子の構造を作ることが多いです。

下記のようにliタグによる項目の中にulタグを入れて記述します。

インデントを入れる

インデントとは文字下げのことです。リスト項目内で改行があったときに、2行目以降のテキストが記号の下に回り込むかどうかという違いになります。

list-style-positionを使う

ulもしくはolに対し、list-style-positionプロパティを使って「inside」（内側に配置）か「outside」（外側に配置）かを指定します。

<ul class="indent_inside">
    <li>insideダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</li>
</ul>
<ul class="indent_outside">
    <li>outsideダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</li>
</ul>

.indent_inside{
    max-width:200px;
    list-style-position:inside;
}
.indent_outside{
    max-width:200px;
    list-style-position:outside;
}

記号を変更する

リスト項目の記号は、ulもしくはol要素に対して「list-style」プロパティを使って任意の形式に変更することができます。

list-styleに何も指定しない状態（デフォルトの状態）では、ul要素の初期値は「disc」、要素の初期値は「decimal」になっており、それぞれ黒丸と数字が表示されます。

元となるHTMLは全て共通で下記の通りです。

<ul>
    <li>東京都</li>
    <li>埼玉県</li>
    <li>神奈川県</li>
    <li>千葉県</li>
</ul>

ここからは指定できる値と表示結果について説明していきます。

白丸

記号を「白丸」に変更するには、list-styleの値に「circle」を指定します。

.test2{
    list-style:circle;/*白丸*/
}

黒四角

記号を「黒四角」に変更するには、list-styleの値に「square」を指定します。

.test3{
    list-style: square;/*黒四角*/
}

数字

記号を「数字」に変更するには、list-styleの値に「decimal」を指定します。

olタグにデフォルトで設定されている値になります。

.test4{
    list-style: decimal;/*数字*/
}

ゼロ付き数字

記号を「ゼロ付きの数字」に変更するには、list-styleの値に「decimal-leading-zero」を指定します。

.test5{
    list-style: decimal-leading-zero;/*ゼロ付き数字*/
}

ローマ数字（大文字・小文字）

記号を「小文字のローマ数字」に変更するには、list-styleの値に「lower-roman」を指定します。

大文字のローマ数字にしたい場合は、「upper-roman」にします。

.test6{
    list-style: lower-roman;/*ローマ数字(upper-romanは大文字)*/
}

アルファベットabc（大文字・小文字）

記号をabcというような「小文字のアルファベット」に変更するには、list-styleの値に「lower-alpha」を指定します。

ABCのような大文字のアルファベットにする場合は「upper-alpha」にします。

.test7{
    list-style: lower-alpha;/*アルファベット(upper-alphaは大文字)*/
}

漢数字

記号を「漢数字」に変更するには、list-styleの値に「cjk-ideographic」を指定します。

.test8{
    list-style:cjk-ideographic;/*漢数字*/
}

ひらがな

記号を「あ、い、う」のような「ひらがな」に変更するには、list-styleの値に「hiragana」を指定します。

.test9{
    list-style: hiragana;/*ひらがな*/
}

カタカナ

記号を「カタカナ」に変更するには、list-styleの値に「katakana」を指定します。

.test10{
    list-style: katakana;/*カタカナ*/
}

ひらがなのいろは

記号を「い、ろ、は」のような「ひらがなのいろは」に変更するには、list-styleの値に「hiragana-iroha」を指定します。

.test11{
    list-style: hiragana-iroha;/*ひらがなのいろは*/
}

カタカナのイロハ

記号を「カタカナのイロハ」に変更するには、list-styleの値に「katakana-iroha」を指定します。

.test12{
    list-style: katakana-iroha;/*カタカナのイロハ*/
}

※印を表示する方法

list-styleプロパティには、既定の値以外にも任意のテキストを表示させることも可能です。

次の例では「※」印を表示するようにしてありますが、その他のテキストを記述することもできます。

.test13{
    list-style:"※";/*任意文字*/ 
}

マーク無しにする（黒丸を消す）方法

ul要素のlist-styleプロパティは、何も指定しないと初期値である「disc」が有効になり、リストの項目には黒丸が表示されます。

そのため、項目に黒丸をはじめとしたマークを何もつけたくない場合は、list-styleプロパティの値に「none」を指定する必要があります。

なお、デフォルトのCSSによってはpadding-leftなどでマークを表示させるスペースが確保されていることがあるので、状況に応じてスタイルを調整してください。

.test_none{
    list-style:none;/*マーク無し*/
}

記号の色を変更する

これらの記号はli要素の疑似要素である「marker」要素を使って表示されています。

li要素のスタイルを変更すると記号と項目の両方のスタイルが変更されますが、このmarker要素を使えば記号のスタイルだけを変更することができます。なおmarker要素に対してはすべてのプロパティが指定できるわけではなく、使えないプロパティもあるので注意して下さい。

次の例では、記号の色のみを赤に変更しています。

.test_color li::marker{
    color:#d40000;
}

画像を使う

list-styleプロパティは、URLを記述することで任意の画像を表示させることも可能です。

次の例では事前にチェックボックスの画像ファイルを用意し、表示させています。

ul.test_gazou{
    list-style:url(./check.png);/*画像のファイルパス*/     
}

細かく調整したい場合は疑似要素を使う

あらかじめlist-style:noneで記号を非表示にしておき、li要素の疑似要素であるmarkerにスタイルを追記してアイコンを表示させます。

markerをはじめとしたCSSの疑似要素の役割や種類、使い方について詳しくはこちらをご覧ください。

CSSの疑似要素の使い方

疑似要素・疑似クラスは、どちらも元となる（基準となる）要素に対して追加のスタイルを指定したり装飾を行うために使用するCSSのセレクタ―です。どちらもHTMLのソースコードには追加の記述やマークアップの必要がなく、CSS側のみでスタイルを指定ことが可能です...【もっと読む】

次の例では、「Font Awesome」を利用してアイコンを表示しています。（事前にCDNでFont Awesomeを読み込んでいます。）

ul.test_gijiyouso li::marker{
    content:"\f138";/*Font Awesomeを利用する*/
    font-family:"Font awesome 5 free";
    font-weight:bold;
    color:#d40000;
}
ul.test_gijiyouso li{
    padding-left:10px;/*配置を調整*/
}

項目を横並びにする

通常上から下に並んで表示されるリスト項目を横並びにしたい場合は、li要素をインラインブロックに変更するか、ul(もしくはol)にdisplay:flexを指定します。

inline-blockに変更して横並びにする

li要素のdisplayプロパティの値をinline-blockに変更することで横並びに変更することが可能です。

この方法を使うとlist-styleによる記号の表示ができなくなるので注意が必要です。

<ul>
    <li>東京都</li>
    <li>埼玉県</li>
    <li>神奈川県</li>
    <li>千葉県</li>
</ul>

.test_yoko1 li{
    display:inline-block;
}

flexを使って横並びにする

ul（もしくはol）のdisplayプロパティをflexに変更することでも横並びレイアウトにすることが可能です。

flexを使って横並びにする場合は、list-styleで記号を表示させることが可能です。

<ul>
    <li>東京都</li>
    <li>埼玉県</li>
    <li>神奈川県</li>
    <li>千葉県</li>
</ul>

.test_yoko2{
    display:flex;
}
.test_yoko2 li{
    flex-grow:1;
}

まとめ

このようにul、olタグを使用すれば簡単にリストを生成することが可能です。単なるリスト以外にもメニューやサイドバーなどを作成する際にも使われていることも多いです。