HTML の第一歩 — レッスン 3 — リストタグ ul、ol。HTML タグの属性。

04/12/2019, by Ivan

サイトではリストが非常によく使われます。メニューで、テキストで何かを列挙するために。最も人気のあるリストの種類、番号なしリスト <UL></UL>（unordered list — 番号なしリスト）から始めましょう。

UL リスト

UL リストはメニューや箇条書きリストに使われ、HTML を通じてマーカーの見た目を指定できます。

HTML コードを変更しましょう。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
	<ul>
	</ul>
  </body>
</html>

リストが空なのでドキュメントには見出しだけが表示されます。項目を追加しましょう。項目には <LI></LI>（list item — リスト項目）タグを使用します。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
	<ul>
	  <li>最初の項目</li>
	  <li>2 番目の項目</li>
	  <li>3 番目の項目</li>
	</ul>
  </body>
</html>

これで箇条書きリストが表示されます。マーカーの見た目は <UL> タグの属性で変更できます。

HTML タグの属性

上で書いたように、UL タグには属性があります。属性はすべての HTML タグにあります。後ですべての属性を見ますが、今は属性とは何かを整理しましょう。属性は HTML タグの表示を制御できます。色、サイズ、形など。UL タグには、マーカーの見た目、円、円周、正方形を指定できます。

属性は次のような形です。

<タグ 属性="属性の値">

このように、タグに直接このタグをどう表示するかを書きます。UL タグでは属性は type と呼ばれます。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
	<ul type="square">
	  <li>最初の項目</li>
	  <li>2 番目の項目</li>
	  <li>3 番目の項目</li>
	</ul>
  </body>
</html>

ブラウザでページを更新すると、リストが正方形（square — 正方形）でマークされているのがわかります。円周でマークすることもできます。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
	<ul type="circle">
	  <li>最初の項目</li>
	  <li>2 番目の項目</li>
	  <li>3 番目の項目</li>
	</ul>
  </body>
</html>

リストでさまざまなマーカーを使えますが、その場合、li タグにも type 属性を指定する必要があります。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
	<ul type="circle">
	  <li>最初の項目</li>
	  <li type="square">2 番目の項目</li>
	  <li>3 番目の項目</li>
	</ul>
  </body>
</html>

デフォルトでは、UL、LI タグでは円の type disc が使用されます。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
    <ul type="disc">
      <li>最初の項目</li>
      <li type="square">2 番目の項目</li>
      <li>3 番目の項目</li>
    </ul>
  </body>
</html>

では、UL タグの type 属性を削除して、何が起こるか見てみましょう。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
	<ul>
	  <li>最初の項目</li>
	  <li type="square">2 番目の項目</li>
	  <li>3 番目の項目</li>
	</ul>
  </body>
</html>

では、3 つの項目すべてを異なるマーカーにしましょう。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
	<ul>
	  <li type="disc">最初の項目</li>
	  <li type="square">2 番目の項目</li>
	  <li type="circle">3 番目の項目</li>
	</ul>
  </body>
</html>

これでタグの属性をどこに書くかがわかったと思います。この先、さらに多くのさまざまな属性を見ていきます。

OL リスト

OL タグ（ordered list — 番号付きリスト）は UL ほど普及していませんが、動作の順序、出来事の年表、オブジェクトの番号付けなどを出力する必要があるときにも非常によく使われます。行に番号を付ける必要があるところではどこでも OL タグを使えます。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
	<ol>
	  <li>最初の項目</li>
	  <li>2 番目の項目</li>
	  <li>3 番目の項目</li>
	</ol>
  </body>
</html>

UL タグと同様に OL にも type 属性がありますが、この属性の値は ul とは異なります。

type="A" — 大文字のラテン文字（大きな英語の A「エー」）;
type="a" — 小文字のラテン文字（小さな英語の a「エー」）;
type="I" — 大文字のローマ数字（大きな英語の I「アイ」）;
type="i" — 小文字のローマ数字（小さな英語の i「アイ」）;
type="1" — アラビア数字、デフォルトで使用されます。

OL タグの type 属性のさまざまなバリエーションを試してみてください。例を 1 つだけ挙げます。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
	<ol type="i">
	  <li>最初の項目</li>
	  <li>2 番目の項目</li>
	  <li>3 番目の項目</li>
	  <li>4 番目の項目</li>
	</ol>
  </body>
</html>

パレット - カラフルに🎨

HTML の第一歩 — レッスン 3 — リストタグ ul、ol。HTML タグの属性。

UL リスト

HTML タグの属性

OL リスト

Let’s talk