継続は力なり＃２５

2020年3月24日 23:01

ナビゲーションに関する要素

ナビゲーションのセクション

これまで「article」「aside」「section」の要素を書いたが、残りの１つが「nav要素」になる

・article
内容がそれだけで完結している記事のセクション

・aside
本題から外れたセクション

・section
上の２種類のセクション以外の一般的なセクション

・nav
主要なナビゲーションのセクション

「nav要素」はその部分がナビゲーションのセクションであることを示す要素

リンクのグループになっている部分を全てのこの要素としてマークアップするのではなく、通常はグローバルナビゲーションのような主要なナビゲーション部分に対してのみ使用

例として、webページの内容をスクリーンリーダーで読み上げさせているユーザーが、　ナビゲーション部分を読み飛ばしたり、逆に瞬時にナビゲーション部分に移動して読み上げさせたりできる

多くの箇所で「nav要素」が使われていると、かえって使い勝手が悪くなる可能性がある
（例として、グローバルナビゲーションに移動したいのに、なかなかそこにたどり着けない　など）

ページ内のフッター部分でよく見かけるリンクのグループなどは、通常この要素を使用せず、footer要素の内部に入れるだけでOK！

リスト関連の要素

３種類のリスト要素

ここでのリスト要素とは、箇条書きのような形式でテキストを表示させる要素のことであり、直接的にはナビゲーションとは関係ない

ナビゲーションの各項目を（表示形式とは関係なく意味的な面から）どの要素としてもマークアップするかを考えたとき、この要素以上に適している要素はない

ナビゲーション部分をマークアップするには一般的にここで紹介する「ul要素」が使用される

以下は、「ul要素」をはじめとする３種類の要素の説明である

・ul
箇条書きタイプのリスト（範囲全体）

・ol
番号付きタイプのリスト（範囲全体）

・li
リスト内の１項目

箇条書きタイプのリストには２種類あり、
・リスト内の項目に番号がついている
・タイプと付いてないタイプ
がある

通常ナビゲーションに使用されているのはその「番号のついていないタイプ」の方で、「ul要素」
「番号のついているタイプ」は「ol要素」

ul要素とol要素は、それぞれのリストの範囲全体を示すもので、その中の各項目には「li要素」としてマークアップする

　例（「ul要素」と「ol要素」のマークアップ）

HTML

<ul>
<li>番号のついていないタイプの項目１です。<</li>
<li>番号のついていないタイプの項目２です。</li>
<li>番号のついていないタイプの項目３です。</li>
</ul>
 
<ol>
<li>番号のついているタイプの項目１です。</li>
<li>番号のついているタイプの項目２です。</li>
<li>番号のついているタイプの項目３です。</li>
</ol>

ul要素とol要素の子要素

「ul要素」と「ol要素」に直接の子要素として入れられるのは、「li要素」だけ

それらの要素を入れ子にする場合、ul要素またはol要素内に直接別のul要素またはol要素内を入れるのではなく、li要素の中に入れるようにする

li要素の中にはインライン要素内でもブロックレベル要素でも自由にいれられる

例（リストを入れ子にする場合のマークアップ例）
入れ子にするul要素やol要素は、li要素の中に入れる必要がある

<ul>
 <li >ul要素の項目１</li>
 <li>ul要素の項目２
   <ol>
     <li>ol要素の項目１</li>
     <li>ol要素の項目２</li>
     <li>ol要素の項目３</li>
   </ol>
  </li>
 <li>ul要素の項目３</li>
</ul>

ol要素およびol要素内のli要素は、以下を指定できる

ol要素に指定できる属性

・start＝"開始番号"
番号を１以外で始めたい場合に、その先頭の番号を整数で指定

・type＝"番号の種類"
各項目に表示させる番号の種類を指定する
以下の５種類の値が指定できる

li要素に指定できる属性

・value="番号"
※ol要素の子要素である場合のみ指定可

ol要素内のその項目の番号を整数で指定

この項目のあとに続く項目の番号は、ここで指定した番号に続く連番となる

用語説明型のリスト

ナビゲーション部分に使われることはあまりないが、リストに分類される要素として「用語説明型のリスト」がある

用語説明リストとは、箇条書きのように単純に項目が複数あるタイプのリストではなく、用語とその説明のように内容の項目がペアになっているタイプのリスト

用語説明型のリストだが、用語とその説明に限らず、質問と回答のように内容が対になっている形式のデータ全般に対して使用可能

・dl
用語説明型のリスト（範囲全般）

・dt
リスト内の「用語」に該当する部分

・dd
リスト内の「説明」に該当する部分

ul要素とol要素のように、用語説明型のリスト全体を示すのが「dl要素」

その中にli要素のように入れる要素が、用語説明型のリストの場合は２種類ある

・「用語（team）」の部分に該当する「dt要素」

・「説明文（description）」の部分に該当する「dd要素」

例

HTML

<dl>
  <dt>やれやれ</dt>
  <dd>村上○樹の小説でよく目にするセリフ。</dd>
  <dt>やれやれ〜</dt>
  <dd>クレヨン○んちゃんがよく言うセリフ。</dd>
  <dt>やれやれやれー</dt>
  <dd>松田○作が「野獣○すべし」という映画の中で言ったセリフ。</dd>
</dl>

dl要素内には、上の例のようにdt要素とdd要素をペアにして複数入れられる

ペアといってもdt要素とdd要素は常に１つずつである必要ではなく、dt要素またはdd要素を連続して複数入れることも可能

同じペア内ではdt要素は必ずdd要素よりも前に配置する必要がある