a { display: block; } だけで結構しあわせになれるよ

ウェブサイトのメニューはクリックしやすい方がいい。
メニューのリンクを画像にする場合はわりとコントロールできるが、テキストのリンクの場合、たとえば

<a href="〜">もっと美味しいお蕎麦はこちら</a>

みたいにやるわけだ。
そうすると、a要素はインライン要素なので、「もっと美味しいお蕎麦はこちら」という文字列から外れた部分はクリックできる部分ではなくなり、極端な場合、文字の上に慎重にマウスカーソルをあわせなければならなくなる。

それを解消するのが、スタイルシートでブロックレベル要素表示にしてしまう指定だ。
ブロック表示にすることで、aの中の文字列を含む長方形が作成され、その範囲がクリックできる部分となる。
横着なネットユーザーにもやさしいメニューになるというわけ。
さらに、margin/padding/border/backgroundなどの指定もしやすくなり、一石二鳥である。

ちなみに、a要素全部にそれをやったら本文中リンクとかはどうなるの、と心配される方。
普通のウェブサイトならばメニューの部分はブロックで分離されてるはずなので、そのブロックの下のa要素のみに適用すればよいのです。

それができないウェブサイトなら、メンテが大変だろうから今すぐ制作方法をかえた方がいいんじゃないかなあ。

Leave a Reply