箇条書きは、2種類ある 0:16
HTMLには箇条書きを表す要素も用意されています。
箇条書きの各項目は
リスト項目を表す、li
要素を使います。
ただし、単に箇条書きと言っても主に行頭の記号に「・」を使って表す
順不同型の箇条書きと、行頭の記号に「1」、「2」、「3」などの数字を使って表す番号順の箇条書きがあります。
もちろんHTMLでもこれらの要素は区別されています。
RERUN
リスト項目は、li要素で表す 0:58
li
要素は、list itemの略で箇条書きの各項目を表します。
ただしli
要素は後で紹介するul
要素やol
要素などの中に配置する必要があります。
- カテゴリ
- なし
- コンテンツ・モデル
- フロー・コンテンツ
li
要素のサンプル
li
要素は箇条書きの各リスト項目を、<li>
タグ 〜 </li>
タグで挟みます。
li
要素の例<li>卵</li>
<li>醤油</li>
<li>きざみのり</li>
li
要素は、上記のように箇条書きの各項目に使います。
ただし、li
要素は、上記のように単独では利用できません。
それは、この
li
要素だけでは、このリストが、順不同の箇条書きか、番号順の箇条書きかが示せないからです。従って、
li
要素は、順不同の箇条書きを表す、ul
要素、または番号順の箇条書きを表す、ol
要素の中に配置する必要があります。
順不同リストを表すul要素 4:10
ul
要素は、unordered
主にサイトのナビゲーションなどに利用します。
ul
要素のサンプル
ul
要素は、li
要素でマークアップされた、各リスト項目達全体を、<ul>
タグ 〜 </ul>
タグで挟みます。
<ul>
要素の例<ul>
<li>卵</li>
<li>醤油</li>
<li>きざみのり</li>
</ul>
RERUN
ul
要素の注意点
このul
要素の子要素(中に直接配置できる要素)には、li
要素しか配置できません。
li
要素以外の要素を直接挟まないように注意しましょう。
番号順リストを表すol要素 6:12
<ol>
要素は、ordered
主に、
「手順」などの様に、順番に読んでほしい項目やメニューなどに利用します。
ol
要素のサンプル
ol
要素は、li
要素でマークアップされた、各リスト項目達全体を、<ol>
タグ 〜 </ol>
タグで挟みます。
<ol>
要素の例<ol>
<li>お茶碗にご飯をよそう</li>
<li>ご飯の上に卵かける</li>
<li>醤油ときざみのりをかけて混ぜる</li>
</ol>
RERUN
ol
要素の注意点
このol
要素の子要素(中に直接配置できる要素)には、li
要素しか配置できません。
li
要素以外の要素を直接挟まないように注意しましょう。
箇条書きの入れ子 7:47
箇条書きは入れ子にすることも可能です。
その場合は
li
要素の中に入れ子にしたい箇条書きの要素を配置してください。
<ul>
<li>ホーム</li>
<li>企業情報
<ul>
<li>代表あいさつ</li>
<li>会社概要</li>
<li>IR情報</li>
</ul>
</li>
<li>サービス</li>
<li>お問い合わせ</li>
</ul>
RERUN
箇条書きの要素を使ってみよう 8:47
それでは、箇条書き関連の要素を記述してみましょう。
- 「Chapter09」フォルダ内の「index.html」をテキストエディタで開く
- 下記を参考に、条書き関連の要素をマークアップしてみましょう。
<h1>習得した要素とマークアップ手順</h1>
<h2>僕が習得した要素(body要素内で使う要素のみ)</h2>
<ul>
<li>p要素</li>
<li>h1要素〜h6要素</li>
<li>br要素</li>
<li>em要素</li>
<li>strong要素</li>
<li>ul要素</li>
<li>ol要素</li>
<li>li要素</li>
</ul>
<h2>僕のマークアップ手順</h2>
<ol>
<li>HTMLの全体構造の要素を記述する</li>
<li>body要素内にページに表示する文章を記述する</li>
<li>h1要素〜h6要素で見出し部分をマークアップする</li>
<li>p要素で段落部分をマークアップする</li>
<li>ul要素、ol要素、li要素で箇条書き部分をマークアップする</li>
<li>em要素やstrong要素で強調する部分や重要性を表す部分をマークアップする</li>
</ol>
- 上書き保存し、ブラウザで確認
RERUN
練習問題 13:24
「Chapter09」 › 「quest」フォルダ内の「index.html」を開いて下記の問題を解いてみましょう。
なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。
-
- 文字列「ホーム」
- 文字列「企業情報」
- 文字列「サービス」
- 文字列「採用情報」〜 文字列「アルバイト」
- 文字列「お問い合わせ」
-
- 文字列「新卒」
- 文字列「アルバイト」
RERUN
まとめ 17:42
箇条書きの要素の使い方はわかりましたか?
- 各リスト項目は、
li
要素で表す - 順不同の箇条書きは、
ul
要素で表す - 番号順の箇条書きは、
ol
要素で表す