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

本記事は広告が含まれる場合があります HTML

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

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

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

ulタグ・liタグを使った番号なしリストの使い方解説図。
■順番ありの箇条書き(ol・li)

olタグ・liタグを使った番号ありリストの使い方解説図。


 

 

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

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

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

 

ul・ol・liの意味

ul・ol・liはそれぞれ下のように英単語の頭文字を取ってできています。

  • ul = Unordered List(和訳: 順序のないリスト)
  • ol = Ordered List(和訳: 順序のあるリスト)
  • li = List Item(リスト)

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

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

ulタグ・liタグを使った番号なしリストの使い方解説図。

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

番号なしリストの表示例。

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

liの数は好きなだけ増やすことが可能。

 

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

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

olタグ・liタグを使った番号ありリストの使い方解説図。

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

番号ありリストの表示例。

 

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

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

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

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

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

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

 

ポイント(箇条書きリストの作り方)

  • ul・liタグで「番号なしリスト(Unordered List)」を作成できる
  • ol・liタグで「番号ありリスト(Ordered List)」を作成できる
  • 項目1つ1つをliタグで囲いその上をulタグ(またはolタグ)で囲うようにする
  • ul・olタグの直下にはliタグしか入れてはいけない
  • liタグの中にはaタグやimgタグなど色々なタグを挿入できる

 

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

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

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

ul・olタグにデフォルトで付いているリストマーカー。
 

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

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

 

 
「list-style-type: circle;」と設定した場合のデモ。
 

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

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

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

 

 

「list-style-type: lower-roman;」と設定した場合のデモ。
 

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

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

 

 

「list-style-type: none;」と設定した場合のデモ。

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

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

設定項目 設定値
disc(ulタグの初期値) 黒丸
circle 白丸
square 黒色の四角
decimal(olタグの初期値) 普通の数字
lower-roman 小文字のローマ数字
upper-roman 大文字のローマ数字
cjk-ideographic 漢数字
none リストマーカーを非表示にする

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

 

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

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

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

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

  • 活用例1: 目次
  • 活用例2: ナビゲーションメニュー
  • 活用例3: ギャラリー

 

活用例1: 目次

活用例1: 目次

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

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

 

「中見出し」まで含む目次。

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

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

 

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

活用例2: ナビゲーションメニュー
※実際に使われるよりも簡素なcssサンプルで掲載しています。

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

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

 

活用例3: ギャラリー

活用例3: ギャラリー

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

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

 

 

まとめ

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

ポイント(箇条書きリストの作り方)

  • ul・liタグで「番号なしリスト(Unordered List)」を作成できる
  • ol・liタグで「番号ありリスト(Ordered List)」を作成できる
  • 項目1つ1つをliタグで囲いその上をulタグ(またはolタグ)で囲うようにする
  • ul・olタグの直下にはliタグしか入れてはいけない
  • liタグの中にはaタグやimgタグなど色々なタグを挿入できる

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

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

 

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

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

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

詳細はこちら

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

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

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

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-HTML