![見出し画像](https://assets.st-note.com/production/uploads/images/21497223/rectangle_large_type_2_15f88a611677403179773bce89c93fb6.jpeg?width=1200)
継続は力なり#25
ナビゲーションに関する要素
ナビゲーションのセクション
これまで「article」「aside」「section」の要素を書いたが、残りの1つが「nav要素」になる
・article
内容がそれだけで完結している記事のセクション
・aside
本題から外れたセクション
・section
上の2種類のセクション以外の一般的なセクション
・nav
主要なナビゲーションのセクション
「nav要素」はその部分がナビゲーションのセクションであることを示す要素
リンクのグループになっている部分を全てのこの要素としてマークアップするのではなく、通常はグローバルナビゲーションのような主要なナビゲーション部分に対してのみ使用
例として、webページの内容をスクリーンリーダーで読み上げさせているユーザーが、 ナビゲーション部分を読み飛ばしたり、逆に瞬時にナビゲーション部分に移動して読み上げさせたりできる
多くの箇所で「nav要素」が使われていると、かえって使い勝手が悪くなる可能性がある
(例として、グローバルナビゲーションに移動したいのに、なかなかそこにたどり着けない など)
ページ内のフッター部分でよく見かけるリンクのグループなどは、通常この要素を使用せず、footer要素の内部に入れるだけでOK!
リスト関連の要素
3種類のリスト要素
ここでのリスト要素とは、箇条書きのような形式でテキストを表示させる要素のことであり、直接的にはナビゲーションとは関係ない
ナビゲーションの各項目を(表示形式とは関係なく意味的な面から)どの要素としてもマークアップするかを考えたとき、この要素以上に適している要素はない
ナビゲーション部分をマークアップするには一般的にここで紹介する「ul要素」が使用される
以下は、「ul要素」をはじめとする3種類の要素の説明である
・ul
箇条書きタイプのリスト(範囲全体)
・ol
番号付きタイプのリスト(範囲全体)
・li
リスト内の1項目
箇条書きタイプのリストには2種類あり、
・リスト内の項目に番号がついている
・タイプと付いてないタイプ
がある
通常ナビゲーションに使用されているのはその「番号のついていないタイプ」の方で、「ul要素」
「番号のついているタイプ」は「ol要素」
ul要素とol要素は、それぞれのリストの範囲全体を示すもので、その中の各項目には「li要素」としてマークアップする
例(「ul要素」と「ol要素」のマークアップ)
HTML
<ul>
<li>番号のついていないタイプの項目1です。<</li>
<li>番号のついていないタイプの項目2です。</li>
<li>番号のついていないタイプの項目3です。</li>
</ul>
<ol>
<li>番号のついているタイプの項目1です。</li>
<li>番号のついているタイプの項目2です。</li>
<li>番号のついているタイプの項目3です。</li>
</ol>
ul要素とol要素の子要素
「ul要素」と「ol要素」に直接の子要素として入れられるのは、「li要素」だけ
それらの要素を入れ子にする場合、ul要素またはol要素内に直接別のul要素またはol要素内を入れるのではなく、li要素の中に入れるようにする
li要素の中にはインライン要素内でもブロックレベル要素でも自由にいれられる
例(リストを入れ子にする場合のマークアップ例)
入れ子にするul要素やol要素は、li要素の中に入れる必要がある
<ul>
<li >ul要素の項目1</li>
<li>ul要素の項目2
<ol>
<li>ol要素の項目1</li>
<li>ol要素の項目2</li>
<li>ol要素の項目3</li>
</ol>
</li>
<li>ul要素の項目3</li>
</ul>
ol要素およびol要素内のli要素は、以下を指定できる
ol要素に指定できる属性
・start="開始番号"
番号を1以外で始めたい場合に、その先頭の番号を整数で指定
・type="番号の種類"
各項目に表示させる番号の種類を指定する
以下の5種類の値が指定できる
li要素に指定できる属性
・value="番号"
※ol要素の子要素である場合のみ指定可
ol要素内のその項目の番号を整数で指定
この項目のあとに続く項目の番号は、ここで指定した番号に続く連番となる
用語説明型のリスト
ナビゲーション部分に使われることはあまりないが、リストに分類される要素として「用語説明型のリスト」がある
用語説明リストとは、箇条書きのように単純に項目が複数あるタイプのリストではなく、用語とその説明のように内容の項目がペアになっているタイプのリスト
用語説明型のリストだが、用語とその説明に限らず、質問と回答のように内容が対になっている形式のデータ全般に対して使用可能
・dl
用語説明型のリスト(範囲全般)
・dt
リスト内の「用語」に該当する部分
・dd
リスト内の「説明」に該当する部分
ul要素とol要素のように、用語説明型のリスト全体を示すのが「dl要素」
その中にli要素のように入れる要素が、用語説明型のリストの場合は2種類ある
・「用語(team)」の部分に該当する「dt要素」
・「説明文(description)」の部分に該当する「dd要素」
例
HTML
<dl>
<dt>やれやれ</dt>
<dd>村上○樹の小説でよく目にするセリフ。</dd>
<dt>やれやれ〜</dt>
<dd>クレヨン○んちゃんがよく言うセリフ。</dd>
<dt>やれやれやれー</dt>
<dd>松田○作が「野獣○すべし」という映画の中で言ったセリフ。</dd>
</dl>
dl要素内には、上の例のようにdt要素とdd要素をペアにして複数入れられる
ペアといってもdt要素とdd要素は常に1つずつである必要ではなく、dt要素またはdd要素を連続して複数入れることも可能
同じペア内ではdt要素は必ずdd要素よりも前に配置する必要がある