リスト（ul-li)タグ

この講義では　ulタグとliタグについて勉強しましょう。
このタグはですね。listを作る時に使います。

次は私が好きな会社リスト

  • ディズニー
  • アップル
  • 本田
  • ソニー

上の文章で「次は私が好きなブランドリスト」というリストがあります。　こうリストを作る時にul-liタグを使います。

ul-liタグの使い方

<ul>
<li>ディズニー</li>
<li>アップル</li>
<li>本田</li>
<li>ソニー</li>
</ul>

リストタグはulタグを先に開いてその中にliタグを使います。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <ul>
    <li>ディズニー</li>
    <li>アップル</li>
    <li>本田</li>
    <li>ソニー</li>
    </ul>
</body>
</html>

結果

上のソースの結果を見るとリストの前に点があるのをわかります。
それ以外に番号が出力できるようにも作れます。
その場合はulタグを使わずolタグを使います。

ulタグを使わずolタグを使うソース

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <ol>
    <li>ディズニー</li>
    <li>アップル</li>
    <li>本田</li>
    <li>ソニー</li>
    </ol>
</body>
</html>

結果

リストの前に番号とか点とか何も出力しない方法もあります。それはCSS3の時間に調べましょう。