![見出し画像](https://assets.st-note.com/production/uploads/images/21874261/rectangle_large_type_2_b50494679758daa7322c48da167054d8.jpeg?width=1200)
継続は力なり#31
ナビゲーションの作り方の続き
リンクの範囲を拡張する
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;
}