【HTML ul・ol・liタグ】箇条書きリストタグの使い方

今回はHTMLのul・ol・liタグを使用して箇条書きリストを作成する方法およびよく使われる活用例を紹介していきます。
 

■順番なしの箇条書き(ul・li)

index.html

<ul> <li>1行目のテキストが入ります</li> <li>2行目のテキストが入ります</li> <li>3行目のテキストが入ります</li> </ul>

1 2 3 4 5

<ul>   <li>1行目のテキストが入ります</li>   <li>2行目のテキストが入ります</li>   <li>3行目のテキストが入ります</li> </ul>

■順番ありの箇条書き(ol・li)

index.html

<ol> <li>1行目のテキストが入ります</li> <li>2行目のテキストが入ります</li> <li>3行目のテキストが入ります</li> </ol>

1 2 3 4 5

<ol>   <li>1行目のテキストが入ります</li>   <li>2行目のテキストが入ります</li>   <li>3行目のテキストが入ります</li> </ol>

ul・ol・liタグを使用した箇条書きリストの作り方

ブログやホームページでHTMLで箇条書き(リスト)を作りたい場合はul・liタグ(順番なしの箇条書き)またはol・liタグ(順番ありの箇条書き)を使用します。
 
■順番なしの箇条書き(ul・li)

 
■順番ありの箇条書き(ol・li)

(ulタグ・liタグ): 番号なしリスト

ulタグ・liタグのセットでは「番号なしリスト(Unordered List)」を作成することができます。

書き方はliタグを使って箇条書きの1つ1つの文を囲い、その全体をulタグで囲うようにしてあげればOKです。

なお、箇条書きの項目数を増やしたい場合はliタグの数を自由に増やしてあげることが可能です。

(olタグ・liタグ): 番号ありリスト

olタグ・liタグのセットでは「番号ありリスト(Ordered List)」を作成することができます。

こちらも「番号ありリスト」の時と同様、liタグを使って箇条書きの1つ1つの文を囲い、その全体をolタグで囲ってあげます。

ul、olタグを使う際に注意しなければいけないこと

ul・olタグの直下にはliタグしか入れてはいけない

箇条書きリストは、ul・olタグの直下にはliタグしか入れてはいけないことになっています。

その為、例えば上の例のように箇条書きの文にaタグを使ってハイパーリンクを付けてあげたい場合はliタグの中にaタグを配置するようにしましょう。

リストタグ(ul・ol・liタグ)とaタグを一緒に使用するパターンはよくあるので、この点注意しましょう。

リストマーカーを変更する方法

デフォルトでは「番号なしリスト」の場合は黒丸、「番号ありリスト」の場合は数字が先頭に表示されています。

この表記を変更したい場合は、CSSでlist-style-typeプロパティを指定する必要があります。

list-style-type:circleで白丸に変更した例

■list-style-typeプロパティの指定

上の例では「 list-style-type: circle;」を設定してデフォルトで付いていた黒丸が白丸に変更されているのが分かります。

list-style-type:lower-romanでローマ数字に変更した例

「番号ありリスト」の数字を小文字のローマ数字に変更することも可能で、その場合は「list-style-type: lower-roman;」を指定してあげればOKです。

list-style-type:noneでリストマーカーを消した例

list-style-typeプロパティの値を「none」にするとリストマーカーを消してあげることも可能です。

ヘッダーのナビゲーションとしてul・liタグを利用する場合などに、リストマーカーを消したい際に利用することもあります。

■(参考)list-style-typeプロパティのその他の値

 
関連CSSの書き方・基本ルールを解説

ul・ol・liタグが実際に使用されている活用例

リストタグ(ul・ol・liタグ)の基本的な使い方について分かったところで、最後に実際に使用されている活用例をいくつか紹介します。

他にも様々な場面で使用されていますが、よく見かけるリストタグの活用例は以下の3点です。

活用例1: 目次

1つ目の活用例は「目次」です。

上の例では「大見出し」のみの比較的シンプルな目次を作成していますが、「中見出し」も含めた目次を作成したい場合はliタグの中に新たにulタグを追加してあげることで作成することが可能です。

なお、ページ内の指定の箇所に飛ばすにはaタグでページ内リンクを設定します。詳しくは「ページ内リンク | <a href=" ">」をご参照ください。

文法的にはulタグの直下にはliタグしか配置できませんが、liタグの中であればaタグや新たなulタグを配置できます。

活用例2: ナビゲーションメニュー

※実際に使われるよりも簡素なcssサンプルで掲載しています。

2つ目の活用例は「ナビゲーションメニュー」です。

こちらのナビゲーションもulタグ・liタグでマークアップし、デフォルトで付いているリストマーカーを非表示にしておくことで作成されていることが多いです。

活用例3: ギャラリー

3つ目の活用例は「ギャラリー」です。

こちらはテキストによる箇条書きではありませんが、関連性・規則性のある要素であればテキストでなくてもリストタグを使用することができます。

まとめ

まとめです。今回は記事の前半部分でリストタグ(ul・ol・liタグ)を使った箇条書きリストの作り方と実際の活用例をいくつか紹介しました。

箇条書きを利用する際は、ぜひul・ol・liタグを使ってみましょう。

今回は以上になります。最後までご覧頂き、ありがとうございました。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。