前回 のつづきです。
今回も頑張っていきましょう。ファイティン。
liタグ
List Item（リストの項目）タグです。
ブラウザはliタグで囲った文章をリストの項目だと認識してくれるようになります。
前回 の文章の打順の部分をpタグからliタグに変更してみましょう。
<body> <h1>僕が考えた最強の打線。</h1> <p>僕が考えた最強の打線を発表します。</p> <li>遊 小坂</li> <li>二 西岡</li> <li>一 福浦</li> <li>右 サブロー</li> <li>指 初芝</li> <li>捕 里崎</li> <li>三 今江</li> <li>左 大塚</li> <li>中 諸積</li> </body>
箇条書きっぽくなりました。
しかし、実はこの状態はまだ不完全です。
olタグ
Ordered List（順序のあるリスト）タグです。
ブラウザはolタグで囲った文章を順序のあるリストと認識してくれるようになります。
順序のあるリストという意味にしたいliタグを囲ってつかいます。
先ほどの文章のリストの部分を囲ってみましょう。
<body> <h1>僕が考えた最強の打線。</h1> <p>僕が考えた最強の打線を発表します。</p> <ol> <li>遊 小坂</li> <li>二 西岡</li> <li>一 福浦</li> <li>右 サブロー</li> <li>指 初芝</li> <li>捕 里崎</li> <li>三 今江</li> <li>左 大塚</li> <li>中 諸積</li> </ol> </body>
しっかり順序のあるリストになりました。
これはブラウザが、
「olタグ内のliタグは順序のあるリストだな！よーし。わかりやすいように通し番号でもつけとくか。」
と、思いやり的なものを遺憾なく発揮してくれているおかげです。
ulタグ
Unordered List（順序のないリスト）タグです。
ブラウザはulタグで囲った文章を順序のないリストと認識してくれるようになります。
順序のないリストという意味にしたいliタグを囲ってつかいます。
試しに、olタグをulタグに変更してみましょう。
<body> <h1>僕が考えた最強の打線。</h1> <p>僕が考えた最強の打線を発表します。</p> <ul> <li>遊 小坂</li> <li>二 西岡</li> <li>一 福浦</li> <li>右 サブロー</li> <li>指 初芝</li> <li>捕 里崎</li> <li>三 今江</li> <li>左 大塚</li> <li>中 諸積</li> </ul> </body>
順序のないリストになりました。
これはブラウザが、
「ulタグ内のliタグは順序のあるリストだな！じゃあ数字じゃなくて、"・"をつけとこう。」
と、臨機応変に対応してくれているおかげです。
olタグ, ulタグ, liタグのルール
liタグの説明の際に不完全な状態という表現を使いました。
liタグはolタグ、ulタグのなかでしか存在できないタグなので、olタグ、もしくはulタグで囲む必要があったからです。
逆にolタグ、ulタグのなかにはliタグしかいれることはできません。そして、最低1つ以上のliタグを入ておく必要があります。
olタグ、ulタグと liタグは切っても切り離せぬ関係なのです。
例えていうと、サンドウィッチのパン（ol, ul）とベーコン（li）みたいな関係なのかもしれません。
パンだけだとそれはパンですし。ベーコンだけだとそれはベーコンで、サンドウィッチという状態になる為にはベーコンをパンで挟まなければなりません。
同じようにリストという状態をつくるには、リストアイテムをリストで囲むことが必要なのです。
...なんだか余計にわかりにくくなった気がしなくもないです。
olタグとulタグ、どちらをつかうべきか
当然時と場合によるのですが、今回の場合はolタグをつかうほうが良いと思います。
なぜならば野球の打順は THE 順序のあるリストだからです。打順のことをバッティングオーダーともいいますし。
ulで囲むリストは基本的には順番を入れ替えても成立するリストを囲む際に使いましょう。
例えば、BLTサンドがベーコン、レタス、トマトの順番で挟まってないと嫌だという場合は、
<ol> <li>ベーコン</li> <li>レタス</li> <li>トマト</li> </ol>
別にどんな順番でも良いよ。食べちゃえば一緒だし。という場合は、
<ul> <li>ベーコン</li> <li>レタス</li> <li>トマト</li> </ul>
という感じで表現できるかもしれません。（できないかもしれません）
今回の記事はいろんなところで悩んだ記事でした。
"ulのことは説明したほうがいいのかどうか" とか（もともとの予定にはありませんでした）、
"ポジションと選手名もマークアップしたほうがいいのか"とか、
"果たしてサンドウィッチで例える必要はあるのだろうか"とか、
"ブロック要素の説明はしなくてよいのだろうか"とか本当に色々迷いました。
そのなかでも1番悩んだのは、レフトの人選です。
レフトはフランコ、ベニー、李承ヨプという選択肢もありました。
諸積、大塚はともにセンターのイメージだったのですが、今回は純国産打線という方針でいきたかったので大塚にレフトに回ってもらいました。
あと、小坂と西岡のどちらをトップバッターに起用するのかも結構悩みました。
西岡をTSUYOSHIとするかどうかもほんのり悩みました。
そんなこんなで今回は以上となります。
次回 はスタイルをつかってタグの見た目を整えるということについて説明したいと思います。
