HTML入門03 リストの作成

HTML

箇条書きにしたいときやメニューのように項目を並べて表示したいときに使用するのが「リスト」です。例えばこのHPのトップにある学習内容の項目など。

またHTMLでは欠かせないメニューにもリストが使われます。

ただしCSSで体裁を整える必要があるためここでは扱いません。ではシンプルなリストの作り方を説明します。

目次

リスト<ul><li>

一番簡単なリストの作り方です。よく使う<ul><li>の使用例を見てみましょう。

ul要素とli要素

使用例：

<!DOCTYPE html>
<html lang="ja">
<body>
<ul>
  <li>みかん200円</li>
  <li>りんご100円</li>
  <li>ぶどう1,000円</li>
</ul>
</body>
</html>

HTML表示

li 要素の中に書いたものがリスト化されていきます。リストの前にある点「・」は変更できますがCSSで記述するのが一般的なのでここでは省略です。

番号つきリスト<ol><li>

リストに番号をつけたいときがあります。そのときはol要素を使います。

ol要素とli要素

使用例：

<!DOCTYPE html>
<html lang="ja">
<body>
<ol>
  <li>みかん200円</li>
  <li>りんご100円</li>
  <li>ぶどう1,000円</li>
</ol>
</body>
</html>

HTML表示

番号を変えたい

途中の番号からはじめたいと思うことはあまりないですが変えたいときが100年に1回くらいあります。そんなときは

番号を変えたいstart属性とvalue属性

使用例：

<!DOCTYPE html>
<html lang="ja">
<body>
<ol start="6">
  <li>みかん200円</li>
  <li>りんご100円</li>
  <li>ぶどう1,000円</li>
</ol>
</body>
</html>

HTML表示

リストの途中から番号を変える方法

<!DOCTYPE html>
<html lang="ja">
<body>
<ol>
  <li>みかん200円</li>
  <li value="5">りんご100円</li>
  <li>ぶどう1,000円</li>
</ol>
</body>
</html>

HTML表示

その他のデザインを変更したいことがあると思うのですがCSSのリスト講座編にまとめます。