サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

リストの挿入(olタグ・ulタグ)

リストの挿入(olタグ・ulタグ)

この記事にはプロモーションが含まれています。

たとえば料理のブログサイトでは、材料や作り方の手順をリストにまとめて掲載することも多いかと思います。
その他にも、コーポレートサイトでは事業内容や提携企業をリストで表したりなど、Webサイトでは色々なところでリストが使われています。
リストは表(tableタグ)と違って、何行何列とか気にしなくても良いので初心者でも使いやすく、スマホ表示でも見やすいというメリットもあります。

ブログサイトであれ、コーポレートサイトであれ、情報の整理・掲載に欠かせないリストの挿入について解説していきます。

– 目次 –

HTML -リストの挿入-

olタグとulタグ

HTMLのリスト挿入タグは2種類あります。

1つは、順番や手順を説明するための番号付きリスト。
orderd listの略で<ol>タグを使います。
リストのイメージは以下のような感じです。

  1. 卵を割ってボールに入れる
  2. よくかき混ぜる
  3. 砂糖を大さじ1杯加える

よくかき混ぜる前に砂糖を入れた方が…というツッコミはさておき、上のサンプルのように、順序立てて説明する場合に使用するリストです。
また、olタグを使うとブラウザがデフォルトでリスト項目の前に番号をつけてくれます。(CSSでlist-style-typeと呼ばれるプロパティに該当します)
※ただし、この仕様が邪魔になることが多いので、リセットCSSを読み込ませて番号表示を消すこともよくあります。

用語解説:リセットCSS(Reset CSS)

そしてもう1つが、順番が関係ない、情報を列挙するためのリスト。
こちらはunorderd listの略で<ul>タグを使います。具体例を示しておくと、以下のような感じです。

  • ボール
  • 砂糖大さじ1杯

このように、準備するもをリスト形式で一覧表示したり、順序が重要ではないリストとして使いたい場合に使用します。

ulタグを使ったリスト挿入では、ブラウザがデフォルトで番号のない○印などのマークを(勝手に)つけてくれます。
ただし、WordPressなどのCMSで何かしらのテーマをお使いの方は、テーマの方でリセットCSSを読み込んでいる可能性があるため、ol/ulタグを使ってもリストマークがつかない可能性があります。

    POINT!
  1. ・HTMLのリスト挿入タグには2種類ある!
  2. ・順序の説明など、順番が重要なリストの場合はolタグを使う!
  3. ・逆に順番が重要ではない、情報の列挙などのリストの場合はulタグを使う!

ol・ulタグの基本的な使い方

リストの種類と違いを把握したところで、今度は実際にHTMLでタグを挿入していきましょう。
olタグもulタグも、種類が違うというだけで使い方は同じです。

基本的な使い方としては、ul/ulタグの中にli(リスト)タグを入れるだけなのでとても簡単です。
例えば、前章でサンプルとして紹介したリストですが、HTMLは以下のようなシンプルな構造になっています。

  <ol>
    <li>卵を割ってボールに入れる</li>
    <li>よくかき混ぜる</li>
    <li>砂糖を大さじ1杯加える</li>
  </ol>

注意点ですが、ol/ulタグは開始はもちろん終了タグの省略はできないので、忘れずに終了タグで閉めるようにしましょう。
liタグは条件次第で省略可能ですが、省略すると逆にコードが見づらくなる場合もあるので、省略できる場合でも基本的には終了タグをつけた方が良いと思います。

また後の章(リストの入れ子)で詳しく説明しますが、基本的にul/olタグの中にはliタグしか入れられないという点は押さえておきましょう。
制限が厳しいol/ulタグとは対照的に、liタグの中には様々なタグを含めることができます。

ちなみにですが、リセットCSSを読み込ませていない環境で以下のようにHTMLコードを書き込んでしまうと…

  <ol>
    <li>1.卵を割ってボールに入れる</li>
    <li>2.よくかき混ぜる</li>
    <li>3.砂糖を大さじ1杯加える</li>
  </ol>

下のようになってしまうので、気をつけましょう。

  1. 1.卵を割ってボールに入れる
  2. 2.よくかき混ぜる
  3. 3.砂糖を大さじ1杯加える

ブラウザがデフォルトで表示してくれるリストマークを利用する場合は、リストマークとなる数字や記号(・など)を入力しないでおくことがポイントになります。

    POINT!
  1. ・基本的な使い方は、ol/ulタグの中にリスト項目としてliタグを挿入する!
  2. ・ol/ulタグは終了タグが省略できない(liタグは条件次第で省略可能)!
  3. ・リセットCSSを利用しない場合、項目の前に番号や記号はつけないでおく!

リストの入れ子

ol/ulタグの中には基本的にliタグしか入れられません(scriptタグなどは例外)。
つまり、次のようにリストを入れ子にしたコードはHTML上、誤ったコードということになります。

    <!-- 間違ったリストの入れ子 -->
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <ul>
        <li>サブリスト1</li>
        <li>サブリスト2</li>
      </ul>
    </ul>

実は、上の間違った構造のリストの入れ子でも、表示エラーなどが起こるわけではありません。
ただ、やはりできるだけ正しいコードで記述するのが望ましいと言えます。

リストを入れ子にする…例えばulタグの中にulタグを入れたい場合、以下のようにコードを記述します。

    <!-- 正しいリストの入れ子 -->
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li><!-- 終了タグで閉じない -->
        <ul>
          <li>サブリスト1</li>
          <li>サブリスト2</li>
        </ul>
      </li><!-- ここで終了タグ -->
    </ul>

liタグの中には色々なタグを入れることができるので、liタグの中にulタグを入れ込むことで、リストを入れ子にすることができます。
ちなみに、ブラウザによって挙動は異なりますが、入れ子にしたリストは以下のような表示になります。

  • リスト1
  • リスト2
    • サブリスト1
    • サブリスト2

メインメニュー>サブメニューなど、リストを入れ子にしたい場合は少なくないので、リストタグの入れ子ルールはしっかり押さえておきましょう!

    POINT!
  1. ・ol/ulタグの中に直接ol/ulタグは入れられない!
  2. ・liタグの中にol/ulタグを入れ込むことで、リストを入れ子にできる!

CSSでデフォルトのリストマークを消す

この記事カテゴリはHTMLなのでCSSにはあまり触れないでおきますが、デフォルトで表示されるリストマークを消すためのCSSだけ、ここでご紹介しておきます。

というのも、HTML/CSSを学び始めたばかりという方にとって、リストの挿入で最も困るのは、リストマークがデフォルトで勝手についてしまうという点だと思うからです。

リストマークを非表示にするには、list-style: none;という設定を加えたらOKです。

    <ul style="list-style: none;">
      <li>卵</li>
      <li>ボール</li>
      <li>砂糖大さじ一杯</li>
    </ul>

  • ボール
  • 砂糖大さじ一杯

デフォルトでついてしまうリストマークさえ消してしまえば、自前で『・』や『◆』、『(1)』などを自由に付け足すことができるようになります。
CSSではリストマークを消すだけでなく他のリストマークに表示変更することもできるのですが、用意されているリストマークはそんなに種類が多くありません。
なので、リストマークを消して自前でテキストとしてマークや記号を入力した方が自由度が高く、便利だと個人的には思います。
(下のサンプル参照)

    <ul style="list-style: none;">
      <li>*卵</li>
      <li>*ボール</li>
      <li>*砂糖大さじ一杯</li>
    </ul>

  • *卵
  • *ボール
  • *砂糖大さじ一杯
    POINT!
  1. ・デフォルトでつくリストマークはCSSで消すことが可能!
  2. ・ol/ulタグまたは個々のliタグにlist-style: none;という設定を加えればOK!
  3. ・デフォルトのリストマークを消したら、自前でテキストとしてマークや記号をつけることもできる!


今回の動画で紹介したコード!

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div style="height: 300px;"></div>

    <ol>
      <li>卵を割る</li>
      <li>よくかき混ぜる</li>
      <li>砂糖を大さじいっぱい加える</li>
    </ol>

    <div style="height: 300px;"></div>

    <ul>
      <li>卵</li>
      <li>ボール</li>
      <li>砂糖大さじ一杯</li>
    </ul>

    <div style="height: 300px;"></div>

    <!-- 間違ったリストの入れ子 -->
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <ul>
        <li>サブリスト1</li>
        <li>サブリスト2</li>
      </ul>
    </ul>

    <div style="height: 300px;"></div>

    <!-- 正しいリストの入れ子 -->
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li><!-- 終了タグで閉じない -->
        <ul>
          <li>サブリスト1</li>
          <li>サブリスト2</li>
        </ul>
      </li><!-- ここで終了タグ -->
    </ul>

    <div style="height: 300px;"></div>

    <ul style="list-style: none;">
      <li>・卵</li>
      <li>・ボール</li>
      <li>・砂糖大さじ一杯</li>
    </ul>

    <div style="height: 300px;"></div>

  </body>
</html>


« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン