みなさんこんにちは！
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ファイルの切り離し方など詳しいことは以下のリンクに書いてあるのでわからない方はこちらをみてみてください。
まとめ
いかがでしたでしょうか。
本日は、liタグ、ulタグ、olタグの意味や使い方を説明してきました。
liタグのリストマークを消すには、そのようなスタイルをかけてやるんでしたね。
HTMLやプログラミングでは省略されている英語の意味を理解することで覚えやすくなったり、正しい使い方を捉えられるようになったりします。
なので、略称を調べてその意味を理解することはとても有効でな勉強法なので初学者の方はその癖をつけるようにしておきましょう。
本日紹介した内容、特にulタグ、liタグのセットは頻繁に使うので意味をしっかり理解して確実に使えるようにしておきましょう！
それでは！！
