【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の関係とは?基本的な書き方を4つのステップで理解しよう
更新日 : 2020年6月19日

まとめ

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

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

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

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

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

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

それでは!!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

かい

かい

日向徹かこよすぎか

[email protected]