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>これが見出しh1です</h1>
            <p>これが段落です。こんな感じに表示されます。</p>
            <a href="https://www.google.com">グーグルへリンク</a>

            <ul>
                <li>リスト1</li>
                <li>リスト2</li>
                <li>リスト3</li>
            </ul>

            <ol>
                <li>リスト1</li>
                <li>リスト2</li>
                <li>リスト3</li>
            </ol>
        </body>
    </html>