![[猫図解]メインコンテンツを作ろう!mainタグ](https://sakuweb.liruu.com/wp-content/uploads/2022/11/maintag-150x150.jpg)
[猫図解]メインコンテンツを作ろう!mainタグ
今回学ぶのは、リスト(箇条書き)を制御するulタグ、olタグ、liタグです。
ナビゲーションやお知らせ、フロアマップ、目次などなど、使いどころは多岐にわたります。
物事を整理して、より可読性を上げたい場面で重宝する箇条書きを学んでいきますよ!
リスト化する。
ナビゲーション、お知らせ、フロアマップ、目次、プライバシーポリシーなど
今回から実践編です。コードを編集できるコードエディタを準備してください。
エディタ持ってないってかたは、
オンラインエディタ「JSFiddle」もしくは「デベロッパーツール」を利用しましょう。
ただし、今後本気でやりたい方は「Visual Studio」など、ちゃんとしたやつを使いましょう。
このブログをベースに、解説動画を作りましたので、併せてご覧ください。
チャンネル登録、宜しくお願いします。
以下のコードをファイルにコピペして、確認してみましょう!
オンラインエディタを使うかたは、「HTML」にコードをコピペして、「RUN」ボタンで結果を表示してください。
<ul> <li>チンチラ</li> <li>ラグドール</li> <li>メインクーン</li> </ul> <ol> <li>スコティッシュ・フォールド</li> <li>マンチカン </li> <li>混血猫</li> </ol>
以下のようになっていますか?
・チンチラ
・ラグドール
・メインクーン
1.スコティッシュ・フォールド
2.マンチカン
3.混血猫
これで、2種類のリストが完成です!
2種類・・・・詳しくみていきましょう。
以下のコードは、ulタグを使った場合、olタグを使った場合のサンプルコードです。
<nav> <ul> <li>HOME</li> <li>SecondNav</li> <li>ThirdNav</li> </ul> </nav>
ulタグはこんなイメージになります。
・HOME
・SecondNav
・ThirdNav
<ol> <li>会員登録する</li> <li>ログインURLにアクセスする</li> <li>ログインする</li> </ol>
olタグの結果はこんな感じ。
1.会員登録する
2.ログインURLにアクセスする
3.ログインする
ulタグ・olタグの中に、子要素のliタグを入れて値を表示します。
これが基本構造です。
表示を見ると、自動でulタグは黒丸付き、olタグは番号付きとなっていますね。
以前にも説明した通り、タグは意味を持ち合わせています。
見ていきましょう。
ulタグは「unordered list」。順序のないリストという意味です。
ネコたちが横一列に並んでいますが、どっちが一番目とかはないですよね。
このようにリスト化するけど順序はない場合、たとえばナビゲーションやカテゴリリストなどに利用しますよ。
でもこの黒丸・・・いらないんだよなぁって時は、CSSで削除できます。
<style> ul {list-style: none} </style> <nav> <ul> <li>HOME</li> <li>SecondNav</li> <li>ThirdNav</li> </ul> </nav>
cssで、ulタグに「list-style: none」を指定して、黒丸を非表示にする指示です。
結果はこんなイメージです。
Home
SecondNav
ThirdNav
同じようにolタグも番号を削除することが可能ですよ。
ちなみに、値(liタグ)はいくらでも増やすことが可能です。
注意が必要なのが「コンテンツモデル」。入れ子ルールです。
ulタグ・olタグの中には、liタグしか入れられない。でしたよね。
わすれちゃった方は、過去記事を参考に。
SAKUWEB さくうぇぶ
olタグは「ordered list」。順序のあるリストという意味です。
今度は、ネコたちが縦一列に並んでいます。そして、「先頭」は明白ですね。
このように、順序立てて記述したい場合、たとえば目次や手順、ランキングなどに使います。
「リスト」を使うとき、順序をつけたいか否かでどっちを使うか決めましょう。
順序のないリスト
黒丸が付与
liタグのみ
順序のあるリスト
番号が付与
liタグのみ
liタグは「list item」。リストのアイテム・中身という意味です。
親になれるのは、ulタグolタグのみです。
ですが、liタグの子要素となれるタグはたくさんあります。
箇条書きだけでなく、ちょっと複雑なリストを作りたいときや、リストの中にリストを入れたい場面も出てきますね。
ulタグolタグは、liタグの親にもなれるし、子にもなれるんです!
リストアイテムを格納
ulタグ、olタグ
フローコンテンツ
階層化リストを作ってみましょう!
この階層化は、ナビゲーションや目次などに使う場面が多いので、覚えておきましょう!
たとえば、以下に示した「ラグドールの特徴」を階層化リストで作ってみます。
ラグドールの特徴
●性格
・人懐っこい
・穏やかで、おとなしい
●特徴
・体が大きく、筋肉質
・目がクリクリ
●毛種
・長毛
<h1>ラグドールの特徴</h1> <ul> <li>性格 <ul> <li>人懐っこい</li> <li>穏やかでおとなしい</li> </ul> </li> <li>特徴 <ul> <li>体が大きく、筋肉質</li> <li>目がクリクリ </li> </ul> </li> <li>毛種 <ul> <li>長毛</li> </ul> </li> </ul>
上記コードのように、liタグの中にulタグを入れれば、階層化リストが作れます。 簡単ですね!
以下のイメージのように、「特集一覧」と「ランキング」の2種類を作ってみてください。
特集一覧
・新商品「ニャーズケーキ」発売!
・ねこの御朱印巡り!
・菌の繁殖を防ぐ餌入れ!
ランキング
1.ねこの御朱印巡り
2.菌の繁殖を防ぐ餌入れ!
3.新商品「ニャーズケーキ」発売!
さぁ作ってみてください。
しっかりタイトル名も入れましょうね!
順序なしはどっちか。
ありの場合は、どっちのタグを使うんでしたっけ?
正解はこちら
<h1>特集一覧</h1> <ul> <li>新商品「ニャーズケーキ」発売!</li> <li>ねこの御朱印巡り!</li> <li>菌の繁殖を防ぐ餌入れ!</li> </ul>
<h1>ランキング</h1> <ol> <li>ねこの御朱印巡り!</li> <li>菌の繁殖を防ぐ餌入れ!</li> <li>新商品「ニャーズケーキ」発売!</li> </ol>
簡単でしたね。
エラーになって正しく表示されなかった方は、コードの記述ミスの可能性もありますよ。
ひとつずつ確認してみてくださいね。
次回は、「説明リスト」を学びます。
順序のありなしではなく、用語とその説明をするリストです。