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

みなさんこんにちは!

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>

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

きちんと消えていますね。

別途CSSファイルでスタイルを統一している場合はそちらで書きましょう。

HTMLファイルとCSSファイルの切り離し方など詳しいことは以下のリンクに書いてあるのでわからない方はこちらをみてみてください。

HTML/CSSとは?初心者向けの基礎知識と学習サイト5選
更新日:2024年5月6日

まとめ

いかがでしたでしょうか。

本日は、liタグ、ulタグ、olタグの意味や使い方を説明してきました。

liタグのリストマークを消すには、そのようなスタイルをかけてやるんでしたね。

HTMLやプログラミングでは省略されている英語の意味を理解することで覚えやすくなったり、正しい使い方を捉えられるようになったりします。

なので、略称を調べてその意味を理解することはとても有効でな勉強法なので初学者の方はその癖をつけるようにしておきましょう。

本日紹介した内容、特にulタグ、liタグのセットは頻繁に使うので意味をしっかり理解して確実に使えるようにしておきましょう!

それでは!!

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次