スライドショー

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

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つのステップで理解しよう
更新日 : 2019年7月11日

まとめ

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

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

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

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

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

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

それでは!!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

かい

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説