このページの短縮URL(リンク用) §02-02…箇条書きリストの作成<ul><li> – オンライン無料パソコン講座 | PCセミナー

§02-02…箇条書きリストの作成<ul><li>

「主要3科目」の下に「国語」「数学」「英語」の箇条書きリストを作成する予定です。
(予想完成図)

(01) リストの作成をする場合には<ul>タグを使います。<ul>タグ内にリスト項目を入力するのです。以下のようにWebページのbody内を更新してください。

<body>
<h1>リストの練習</h1>
<h2>主要3科目</h2>
<ul>
</ul>
</body>

(02) <ul>タグ内部に項目の内容を記入し、<li>タグでさらに囲みます。最初は「国語」です。以下のようにWebページを更新してください。更新後はブラウジングします。

<body>
<h1>リストの練習</h1>
<h2>主要3科目</h2>
<ul>
<li>国語</li>
</ul>
</body>

(03) 引き続き、数学と英語も追加しましょう。

<body>
<h1>リストの練習</h1>
<h2>主要3科目</h2>
<ul>
<li>国語</li>
<li>数学</li>
<li>英語</li>
</ul>
</body>

(04) 続けて、「主要5科目」というリストを作成してください。

<body>
<h1>リストの練習</h1>
<h2>主要3科目</h2>
<ul>
<li>国語</li>
<li>数学</li>
<li>英語</li>
</ul>
<h2>主要5科目</h2>
<ul>
<li>国語</li>
<li>数学</li>
<li>英語</li>
<li>理科</li>
<li>社会</li>
</ul>
</body>