リスト作成に使用できるタグ

概要

ベッド専門通販サイト「イーベッド」をご利用いただきありがとうございます。

htmlの続きをしていきます。
今回はリスト作成に使用できるタグを覚えていきます。

箇条書き・番号付きリストを作成する際に活躍するので覚えておきましょう。

<li>タグ、<ul>タグ

例として果物の名前を羅列する場合、「<li>Apple</li>」「<li>Banana</li>」となります。
<li>タグは、「List item」の略です。

<ul>タグで囲ってあげれば箇条書きになります。
<ul>タグは「Unorderer List」の略です。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
</head>
<body>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<p>こんにちは</p>
</body>
</html
完成したらブラウザで確認してみましょう。

<ol>タグ

<ol>タグを使用すれば番号付きで表示されます。
<ol>タグは、「Ordered List」の略になります。

コメントタグの中には、忘れないようにそれぞれの意味を記入しています。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
</head>
<body>
<ul><!-- Unorderer List -->
<li>Apple</li><!-- List item -->
<li>Banana</li>
</ul>
<ol><!-- Ordered List -->
<li>Apple</li>
<li>Banana</li>
</ol>
<p>こんにちは</p>
</body>
</html>

まとめ

  1. <li>タグで羅列。
  2. <ul>タグで箇条書き。
  3. <ol>タグで番号付き。
今回覚えたタグを使用すれば、このように簡単なリストを作成することができます。

次回は、仕事などでも活用できる「表組み」で使用するタグを覚えていこうと思います。

今後もベッド専門通販サイト「イーベッド」をよろしくお願いします。