【HTML入門】liタグの意味や使い方を理解して箇条書きをマスターしよう！

2024年3月1日

かい

みなさんこんにちは！

HTMLで箇条書きを表現したいときってありますよね。

そこで、本日は

ulタグ
olタグ
liタグ
それぞれの使い方
liタグの点の消し方

ということについて解説していこうと思います！

こちらは、HTMLでコーディングを行う上で必須のスキルですので実際に自分でコードを書いて動かしたりしてみてマスターしていきましょう！

なお、次の記事ではそもそもHTMLとは何なのか、その特徴やできることを詳しく解説しているので良ければ参考にしてください。

→ HTMLとは？基本のタグやできることを初心者向けにわかりやすく解説

liタグとは

さて、実際の開発現場でもよく使われるliタグですが、「li」はList Itemの略です。意味のとおり、リスト形式の中のアイテム、即ち箇条書きの中身を表現できます。

しかし、liタグは中身を表現するだけなのでどのような箇条書きのタイプであるかを表すHTMLとセットで使う必要があります。

箇条書きのタイプには2つありますので、1つずつみていきましょう。

ulタグとセットで使ってみよう！

さて、実際に使用方法を見ていきたいところなのですがliタグを使うには注意点があります。

それは、上でも挙げたようにliタグは中身なので単体では使わないということです。

ここでは、ulタグとはセットで使ってみましょう。

ulタグとはUnordered Listの略で名前の通り順番のないリストを表します。

イメージとしてはulタグで、順序なしリストを定義してliタグでその中身を定義していくという感じです。

実際に使ってみましょう。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
<ul>
    <li>りんご</li>
    <li>ばなな</li>
    <li>みかん</li>
</ul>
    </body>
</html>

このようにulタグの中に入れ子構造のようにliタグをほしい数分書いていけばよいです。

きちんとリストになっていますね。

また、brタグで見た目が同じ状態を作ることもできますが、それはHTMLの使い方としては間違っていて、内部SEO的にも良くないので絶対にやめましょう。

olタグとセットで使ってみよう！

さて、先程は順序なしのリストを紹介しました。

という事はもうわかりますよね？　残りは順序有りのリストです。

olタグとはOrdered Listすわなち順序の有るリストのことを指します。こちらを使うと番号が付与された箇条書きを表現することができます。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
<ol>
    <li>りんご</li>
    <li>ばなな</li>
    <li>みかん</li>
</ol>
    </body>
</html>

ulタグと同じように、olタグの中にliタグを入れてやると、

画像のように番号付きのリストが表示されます。

liタグの点を消してみよう！

さて、liタグを使う人の中には自動で付与される”・”、このリストマークを消したいという人もいると思います。

そんなときは、

<!DOCTYPE html>
<html lang="ja" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
<ul style="list-style: none;">
    <li>りんご</li>
    <li>ばなな</li>
    <li>みかん</li>
</ul>
    </body>
</html>

このように、スタイルをかけてやることで、消すことができます。