【CSS】クリック領域を広げたナビゲーションボタンを作る

一般的なナビゲーションのHTMLが以下になります。
※事前にulにdisplay:flexをしてliを横並びにしています。

HTML

<nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">当社について</a></li> <li><a href="#">アクセス</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav>

CSS

.content-nav ul{ display: flex; }

CSSを修正していきます。すでに横並びになっているので、まずはliタグの右側に1pxを空けてそれぞれが別のボタンなのをわかりやすくしました。また、last-childで最後のマージンを0にしてなしにします。

次に、ボタン領域にスペースを確保したいので、aタグにpaddingを設定します。わかりやすいよう、背景の色を薄い赤にしました。

CSS

.content-nav li{ margin-right:1px; } .content-nav li:last-child{ margin-right:0; }   .content-nav li a{ padding:10px; background-color:#ffcccc; }

しかし上記のままだと、天地がはみ出ているのがわかります。これは、aタグはインライン要素なので高さを持つことができないためです。

ですので、aタグをブロック要素に変更するためにdisplay:blockをします。これで高さが生成されます。

CSS

.content-nav li{ margin-right:1px; } .content-nav li:last-child{ margin-right:0; }   .content-nav li a{ display:block; padding:10px; background-color:#ffcccc; }

すでにdisplay:flexにより横並びでnowrapの状態なので、すべてのliの大きさを100%にします。また、左右中央にするためtext-align:centerを追加します。

CSS

.content-nav li{ margin-right:1px; width:100%; text-align: center; } .content-nav li:last-child{ margin-right:0; }   .content-nav li a{ display:block; padding:10px; background-color:#ffcccc; }

さらに、ホバーで色の変更をします。

CSS

.content-nav li{ margin-right:1px; width:100%; text-align: center; } .content-nav li:last-child{ margin-right:0; }   .content-nav li a{ display:block; padding:10px; background-color:#ffcccc; }   .content-nav li a:hover{ color:#fff; background-color:#ff6666; }

以上のように、

aタグはインライン要素なので、ブロック要素へ変更
aタグにpaddingを追加

とすることで、テキストリンクをボタン化してグローバルナビゲーションを作成する事ができます。