海城中学高等学校情報科

(1) 箇条書きリストと番号付きリスト

箇条書きリスト

箇条書きリストとは

箇条書きリストは、項目の先頭に●が付くリストで、<ul>タグを使います。ulはunordered listの略で順序の決まっていないリストを意味します。

リスト内の項目を表示するには、<ul>〜</ul>のあいだにリストタグ<li>〜</li>を入れます。<li>タグはリストの項目のことで、liはlist itemの略です。


        <ul>
          <li>項目1</li>
          <li>項目2</li>
          <li>項目3</li>
          <li>項目4</li>
        </ul>

これをブラウザで表示すると、次のように、項目の先頭に●が付きます。

箇条書きリストの実習

実習ファイルに、カレー作りの材料を書いてみましょう。


        <ul>
          <li>カレーのルウ（中辛）・・・1箱</li>
          <li>牛肉・・・250g</li>
          <li>玉ねぎ・・・4個</li>
          <li>じゃがいも・・・3個</li>
          <li>にんじん・・・1本</li>
          <li>サラダ油・・・大さじ1</li>
          <li>水・・・1000mL</li>
        </ul>

実習コードの入力ができたら保存し、ブラウザで開いて確かめてみましょう。

番号付きリスト

番号付きリストとは

番号付きリストは、項目の先頭に数字が付くリストで、<ol>タグを使います。olはordered listの略で順序立てたリストの意味です。

リスト内の項目を表示するには、<ol>〜</ol>のあいだに<li>タグを入れます。


        <ol>
          <li>項目1</li>
          <li>項目2</li>
          <li>項目3</li>
          <li>項目4</li>
        </ol>

これをブラウザで表示すると、次のように、項目の先頭に数字が付きます。

番号付きリストの実習

実習ファイルに、カレー作りの手順を書いてみましょう。


        <!-- sample1-6.html ＞ 実習コード② -->
        <ol>
          <li>玉ねぎをくし切りにします。</li>
          <li>じゃがいもを6～8等分に切り分けるのが目安です。</li>
          <li>にんじんを3cm大の乱切りにします。</li>
          <li>厚手の鍋にサラダ油を熱し、牛肉を入れて、焼き目がつくまで炒めます。</li>
          <li>鍋に、玉ねぎ、じゃがいも、にんじんを入れ、玉ねぎがしんなりするまで炒めます。</li>
          <li>水を加え、沸騰したらあくを取ります。</li>
          <li>具材が柔らかくなるまで弱火～中火で約15分煮込みます。</li>
          <li>いったん火を止め、沸騰がおさまってからルウを割り入れてよく溶かします。</li>
          <li>再び弱火で時々かき混ぜながら、とろみがつくまで約10分煮込んででき上がりです。</li>
        </ol>

実習コードの入力ができたら保存し、ブラウザで開いて確かめてみましょう。

(2) 箇条書きリストのネスト

箇条書きリストのネスト

次のようにul要素をネスト（入れ子）にして複雑な階層構造をもつ箇条書きリストを作成することもできます。


        <ul>
          <li>第1レベルA</li>
          <li>第1レベルB</li>
          <li>第1レベルC
            <ul>
              <li>第2レベルA</li>
              <li>第2レベルB</li>
              <li>第2レベルC
                <ul>
                  <li>第3レベルA</li>
                  <li>第3レベルB</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>第1レベルD</li>
          <li>第1レベルE</li>
        </ul>

これをブラウザで表示すると、次のように、階層構造となります。

箇条書きリストのネストの実習

次のように表示されるように、sample1-6.html ＞実習コード③にタグを追加してみましょう。