箇条書き

更新日:2018.06.30
  1. HOME
  2. ホームページ作成講座
  3. 箇条書き

ここから、リストについて見ていきます。リストは、箇条書き、番号リスト、定義リスト等があります。

最初に箇条書きについて見てみましょう。 箇条書きは、項目の順番が入れ替わっても差し支えないものに使います。

箇条書きを表すHTMLタグ

箇条書きにするために使うタグを見ておきましょう。

<ul>~</ul>
箇条書きを作成します。この間に各項目を表す<li></li>を記述します。
<li>~</li>
箇条書きの各項目を作成します。

箇条書きにすると、各項目の頭に黒丸等のマーカーが自動で付されます。 このマーカーの種類は、スタイルシートで変更することができます。

箇条書きのサンプル

では、HTMLで箇条書きを作成してみることにしましょう。

まずは、HomePageフォルダの中に、listフォルダを作成しましょう(下図)。

listフォルダ

次にtemp.htmlを開いて、listフォルダに中に「lesson1.html」という名前で保存しましょう。 そしてbody内に以下のように記述してみましょう。

<h1>本日のお勧めメニュー</h1>
<ul>
 <li>フランスパン</li>
 <li>クリームパン</li>
 <li>アンパン</li>
 <li>食パン</li>
</ul>

ブラウザで確認すると、下のようになります。

箇条書きは、順番を入れ替えても問題無いものに使います。 上記の例では、パンの名称が入れ替わっても大きな影響はないでしょう。

順番をつける場合は、次のページの番号リストを使います。

NINJABUTTON