[15-1] リストを作ろう（ ul要素・li要素 ）

今回から リストを表示する要素 を使ってみましょう。
リストとは「買い物リスト」とか「リストアップ」の リスト（List）です。

リストを表示する要素は、下の3種類があります。

ul	番号無しリスト	Unordered List の略
ol	番号付きリスト（順番あり）	Ordered List の略
dl	説明リスト	Description List の略 （HTML5 で Definition から Description に変更）

ちなみに「Order（オーダー）」とは「順序」の意味。（注文じゃないよ）

今回は、この中の ul（Unordered List = 番号無しリスト）を使ってみよう。
<ul> によるリストは、順位が無い「箇条書き」的なリストです。

使用する要素	<ul> 〜 </ul> <li> 〜 </li>

ul 要素で「番号無しリスト」を作ろう

書き方は <ul>要素の中に <li>要素を入れるだけ。（ li は List Item の略です。）
<ul> の中に <li>要素は 必ず1個以上は入ってなきゃいけません。

<ul>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>

プレビューはこちら。

• リストアイテム
• リストアイテム
• リストアイテム

<li>要素のアタマに付いている「●」は リストマーカー（またはマーカー）と言います。
ブラウザのデフォルトスタイルのリストマーカーは ●（disc）です。

リストマーカーは CSSで変更します

<li>要素のリストマーカーは、CSSの list-style-typeプロパティに たくさんのスタイルが用意されています。
デフォルトの ●（disc）以外に変えたい場合は、CSSで指定します。

• disc （塗りつぶした円 =ブラウザデフォルト）
• circle（線で描いた円）
• square（塗りつぶした四角）
• none （なし）

上記はスタイルの一例です。
<ol>要素（番号付きリスト）で使用する「数字」なども <ul>要素で使うことができます。
他のマーカーは「はじめてのCSS」カテゴリーの
【17-2-2】リスト関連の要素のためのCSSプロパティ をご覧ください。

このように、<li>要素に list-style-typeプロパティで指定します。

li {
	list-style-type: circle;
	}

ある特定のリストだけ マーカーを変えたければ、<ul>要素に id名か class名を付けて特定し、その <li>要素に list-style-typeプロパティを指定します。
マーカーの指定は <li>要素でします。<ul>要素ではできません。

CSS はこちら。

ul#sample{
	margin: 0;
	}
ul#sample li {
	list-style-type: circle;
	}

HTML はこちら。

<ul id="sample">
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>

idとclassの違いについては「はじめてのCSS」カテゴリーの
【3】id とか classって何？（セレクタの「種類」を知っておこう）をご参照ください。

リストマーカーを「画像」や「任意のテキスト」にする方法もあります。
[15-4] リストマーカーを画像や任意のテキストに変更する方法 で説明します。

リストのブラウザデフォルトスタイル

リストは ブラウザのデフォルトスタイルで、左側にスペースが空くようになってます。
それは、親要素（ <ul>要素、または <ol>要素 ）に、ブラウザのデフォルトスタイルで 「padding-left」があるから。

また、<li>要素はデフォルトで リストマーカーが左にはみ出しています。
これは <li>要素にブラウザデフォルトで list-style-position: outside があるから。

リストを他の要素と左揃えにする（左のスペースをとる）には、
<li>要素に list-style-position: inside を指定してマーカーを引っ込ませ、
親要素に padding-left: 0 と指定して左側のスペースを無くします。

リストの CSSの詳細は、「はじめてのCSS」カテゴリーの
【17-2-2】リスト関連の要素のためのCSSプロパティ
に書いていますのでご覧ください。

次回予告

次回は、ol（番号付きリスト）を使ってみよう。
ul と違って順序があるので、順序を逆にしたり、途中から変えたりできます。
リストマーカーには「数字」がデフォルトで付くようになっています。