リストを覚えるよ
リスト関連のタグってわかりにくいし覚えにくくないですか？何種類もあるし。…まあ、そうも言っていられないので、頭に叩き込むべくまとめました。
3種類のリスト
今日扱うのは、
- 順序のあるリスト
- 順序のないリスト
- 定義・説明リスト
以上の3つです。まずはきちんとポイントを押さえて、理解します。そしたら簡単に覚えられるようになる（はず）。
ひとつずつ見ていきましょう。
<ol> 順序のあるリスト
<ol>タグはordered listの略で、順序のあるリストを作ります。orderd=順序をつけられたという意味。 リストの項目は、<li>タグで指定します。
順序に意味があるときに使います。順序を入れ替えても問題ないなら、<ul>タグにしておきましょう。
style属性
style属性で、リストマーカーの見ためを指定できます。 list-style-typeプロパティを使用。
例→大文字のローマ数字
style="list-style-type: upper-roman"
卵かけご飯の作り方
- ごはんと卵を用意します
- 卵をごはんに割り入れます
- お好みで醤油を少々たらします
- 召し上がれ！
start属性
start属性を使うと、リストの開始番号を指定できます。整理のみ。
reversed属性
reversed属性を使うと、リストの並び順が逆になります。 ただし、旧いバージョンのブラウザではサポートされていないようです。
<ul> 順序のないリスト
<ul>タグはunordered listの略で、順序のないリストを作ります。orderdに否定を表すun-をくっつけて、unorderd=順序をつけられていないって意味です。リスト項目は、<li>タグで指定します。
style属性
<ol>と同様に、style属性で、リストマーカーのスタイルを指定できます。 list-style-typeプロパティを使います。
例→黒い四角（square）
style="list-style-type: square"
<dl> 定義・説明リスト
なんぞこれ、という感じですが、
- 定義とは
- 物事の意味・内容を他と区別できるように、言葉で明確に限定すること。
<dl>タグで、 <dt>タグ（定義・説明される言葉）と <dd>タグ（説明）を囲みます。
ひとつの<dt>に対して複数の<dd>を使ったり、 複数の<dt>に対してひとつの<dd>を使ったりしてもOKです。例→
- 鮭
- 読み方はサケ（学名 Oncorhynchus keta）
- サケ目サケ科サケ属の魚
- 川で生まれ、海で成長し、産卵のために生まれ故郷の川に戻る。
- さくらんぼ
- 桜桃
- チェリー
- バラ科サクラ属サクラ亜属の果樹であるミザクラ(実桜)の果実。食用
<dl>タグの由来
HTML4.01ではdefinition list（定義リスト）の意味であることが示されていましたが、 HTML5ではdescription list（説明リスト）という程度の意味らしいです。ほとんど同じ意味じゃねーかと思いますが、もうちょっとゆるく使ってもいいよってことでしょうかね。
ちなみに、<dt>のtはterm=言葉、<dd>の後ろのdはdescription=説明って意味です。
まとめ
順序のあるリスト<ol>、順序のないリスト<ul>、定義・説明リスト<dl>についてまとめました。ばっちり理解できました！
わたしは原因とか理由とか語源とかが気になるタチです。よくわからない事でも、名前の由来がわかると、その「わかった！」をきっかけに理解が進むことが多々あります。
こういう自分のクセをノウハウとして貯めていくことが勉強のコツなんでしょうねー。
今日のひとこと
実際覚えられたかって？
…この記事は何度も見直すことになりそうじゃなー（遠い目）。
