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

みなさんこんにちは!

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

そこで、本日は

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

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

こちらは、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選
更新日 : 2020年7月15日

まとめ

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

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

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

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

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

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

それでは!!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー