01 / 05
リストは2種類のタグで作る
ページを組み立てる
INPUT · スライド
01 / 05
箇条書きは2つのタグの組み合わせでできている。
<ul> … リスト全体の入れ物<li> … 1つ1つの項目<li> を <ul> の中に入れて書くよ。
<ul> <li>りんご</li> <li>みかん</li></ul>02 / 05
タグの中に別のタグを入れることを入れ子という。HTMLの大事な考え方だよ。
入れ子にしたタグは半角スペース2つぶん下げて書くのがならわし。下げなくても動くけれど、親子の関係が目で見て分かるようになる。
<ul> <li>ノート</li> <li>えんぴつ</li> <li>けしごむ</li></ul>03 / 05
順番に意味があるリストは、<ul> の代わりに <ol> を使う。すると自動で番号がつくよ。
中身が <li> なのは同じ。入れ物のタグを変えるだけだね。
<ol> <li>米をとぐ</li> <li>水を入れる</li> <li>たく</li></ol>04 / 05
<ul>(買い物メモ、すきなもの)<ol>(作り方、ランキング)見た目で選ぶのではなく、中身の性質で選ぶよ。
05 / 05
<li> の中には、これまで覚えたタグを入れられる。リンクを入れればメニューになるよ。
サイトの上のほうに並んでいるメニューは、じつはほとんどこの形でできているんだ。
<ul> <li><a href="menu.html">メニュー</a></li> <li><a href="access.html">アクセス</a></li></ul>