HTML講座 / ol・ul・dlと入れ子のリスト
順番が意味を持つ項目にはol、順番が重要でない項目にはul、名称と説明の組にはdlを使います。olとulの各項目はliで表し、サブリストは対応する親のliの中に置きます。
三種類のリストを使い分ける
| 要素 | 使う場面 | 項目の要素 |
|---|---|---|
| ol | 調理や設定の手順など、順番に意味がある | li |
| ul | 持ち物や特徴など、並べ替えても意味が変わらない | li |
| dl | 用語と定義、項目名と値の組 | dtとdd |
番号や丸印の見た目で選ぶのではなく、項目を並べ替えると意味が変わるかで判断します。記号やインデントなどの装飾はCSSの担当です。
一つのファイルで表示を比べる
次の完全な文書をindex.htmlとしてUTF-8で保存して開きます。順番のある手順、持ち物の箇条書き、名称と説明の組が別々に表示されます。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML lists</title>
<style>
body { font-family: "Noto Sans KR", sans-serif; }
</style>
</head>
<body>
<h1>Planning a trip</h1>
<h2>Supplies</h2>
<ul>
<li>Water</li>
<li>Map</li>
</ul>
<h2>Steps</h2>
<ol>
<li>Choose dates</li>
<li>Pack a bag</li>
</ol>
<h2>Terms</h2>
<dl>
<dt>Departure</dt>
<dd>The day the trip begins</dd>
<dt>Arrival</dt>
<dd>The day you reach the destination</dd>
</dl>
</body>
</html>
olの項目の順番を入れ替えて、手順として不自然にならないか確認します。次にulの項目を入れ替えて比べ、元の内容に戻してください。改行やスペースを並べてリストの見た目を再現するより、リスト要素を使う方が構造を伝えられます。
番号の開始位置と逆順を指定する
startはリスト全体の開始番号、liのvalueはその項目の番号を指定します。次の例は5、9、10の順になります。途中で番号を変える必要がある内容にだけ使います。
<ol start="5"> <li>Fifth step</li> <li value="9">Ninth step</li> <li>Tenth step</li> </ol>
reversedは逆順に数えます。次の三項目では、開始番号を別に指定しなければ3、2、1になります。
<ol reversed> <li>Third item</li> <li>Second item</li> <li>First item</li> </ol>
番号の変更は、順序のない内容に手順としての意味を与えるものではありません。まず内容に合うリストを選び、その後で番号を調整します。
dlで名称と説明を対応させる
dtが名称や用語、ddが対応する説明や値です。辞書だけでなく、製品の仕様や営業時間などにも使えます。
<dl> <dt>Opening hours</dt> <dd>Weekdays, 9 a.m. to 6 p.m.</dd> <dt>Closed</dt> <dd>Saturday and Sunday</dd> </dl>
この営業時間は構文を説明するための架空の例です。一つの名称に複数の説明がある場合も、どの説明がどの名称に対応するかを明確にします。dlの中で通常の項目をliに置き換えないようにしてください。
サブリストは親のliの中に置く
衣類という項目の内訳を示す場合、そのliを閉じる前にサブリストを入れます。サブリストを外側のulの直下に置くのではありません。
<ul>
<li>Water</li>
<li>Clothing
<ul>
<li>Jacket</li>
<li>Socks</li>
</ul>
</li>
</ul>
次は、順序のある旅行準備の中に、順序のない持ち物一覧を入れた例です。外側と内側で違う種類のリストを使えます。
<ol>
<li>Choose travel dates</li>
<li>Pack a bag
<ul>
<li>Clothing</li>
<li>Toiletries</li>
</ul>
</li>
<li>Leave for the trip</li>
</ol>
入れ子の閉じる順序はHTMLの文法と同じです。リスト全体を段落のpで囲まず、段落とリストを独立した構造にします。
リストを確認する
並べ替えで意味が変わるか、各項目が正しい要素に入っているか、名称と説明が対応しているかを確認します。サブリストのインデントが変でも、まずHTMLの親子関係を調べ、その後でCSSを確認してください。MDNのHTMLリストの解説で使用例を確認できます。実際のページで共通メニューを作る場合は複数ページのサイト制作でもリストやリンクの整理を練習できます。
行と列を持つデータをHTMLの表で表す基本を学びます。見出しセルとデータセル、theadとtbody、横幅が広い表のスクロール方法も紹介します。
HTML講座 / detailsとsummaryで開閉できる説明を作る
JavaScriptなしで開閉する補足説明を作ります。open属性の真偽、分かりやすいsummaryの書き方、Tab・Enter・Spaceによる操作の確認方法も紹介します。
HTML講座 / placeholderと入力中も残る案内文を付ける
label、placeholder、valueの違いを学びます。inputとtextareaの例、aria-describedbyによる説明の関連付け、フォームデータで送られる値の確認方法も紹介します。
h1〜h6で見出しの階層を表し、pで段落、brで段落内の改行を作る方法を学びます。文字サイズと文書構造を区別し、見出しの飛び級を修正する練習も行います。
ホーム・紹介・問い合わせ練習の三ページを作り、共通メニューと現在位置を設定します。フォームは送信値の確認用とし、相対リンク、入力制約、キーボード、文法を点検します。
見出し、リンク、画像、フォームを意味のあるHTMLで作る方法を学びます。スキップリンク、キーボード、フォーカス、ズームを確認する小さなページと、検査の限界も紹介します。
doctype、html、head、bodyの役割と、文字コード・文書タイトル・viewportの設定を解説します。ファイルの保存から表示確認、表示されない場合の調べ方まで学べます。
imgのsrc、alt、width、heightの役割を学びます。画像の配置場所と相対パス、装飾画像の代替テキスト、表示幅とファイル容量の違いも説明します。
HTML講座 / formの構造とGET・POSTによる送信
action、method、nameの役割とGET・POSTの違いを学びます。FormDataと開発者ツールを使い、送信対象の値、入力検証、サーバー処理を分けて確認します。
開始タグと終了タグ、空要素、属性、入れ子、コメントの書き方を学びます。真偽属性や特殊文字の注意点と、ブラウザー表示だけでは判断できない文法エラーも説明します。