HTML/CSS
css
html

【HTML】ulタグ、liタグとは？(具体的な使い方まで解説)

2021/04/12

( 更新日：2022/04/19 )

「HTMLを学習していてul、liというコードに出会ったけど使い方がよくわからない…。」そんなお悩みはありませんか？

安心してください。今わからなくても大丈夫です。

この記事では、HTMLのulタグとliタグの意味や使い方について解説していきます。

これから説明する内容を読んで、ulタグ、liタグについての理解を深めていきましょう。

まずは、ulタグとliタグの意味についてみていきましょう。

【HTML】ulタグ、liタグとは？

結論からいうと、「ulタグとliタグは、箇条(かじょう)書きをするためのHTMLのタグです」

Webページを書く上で、箇条書きをしたいときがたまにあります。

そういったときに、ulタグとliタグを使うと、簡単に箇条書きのスタイルにすることができます。

箇条書きのスタイルとは、「・(点)」+項目名がタテに並んでいる見た目のことです。

ちなみに、ulは「unordered list (順番のないリスト)」、liは「list (リスト)」の略になります。

※順番のあるリストをつくるタグも存在しますが、のちほど解説します。

「ulタグ、liタグは、箇条書きをするためのHTMLのタグ」ということをきちんと把握しておきましょう。

次に、ulタグ、liタグの使い方を具体的に見ていきましょう。

ulタグ、liタグの基本的な使い方(olタグも解説)

HTMLのコードにおいて、ulタグ、liタグは以下のように使います。

<ul>
  <li>イヌ</li>
  <li>ネコ</li>
  <li>ウサギ</li>
</ul>

上のようにulタグの中にliタグを入れるかたちでコードを書きます。

上記のコードを出力すると以下のようになります。

ulタグ、liタグにはさまれた部分が、箇条書きになっているのがわかります。

先ほど説明したとおり、ulは「unordered list (順番のないリスト)」の略なので、リスト項目の順番が入れかわっても大丈夫なときに使います。

逆に、リストの項目に順番をつけたい場合は、「olタグ」を使います。

olは「ordered list (順番をつけられたリスト)」の略です。

ulタグのかわりに、olタグを使ったときのコードを見ていきましょう。

コードを下のように書きます。

<ol>
  <li>イヌ</li>
  <li>ネコ</li>
  <li>ウサギ</li>
</ol>

先ほど<ul>と書いた部分を、<ol>に変えました。

このコードを出力すると以下のようになります。

上のように、ulタグを使用したときは「・(点)」だったところに数字があらわれました。

olタグを使うと数字つきのリストが表示されます。

これにより、リストの項目に順番をつけることができます。

以上より、ulタグのほかにolタグが存在することと、ulタグやolタグの中に、liタグを入れてコードを書くということがわかりました。

ulタグとliタグを実際に使うときのテクニック

ulタグとliタグを使う上で、工夫することがあります。

単にシンプルなリストをつくるだけだと、デザインが味気なくなることがあるためです。

例えば、リストの「・(点)」の部分のデザインを変更することができます。

黒の点を白くしたいときは以下のようにコードを書きます。

<ul type="circle">
  <li>イヌ</li>
  <li>ネコ</li>
  <li>ウサギ</li>
</ul>

ulに「type」の属性をつけ、その値を「circle (円)」とすることで、箇条書きの点が「白マル」になります。

他には点を四角くすることもできます。

<ul type="square">
  <li>イヌ</li>
  <li>ネコ</li>
  <li>ウサギ</li>
</ul>

ulに「type」の属性をつけ、その値を「square (四角形)」とすることで、箇条書きの点が「黒の四角」になります。

さらには、点をなくすということもできます。

点をなくすときは、CSSの「list-style」プロパティを「none」にします。

<ul>
  <li>イヌ</li>
  <li>ネコ</li>
  <li>ウサギ</li>
</ul>

ul li {
  list-style: none;
}

上のようにリストの「・(点)」がなくなっているのが分かります。

「・(点)」を使わない場合でもリスト的な意味がある場合に、点を非表示にします。

こうすることで、点がつかない場合でもリストとしての意味を付与することができ、SEO(検索エンジン最適化)に役立ちます。また、コードとしても読みやすくなります。

リストの点をなくす例として、例えば、ナビゲーションバーの項目を、ulタグとliタグを使って書いたりします。

<nav>
  <ul>
    <li><a href="">ホーム</a></li>
    <li><a href="">サービス紹介</a></li>
    <li><a href="">最新情報</a></li>
    <li><a href="">お問い合わせ</a></li>
    <li><a href="">ブログ</a></li>
  </ul>
</nav>

nav {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: lightgray;
  border-bottom: 1px solid dimgray;
}
ul {
  margin-top: 31px;
  display: flex;
}
ul li {
  list-style: none;
  margin-right: 20px;
}
ul li a {
  text-decoration: none;
  color: black;
}