見出し画像

継続は力なり＃３１

うちやましょうたろう/成り上がり

ナビゲーションの作り方の続き


リンクの範囲を拡張する

a要素はインライン要素であるため、width プロパティやheight プロパティを指定して大きさを変更できない

インライン要素の場合は、高さはフォントサイズや行の高さなどで決まるし、状況によって行を折り返す場合もあるので幅も指定できない

ナビゲーションの項目としては不都合なので、a要素もブロックレベル化する

以下の値を指定する

例

CSS

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


表示を調整する

この状態ではナビゲーションらしく見えないので、表示を調整する

まず、行の高さとパディングの指定を追加して背景の表示される領域を調整し、各項目の左側に白いボーダーを表示させて境界がハッキリとわかるようにする

テキストを中央揃えにして下線を消したら、シンプルではあるがナビゲーションらしくなる

例

CSS

nav a {
   color: #fff;
   background: #69e;
   display: block;
   line-hight: 1.0;
   padding: 6px 0;
   border-left: 1px solid #fff;
   text-align: center;
   text-decoration: none;
}


カーソルが上にある時の処理

一般にナビゲーションの項目はカーソルをのせると背景が変わるなど何らかの変化を見せる

その処理を追加する


ナビゲーションの作成ポイントは、

・li要素とa要素の両方に「display: block;」を指定する
・段組みの要領で横に並べる
・細かい表示の調整を行う

で簡単に作成できる

例

CSS

nav a:hover {
   background: #f6d;
}


全体例

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

nav li {
   display: block;
   width: 80px;
   float: left;
}
nav a {
   color: #fff;
   background: #69e;
   display: block;
   line-height: 1.0;
   padding: 6px 0;
   border-left: 1px solid #fff;
   text-align: center;
   text-decoration: none;
}
nav a:hover {
   background: #f6d;
}