【HTML】ul(順序なしリスト)とol(順序付きリスト)の使い方と使用例

ul(Unordered List: 順序のないリスト)要素は順序のないリストを表現する場合に使用します。

ul要素の子要素にli(List Item: リストアイテム)要素を記述し、項目を設定していきます。


<ul>
    <li>ホーム</li>
    <li>サービス概要</li>
    <li>料金</li>
    <li>アクセス</li>
</ul>
    
  • ホーム
  • サービス概要
  • 料金
  • アクセス

リストはul要素のみでは使用しません。必ずli要素と一緒に使用します

順序なしリストは、ナビゲーションによく使用されます。
例えば、次のようなナビゲーションバーにある右側のリンクは順序なしリストを使用しています。

Title
  • リンク
  • リンク
  • リンク

理解度チェック

  • ul要素とはどのような特徴を持つ要素ですか?
  • ul要素はどのような場面で使用されますか?

ol要素(順序付きリスト)について

ol(Ordered List: 順序付きリスト)は順序のあるリストを表現する場合に使用する要素です。

ul要素と同様に、ol要素の子要素にli要素を記述し、項目を設定します。


<ol>
    <li>肉と野菜を一口大にきります。</li>
    <li>フライパンにサラダ油をひいたら中火で肉を炒めます。</li>
    <li>野菜を加え、たまねぎが透き通るくらいまで炒めます。</li>
    <li>水を加えて15〜20分煮込みます。</li>
    <li>カレールーを加えて完全に溶かしながら10分煮込んで完成です。</li>
</ol>
    
  1. 肉と野菜を一口大にきります。
  2. フライパンにサラダ油をひいたら中火で肉を炒めます。
  3. 野菜を加え、たまねぎが透き通るくらいまで炒めます。
  4. 水を加えて15〜20分煮込みます。
  5. カレールーを加えて完全に溶かしながら10分煮込んで完成です。

ol要素内のアイテムの順序には意味があります。そのため、何らかの手順を示す際によく用いられます

理解度チェック

  • ol要素とはどのような特徴を持つ要素ですか?
  • ol要素はどのような場面で使用されますか?
  • li要素は主にどこで使用されますか?

入れ子(ネスト)にする

ul要素やol要素のアイテムに更にリストを作成することができます。

次の例では、li要素の中に入れ子(ネスト)にするリストのタイトルとリストを定義しています。


<ul>
    <li>
        HTMLの学習
        <ol>
            <li>ブラウザにhtmlファイルを表示する
                <ul>
                    <li>htmlファイルを作成する</li>
                    <li>ブラウザでファイルを開く</li>
                </ul>
            </li>
            <li>要素について学習する</li>
        </ol>
    </li>
    <li>CSSの学習</li>
    <li>JavaScriptの学習</li>
</ul>
    
  • HTMLの学習
    1. ブラウザにhtmlファイルを表示する
      • htmlファイルを作成する
      • ブラウザでファイルを開く
    2. 要素について学習する
  • CSSの学習
  • JavaScriptの学習

理解度チェック

  • 入れ子(ネスト)とはどのようなもののことを言いますか?

アイテムをa要素でリンクにする

リスト内のアイテムをa要素でハイパーテキストリンクにする例をご紹介します。

関連: 【HTML5】a要素でURLや電話番号、メールアドレスをリンクさせる


<ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス概要</a></li>
    <li><a href="#">料金</a></li>
    <li><a href="#">アクセス</a></li>
</ul>
    

この例では、各a要素のhref属性にシャープ(#)を設定していますが、実際にはそれぞれのURLを設定します。

理解度チェック

  • ol要素を使用してアイテムにリンクを設定してみましょう!

行頭記号のスタイル

行頭記号のスタイルはCSSを使ってドット、円形、四角形などに変更することができます。

CSSの基礎については次のページから学習できます。

  1. 【CSS】基礎から学ぶ!はじめてのCSS
  2. 【CSS】初心者必見!セレクタを理解しよう!(基礎編)
  3. 【CSS】初心者必見!セレクタを理解しよう!(子孫セレクタ編)
  4. 【CSS】初心者必見!セレクタの優先度を理解しよう!

list-style-type属性

行頭記号のスタイルを変更する場合はCSSのlist-style-type属性を使用します。

初期値はdiscで、黒丸です。

中空円を設定する例


ul {
    list-style-type: circle;  
}
    

<ul>
    <li>ホーム</li>
    <li>サービス概要</li>
    <li>料金</li>
    <li>アクセス</li>
</ul>
    
  • ホーム
  • サービス概要
  • 料金
  • アクセス

その他の値について

none

記号は表示されません。

  • ホーム
  • サービス概要
  • 料金
  • アクセス
square

塗りつぶされた四角形(■)です。

  • ホーム
  • サービス概要
  • 料金
  • アクセス
decimal

数値が上から順に振られます。1から始まります。

  • ホーム
  • サービス概要
  • 料金
  • アクセス
decimal-leading-zero

数値が上から順に振られますが、ゼロ埋めされます。数値は1から始まります。

  • ホーム
  • サービス概要
  • 料金
  • アクセス
lower-roman

小文字のローマ数字で表示されます。

  • ホーム
  • サービス概要
  • 料金
  • アクセス

上記の他にも設定可能な値は複数あります。

値について興味のある方はlist-style-type – CSS: カスケーディングスタイルシート | MDNをご覧ください。

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。