ページを組み立てる

INPUT · スライド

箇条書きを作ろう

01 / 05

リストは2種類のタグで作る

箇条書きは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

番号をつけたいときは ol

順番に意味があるリストは、<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>