継続は力なり＃３０

2020年3月29日 23:54

ナビゲーションの作り方

ナビゲーションのマークアップ

ここでは、ヘッダー部分によくあるようなグローバルナビゲーションを作成すると仮定し、全体を「nav要素」の中に入れる

その内部には「ul要素」を配置し、ナビゲーションの各項目は「 li 」の中に入れる

各項目はナビゲーションとして機能するように「a要素」でリンクにしておく

例

HTML

<nav>
  <ul>
    <li><a href="a.html">項目A</a></li>
    <li><a href="b.html">項目B</a></li>
    <li><a href="c.html">項目C</a></li>
    <li><a href="d.html">項目D</a></li>
    <li><a href="e.html">項目E</a></li>
  </ul>
</nav>

リストの項目を横に並べる

ここから徐々にCSSを追加して、ナビゲーションらしく見えるようにする

リストの各項目が横に並ぶようにする

リストには行頭記号がついていたりとそのままでは扱いにくいので、「li要素」に「display: block;」を指定する

こうすることで、行頭記号も消えて、「li要素」が普通のブロック要素と同じように扱えるようになる

あとは段組みの要領で「float プロパティ」を指定すると各項目が横に並ぶ

例（body要素にマージンを指定しているのは、サンプルとしてみやすくするため）

CSS

body {
   magin-top: 80px;
}
 
nav li {
   display: block;
   width: 80px;
   float: left;
}

リンクの範囲を確定する

この状態だとボックスの範囲などがわかりにくいので、各項目内の「a要素」に背景色と文字色を指定する

背景色を表示させてみると、背景がつくのはテキストのある狭い範囲に限定されていることがわかる

リンクとしてクリックできるのも背景が表示されている範囲なので、その領域を広げる必要がある

例

CSS

nav a {
   color: #fff;
   background: #69e;
}