HTMLを学ぶ。箇条書きを表す要素を学ぶ。

HTMLを学ぶ。箇条書きを表す要素を学ぶ。

今回のポイント

今回は箇条書きについて解説していきます。
箇条書きには順不同型と番号順型の2つがあります。
順不同型とは”・○○”といったように表現されるものです。
そして番号順型とは”1.〇〇、2.▲▲・・・”といったように表現されるものです。
それではそれぞれの表現方法について解説していきます。

リスト項目を表す要素(li要素)

まずは箇条書きで表現する前に、リスト項目を表現しておく必要があります。
そして箇条書きの各リスト項目はli要素で表現します。
それではli要素を使った例を使って解説します。
以下のような記事があったとします。

お湯を沸かす
お湯を入れる
3分待つ

この記事にli要素を記述していきます。

<li>お湯を沸かす</li>
<li>お湯を入れる</li>
<li>3分待つ</li>

これで「この項目はリストである」ということがマークアップされます。
そしてこのリストを記事内容に合わせて、順不同か番号順に分ける要素を追記します。

順不同型を表す要素(ul要素)

順不同型とは”・○○”といったように表現されるものです。
そして順不同型にはul要素を使用します。

ul要素の意味と役割

unordered listの略で順不同リストを表します。

ul要素のカテゴリ

フロー・コンテンツ

ul要素のコンテンツ・モデル

0個以上のli要素
※ul要素にはli要素しか配置できませんが、li要素の中にはフロー・コンテンツであるp要素やh要素も配置することができます。

ul要素を実際に記述してみる

先程記述したリストにul要素を追記します。
表現すると以下の通りです。

<ul>
<li>お湯を沸かす</li>
<li>お湯を入れる</li>
<li>3分待つ</li>
</ul>

それでは記述できたら、ブラウザで確認してみましょう。

このように・○○と表現されます。
またこの”・”についてはCSSで変更することができます。
次に番号順型を解説していきます。

番号順型を表す要素(ol要素)

番号順型とは”1.〇〇、2.▲▲・・・”といったように表現されるものです。
そして番号順型はol要素で表現します。

ol要素の意味と役割

ordered listの略で番号順リストを表します。

ol要素のカテゴリ

フロー・コンテンツ

ol要素のコンテンツ・モデル

0個以上のli要素
※ol要素にはli要素しか配置できませんが、li要素の中にはフロー・コンテンツであるp要素やh要素も配置することができます。

ol要素を実際に記述してみる

先程記述したリストにul要素を追記します。
表現すると以下の通りです。

<ol>
<li>お湯を沸かす</li>
<li>お湯を入れる</li>
<li>3分待つ</li>
</ol>

それでは記述できたら、ブラウザで確認してみましょう。

いかがでしょうか。このように番号順型はリスト項目の前に数字が打たれます。

今回は箇条書きを表す要素を解説しました。
記事の一部をリストで表現することで、より一層記事が引き立つようになります。
どんどん活用して慣れていって下さい。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

HTMLカテゴリの最新記事