ulタグ 順序なしリスト

catnose catnose · に最終更新

HTMLの<ul>ユーエルタグは、順序なしのリスト（箇条書き）を作るために使います。言い換えると、項目の並び順を入れ替えても、問題のないリストに使います。

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>もも</li>
</ul>

👆<ul>は、いつでも<li>タグと合わせて使います。

✍️名前の意味

ulは「Unordered List」（アンオーダード・リスト）の略です。「ordered」は「順序づけられた」という意味です。否定の「Un」がつくことで「順序のない」という意味になります。

なおliは「List Item」（リスト・アイテム）の略です。

目次
このページの目次

ulタグの使い方

各項目にはliタグを使う

<ul>だけではリストは成り立ちません。<ul>はリスト全体を表し、各項目には<li>タグを使います。

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>もも</li>
</ul>

👆<ul>で全体を囲み、項目の数だけ<li>を入れます。

ulの直下にはliタグだけ

<ul>内のタグの使い方には決まりがあります。それは「<ul>の直下には<li>タグしか使えない」ということです。

🚫間違ったHTML
<ul>
  <h1>おいしい果物</h1><!-- 🙅 -->
  <p>わたしが好きな果物は、以下の2つです。</p><!-- 🙅 -->
  <li>りんご</li>
  <li>みかん</li>
</ul>

👆<ul>のすぐ下に見出しタグや段落タグを置いているので間違ったHTMLです。

😊正しいHTML
<h1>おいしい果物</h1>
<p>わたしが好きな果物は、以下の3つです。</p>
<ul>
  <li>りんご</li>
  <li>みかん</li>
</ul>

👆<ul>のすぐ下には、リストの項目である<li>だけを使うことができます。見出しや段落はリストの外に出しましょう。

😊正しいHTML
<ul>
  <li><a href="https://○○">りんご</a></li>
  <li><img src="https://○○" alt="りんごの画像"></li>
</ul>

👆<li>の中には、アンカータグや画像タグなどを自由に入れることができます。「<ul>の直下はダメだけど、<li>の中ならOK」というわけです。

ulとolの使い分け方

HTMLには<ul>と同様に、リストを作るための<ol>タグがあります。これらの違いは以下です。

ul
項目の並び順を入れ替えても、意味が変わらないリスト。
ol
項目の並び順が重要な意味を持つリスト。「1, 2, 3...」という番号付きのリストを作るならこっち。

olの使いどころ

<h2>好きな果物ランキング</h2>
<ol>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ol>

👆たとえば「ランキング」や「手順」のリストを作るなら、順番が大切なので<ol>ですね。ブラウザではデフォルトで、各項目の先頭に数字が表示されます。

ulの使いどころ

<h2>好きな果物</h2>
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

👆こちらの例だと、順番が入れ替わっても意味が変わらないので<ul>を使います。デフォルトでは<ul>内の各項目の先頭には「黒い点」が表示されます。

<ol>タグの使い方は、下記のページで詳しく解説しています。

関連するページを読む
olタグ（順序ありリスト）の使い方 - HTML
開く

ulを入れ子にする

リストの中には、別のリストを入れることができます。

😺「○○の中に○○を入れる」ようなことを「ネストする」や「入れ子にする」などと言います。

<h2>好きな食べ物</h2>
<ul>
  <li>焼き肉</li>
  <li>ラーメン</li>
  <li>
    スイーツ
    <ul>
      <li>プリン</li>
      <li>マカロン</li>
    </ul>
  </li>
</ul>

👆ある項目についてより細かいリストアップが必要なときに、リストを入れ子にします。

リストを入れ子に

リストを入れ子にするには、単純に<ul>の中に、別の<ul>を入れればOKです。オレンジの枠が「子リスト」ですね。

liの中のulを入れる

<li>の部分を詳しく見てみます。このように<li>の中に<ul>を入れます。この<li>の中には「テキスト（=スイーツ）」と「子リスト」の2つが入ることになります。

入れ子の数には制限はないので、好きなだけ入れ子にすることができます。

ulの中にolを入れることも

<ul>の中に<ol>を入れたり、<ol>の中に<ul>を入れたりもできます。

<ul>
  <li>焼き肉</li>
  <li>
    スイーツ
    <ol>
      <li>プリン</li>
      <li>マカロン</li>
    </ol>
  </li>
</ul>

<ol>
  <li>焼き肉</li>
  <li>
    スイーツ
    <ul>
      <li>プリン</li>
      <li>マカロン</li>
    </ul>
  </li>
</ol>

ulの使いどころ

Webページにおいて、<ul>は箇条書きだけでなく、さまざまなところで使われています。たとえば「メニュー」にはよく<ul>が使われます。複数の項目が並ぶので、リストタグが意味合い的にベストなのです。

例えばGoogleにはこのようなメニューがあります。このメニューには<ul>と<li>が使われています。

具体的には、メニュー全体が<ul>で囲まれており、各リンクには<li>が使われています。
※1つ1つのオレンジの枠ごとに<li>が使われています。

これまで紹介してきたリストとは見た目が全く違うので「同じリスト？」と混乱するかもしれません。見た目はCSSで自由に変えることができます。リストの記号を消すことも、レイアウトを変えることもできるのです。

複数の項目のまとまりには積極的にリストを使おう

Googleのメニューの例は、リストタグを使わなくても実現できます。たとえば、<ul>と<li>を、全部<div>タグに置き換えても、CSSを調整すれば全く同じ見た目にできます。

しかし、<ul>を使えば、HTMLを見たときに「リスト＝複数の項目のまとまり」だということがすぐに分かります。言い換えると、自分やチームンバーが後から見たときに編集が楽になります。

HTMLで複数の項目が並ぶようなモノを作るときには、積極的に<ul>や<ol>を使いましょう。

CSSでリストのデザインを変更する

<ul>のリストはデフォルトでは以下のように表示されます。

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

👆各項目の前に「黒い点」がつくわけですね。これは、ブラウザによりあらかじめul { list-style-type: disc }が指定されているからです。

✍️CSSのlist-style-typeは、リストに表示される記号の種類を決めるプロパティです。値をdiscにすると「黒い点」が表示されます。

点を消す

ul {
  list-style-type: none;
  padding: 0; /* 左にできる隙間を消す */
}

👆CSSでulに対してlist-style-type: noneを指定すると、リストの記号（点）を消すことができます。記号を消すと、そのぶん左側がぽっかりと空くので、paddingプロパティで隙間を消しておくのが良いでしょう。

✍️この例のようにul { ~ }と書くと、そのCSSが読み込まれるページ内すべての<ul>に適用されます。つまり、すべての<ul>の記号が消える可能性があることに注意しましょう。

特定のリストのスタイルだけを変える

.my-list {
  list-style-type: none;
}

👆たとえば、一部のリストの記号だけ消したい場合は、次のようにすればOKです。

  • HTMLで<ul>タグに何らかのクラス名を指定しておく（ここでは<ul class="my-list">）
  • CSSでそのクラスに対して記号を消すように指示する

このように、クラス名を使って一部のリストだけスタイルを変えることが可能です。

別の記号にする

list-style-typeでは、さまざまな記号が用意されています。

黒い点（disc）

ul {
  list-style-type: disc;
}

ブラウザでは、デフォルトでこの値が指定されているため、ここでは指定しても表示は変わりません。

白丸（circle）

ul {
  list-style-type: circle;
}

👆値をcircleにすると、記号が「白丸」になります。

四角（square）

ul {
  list-style-type: square;
}

👆値をsquareにすると、記号が「四角」になります。

入れ子のリストの見た目を変える

リストを入れ子にした場合、デフォルトでは以下のように表示されます。

<ul>
  <li>焼き肉</li>
  <li>
    スイーツ
    <ul>
      <li>プリン</li>
      <li>マカロン</li>
    </ul>
  </li>
</ul>

👆子リストでは、記号が「白丸」になります（もう一段階入れ子にすると「四角」になります）。

ul ul {
  list-style-type: disc; /* 黒い点に */
  padding-left: 20px;/* 左側の余白 */
}

👆入れ子になったリストのスタイルを変えるときは、このように指定します。「ulの中のulに対して…」という指定ですね。この例では、子リストでも記号が「黒い点」になるようにしました。

子リストまわりの余白もpaddingで調整できます。

✍️その他の指定

  • 孫リストのスタイルを変えたいときはul ul ul { ~ }と指定します
  • 子リストが<ol>のときはul ol { ~ }というように指定します

カラフルな点にする

リストの記号の色を変えるにはちょっと工夫が必要で、以下のようにします。

  • デフォルトのリストの記号を消す
  • CSSの疑似要素でリストの項目の前にカラフルな点を表示
ul {
  list-style-type: none; /* 記号を消す */
  padding: 0; /* 余計な余白を消す */
}
ul li {
  position: relative; /* 位置調整 */
  padding-left: 1em; /* 点が配置されるスペース */
}

/* 疑似要素で点を表示 */
ul li:before {
  content: '';
  position: absolute; /* 位置調整 */
  left: 0; /* 位置調整 */
  top: .5em; /* 位置調整 */
  width: 7px; /* 幅 */
  height: 7px; /* 高さ */
  border-radius: 50%; /* 円形に */
  background: #1da1ff; /* 背景色 */
}

横並びにする

メニューなどでリストを使う場合、横並びにしたいことがあります。横並びにするためにはliに対してdisplay: inline-blockを指定するのが良いでしょう。

.my-menu {
  list-style-type: none;
  padding: 0; /* 余白を消す */
  text-align: center; /* 中央寄せ */
}
.my-menu li {
  display: inline-block; /* 横並び */
}

/* リンクテキスト */
.my-menu li a {
  padding: 8px; /* テキスト周りの余白 */
  color: #FFF; /* 文字を白に */
  background-color: #333; /* 背景を黒に */
  text-decoration: none; /* 下線を消す */
}

👆少し複雑ですが、以下のようなことをしています。

  • ページ内すべての<ul>がすべてメニューになっては困るので、HTMLで<ul class="my-menu">というようにクラスを追加
  • my-menuクラスのリストに対して、CSSを指定
  • .my-menu li { display: inline-block }でリストを横並びに
  • メニューなので、HTMLでは<li>の中にリンク（<a>）を入れる
  • CSSで各リンクをボタンのような見た目に
HTMLの記事をもっと見る