文書構造のリストについて、その種類や違いなどを理解することが目的です。
Chap4-4の動画で間違ってURLを載せていました。
案内したChap3-4のfont-familyのチートシートはこちらです→
HTMLの作成と保存
Web制作フォルダの「chap03」フォルダへ「3-1.html」で保存しましょう。
Web制作（ルートフォルダ）
chap03
2-1.html
3-1.html（今回作成するファイル）
chap02
HTMLの基本構造を確認
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>リスト</title>
</head>
<body>
<body>
</html>
うまく表示できないときは、入力ミスがないかチェックしましょう
HTMLの文章をコピー
Chap3-3で使用する文章です。
コピーをしたら、作成した「3-1.html」へ貼り付けましょう。
ボタンを押すとコピーできます⬇︎
本文で使うタグ 2
liタグ（リスト文/List）
リスト文は、段落の文章を短くコンパクトにまとめた、箇条書きの文章。
説明的で長い文章を、コンパクトにまとめることで、端的に内容を伝えることができる。
liタグは必ず、数字または記号リストのタグ内（入れ子）で使用する。
olタグ（数字リスト/Ordered List）
数字リストは、何らかの順序や手順を示した、箇条書き文の種類。
olタグは、liタグを入れ子にして、リスト文全体を囲むように使う。
ブラウザでの表示は、liタグに数字をつけて表示してくれる。
数字リストの例
箇条書きで書かれた文章をliタグで挟み、リスト文にする
全てのリスト文を囲むように、olタグで挟む
ulタグ（記号リスト/Unordered List）
記号リストは、順序や手順に関係のないリスト文で使う、箇条書き文の種類。
ulタグは、liタグを入れ子にして、リスト文全体を囲むように使う。
ブラウザでの表示は、liタグに記号「・」をつけて表示してくれる。
記号リストの例
順序や手順に関係のないリスト文で使う
liタグは、ol,ulタグの範囲内で使うため、子要素と呼ばれる
ol,ulタグは、liタグの親要素と呼ばれる
dtタグ（説明する言葉・期間/Description Term）
何かを説明するための言葉や期間・時間などの文字列で使用する、リスト文の種類の一つ。
dtタグで挟んだ言葉や文字列の、説明・定義文のタグとセットで使用する。
dtタグと、説明・定義文のタグは、説明・定義リストのタグ内（入れ子）で使用する。
ddタグ（説明・定義文/Description・Definition）
dtタグで挟まれた文字列の、説明または定義する文章で使用する、リスト文の種類の一つ。
ddタグは、dtタグの説明する言葉とセットで使用する。
dt,ddタグのセットは、説明・定義リストのタグ内（入れ子）で使用する。
dlタグ（説明・定義リスト/Description List）
短くまとめた説明や定義文を、リストとして扱う、箇条書きリストの一つ。
説明する言葉や期間のdtタグと、その説明や定義した文章のddタグを、リストの範囲として全体を挟んで使用する。
ブラウザでの表示は、ddタグが右にインデント（右にずれる）して表示される。
説明・定義リストの例
数字リストのタグ
順序や手順を表すリスト文を囲むタグ
記号リストのタグ
順序や手順に関係のないリスト文を囲むタグ
説明・定義リストのタグ
説明する言葉と、短くまとめた説明が箇条書きされた文を囲むタグ文章に見出し・段落・改行をマークアップ
前回の復習になります。
See the Pen 3-3 by Rayout-gw (@Rayout-gw) on CodePen.
うまく表示されないときは、入力ミスがないかしっかりと確認しましょう
文章に数字リストをマークアップ
【数字リストの例】部分のタグを修正します。
<p>を<li>に変更するのがポイントです。
See the Pen 3-3-2 by Rayout-gw (@Rayout-gw) on CodePen.
文章に記号リストをマークアップ
【記号リストの例】部分のタグを修正します。
<p> を<li>に変更するのがポイントです。
See the Pen 3-3-3 by Rayout-gw (@Rayout-gw) on CodePen.
文章に説明・定義リストをマークアップ
【説明・定義リストの例】部分のタグを修正します。
見出しと段落の関係に似ています。
違いは、文章が短くまとめられた箇条書きになっているかどうかです。
See the Pen 3-3-4 by Rayout-gw (@Rayout-gw) on CodePen.
間違う人が多いポイント
段落<p>の文章は、リストになると<li>になります
<dt>や<dd>も同じです