HTMLでリストを書くときに便利な「ul」ですが、2つ以上同じスタイルを並べる時もかなり使えます！
コーポレートサイトやブログサイトを作成、LPなどを作る時もほぼすべての要素が「ul」で書いちゃいます。
でも、この記述ってあってるのかなと思って調べると、検索順位に影響する可能性があるらしいんだ。
「ul」を使っていい所、使っちゃダメで別のタグで書かなきゃいけない所などルールがあるから一緒に勉強しよう。
では、実際の使いどころと一緒に、より良いコーディングについてみていこう！
「ul」を使っていい所
先にもお話したように、自分は「ul」を多用しすぎちゃう。
例えば、比較する2つの要素は、確実に「ul」で書く！他には一覧表示のコンテンツも「ul」で書く！headerのメニューも「ul」だし、SNSリンクも「ul」。footerのメニューも、SNSリンクも「ul」で書く！バナーのリンク集も「ul」で書く！その他にも今思いつかないけど、滅茶苦茶「ul」を使う。でもこれはこれで正解みたい。
「ul」は、順番が無いリストという意味の「Unordered List」の頭文字をとったもので、１、２，３…の順番が無ければどんな所でも利用可能なんだ。逆に順番があるリストは？
「ol」を使った方が良い所
メニューや比較、一覧など順番が無いリストは、「ul」が適しているけど、順番のあるリストにはなるべく「ol」を使った方が良いよ！
「ol」を使う。かぁ。。。うん。オフィスレディ。。。いや違うオーダードリスト（Ordered List）の頭文字をとったもの。
「ol」は順番有りのリストや順序があるリストという意味。オフィスで働く女性ではない！
「ol」の使いどころは、ランキングや昇順、降順などのソート結果、ブログ記事の関連度とか順位がある要素。
htmlで「ul」、「ol」の書き方
「ol」は、順番のあるリストで、「ul」は順番が無いリストってわかっちゃったから、じゃーその使い方と注意点を見てみよう！
「ul」「ol」のリストは共に、「<ul></ul>」「<ol></ol>」の直下には「<li></li>」タグしか入れちゃいけない決まりがあるんだ。
それ以外の決まりごとは無いから自由に使えるのが良い所！
それではまず「ul」の書き方から見てみよう！
「ul」の書き方
<ul> <li>リスト１</li> <li>リスト２</li> <li><a href="">リスト３</a></li> </ul>
この様に「ul」の直下には絶対「li」タグで囲わなくちゃいけないんだ。
でもこれがCSSでスタイリングしたり、jsで動きを付けたりするのが滅茶便利なんだよね！
jQueryで「li」要素を指定したり、jQueryで繰り返し処理したり、jQueryでようその数を取得したり色々出来ちゃうから、多用しすぎてHTMLがdivとリストだらけになることが結構ある！
「li」直下はもう自由で、中にdivを入れても良いしspanやpタグを入れても、例みたいにaタグを入れて1つだけリンクにしても良い。
「ol」の書き方
<ol> <li>リスト１</li> <li>リスト２</li> <li><div>リスト３</div></li> </ol>
「ol」の書き方も基本は「ul」と一緒で、見た目も注意点も特に何も変わらない。
でも検索ロボットが見た時に「ol」は順番があるリストだから1番上が最も重要な要素と認識しやすくなるんだ！
この「ul」「ol」要素って一緒に使うことができると思う？
「ul」「ol」を一緒に使う書き方
<ol> <li> <p>〇●のリスト</p> <ol> <li>その１</li> <li>その２</li> <li>その３</li> </ol> </li> <li>リスト２</li> <li>リスト３</li> </ol>
「ul」「ol」って意味が違うから使い分けができそうなのは分かった！
でも、たま～に基本は順番が無いリストなんだけど、項目内にランキングを置いたりとか、順位付けのある要素を入れたい時がある。時がある。時がある。極稀だからあまり説明してもあれかも。
そういえば、昔「稀人」って怖い映画あったよね。
あの映画滅茶苦茶すきだったな～底冷えのする恐怖「感染」や「残穢」を見た後と同じ感覚になって良かった。
「稀人」、アマプラかネットフリックスに有ったらもう一回みたいなぁ。
「ul」「ol」を混ぜて使う場合も、直下には必ず「li」を入れるルールは一緒で、例のように利用できる。
また、逆に「ol」の中に「ul」っていうのもできる。
コメント