CSS

liの子要素にaタグを入れたときのクリックの範囲を広くする

ナビゲーションメニューやリンクの表示には、それなりにli要素とa要素の組み合わせが使われます。ですが、li要素の子要素としてa要素を使用する場合、クリックの範囲が狭くなることがあります。そこで、liの子要素にaタグを入れた際に、クリックの範囲を広げる方法についてまとめてみました。

マージンやパディングを設定する

li要素の子要素としてa要素を使用する場合、クリックの範囲を広げるためには、li要素にマージンやパディングを適切に設定することが重要です。マージンやパディングを設定することで、li要素の周囲にクリック可能な領域を作り出すことができます。

例えば、以下のCSSコードを使用すると、li要素の周囲に10ピクセルのマージンを追加することができます。

li {
  margin: 10px;
}

 

a要素にdisplayプロパティを設定する

a要素のデフォルトのdisplayプロパティは「inline」ですが、これではクリックの範囲を広げることができません。代わりに、displayプロパティを「block」または「inline-block」に設定することで、a要素が親要素であるli要素の範囲を占めるようにすることができます。

li a {
  display: block;
}

 

li要素にpositionプロパティを設定する

li要素にpositionプロパティを設定することで、li要素の範囲内でa要素が完全に表示されるように調整することができます。positionプロパティを「relative」または「absolute」に設定し、必要に応じてtopやleftなどのプロパティを使用して位置を微調整します。

li {
  position: relative;
}

 

ホバーエフェクトの追加

ユーザビリティを向上させるために、li要素にホバーエフェクトを追加することもおすすめです。例えば、マウスカーソルがli要素に重なった際に背景色を変更するなどのエフェクトを適用することで、クリック領域が明示されるようになります。

li:hover {
  background-color: #f2f2f2;
}

 

 

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...

 

ABOUT ME
りん
沖縄から福岡に移住。QA/Webデザイナー/SE/フリーランス/SE人事など。趣味や好きなことをブログにまとめてます。