HTML・CSS独学応援「リスト」

HTML・CSS独学応援　2-5　リスト

<ul>と<ol>

<ul>は、箇条書きリストを書く時に使います。
<ol>は、ランキングなどに使います。

それぞれ、の中身は<li>で記入します。

<ul>または<ol>と、<li>は必ず
セットで使うって覚えておきましょう。

イメージはこんな感じです。

<ul>
    <li>バナナ</li>
    <li>りんご</li>
    <li>メロン</li>
    <li>ぶどう</li>
</ul>

<ol>
    <li>バナナ</li>
    <li>りんご</li>
    <li>メロン</li>
    <li>ぶどう</li>
</ol>

<ul>～</ul>または<ol>～</ol>の間に
リストにしたいものを書きます。
この時、<li>を使います。

やってみよう

2つのリストを実際に作ってみよう。

サンプルコード

<!DOCTYPE html>
    <html lang ="ja">
        <head>
             <meta charset = "UTF-8">
             <title> <!--ここにタイトル-->　</title>
        </head>
        <body>
            <!-- ここの下に表示したいものを書く -->
            <h1>これが見出しｈ1です</h1>
            <p>これが段落です。こんな感じに表示されます。</p>
            <a href="https://www.google.com">グーグルへリンク</a>

            <ul>
                <li>リスト１</li>
                <li>リスト２</li>
                <li>リスト３</li>
            </ul>

            <ol>
                <li>リスト１</li>
                <li>リスト２</li>
                <li>リスト３</li>
            </ol>
        </body>
    </html>