作りたい人aタグの範囲を広げる方法「3つ」あればなんとかなるテキストリンクや画像にリンクをするだけでなく、ひと固まりになった要素全体にリンクの枠を広げることも多くなりました。枠組みの中の写真やテキストがひと固まりになった要素のどこを触ってもマウスオーバーさせてリンクする、というのがその典型でしょうか。どの方法を使うのはケースバイケースですが、いくつか方法があるうちcssで行う「3つ」の方法をご紹介します。使用する疑似要素を利用aタグがインライン要素である、ということ基本を押さえて見てみましょう。1.テキストのリンク領域ここをクリックする「ここ」にリンクがかかってます。これでも問題はありませんが、テキスト部分だけだと心もとない。リンクの領域を少し広げたいなと思うときは、ネガティブマージンを使ってリンクの領域を広げることができます。わかりそうでわからない「ネガティブマージン」)ここをクリックする※リンクの枠を分かりやすくするため、hover字に背景色を付けています。inline-block;position:rerative;margin:-10px;padding:10px;}aタグに対してネガティブマージンを使ったことで、リンクの領域が広がりました。使用するテキストリンクで要素全体を選択範囲とする場合によく使います。ここはテキスト部分しかリンクがかかっていませんこのテキストではない部分をクリックしてもリンクが効いています。※リンクの枠を分かりやすくするため、hover字に背景色を付けています。href="javascript:void(0)">このテキストではない部分をクリックしてもリンクが効いています。block;}リスト全体のどこを触ってもクリックできるので操作性が上がります。スマートフォンなどでこの設定を使う場合、上下左右の領域を意識しましょう。手の大きな人や指の太い人が触っても、問題ないリンクの大きさを確保することが大切です。複数の要素のどこを触ってもクリックできるようにリンクの領域を拡大する場合、ちょっと前まで下記の記述を使っていました。今でも使うことはあるかと思います。href="javascript:void(0)"><section><h4>コンテンツタイトル</h4><p>この領域全体をリンクしたいと思っている</p><p>続きを見る</p></section></a>この方法でも領域全体にリンクはかかるのですが、コンテンツタイトルは赤文字で、テキストの色は黒のまま、続きを見るはリンク色を付けておきたい、などaタグの設定色とはことなるときに、設定が面倒になります。そんなときは疑似要素を使うと簡単になります。コンテンツタイトルこの領域全体をリンクしたいと思っている実際はこの文言にリンクがかかっています※わかりやすくするため、hover時に黄色の背景を設定しています。実際に<a>タグを設定しているのはテキスト部分ですが、マウスオンすると、リンクが全体に広がっているのがわかります。疑似的にリンクの領域を広げているため、もともとの設定は影響を受けません。幾重にもcssの設定をしなくてもよくなりました。-1px;}0ではなく-1pxを設定しているのは、枠線までリンクを拡大するためです。あれ、複数のリンクが入っているときはどうしたらいいの?この方法で実現するのであれば「z-index」を使えばそれぞれ場所にリンクを飛ばすことができる例)全体としては続きを見ると同じページにリンクさせる。問い合わせのみ問い合わせフォームへコンテンツタイトルこの領域全体をリンクしたいと思っている問い合わせ続きを見る※わかりやすくするため、hover時に黄色の背景を設定しています。続きを見るにリンクした「#2」が全体に広がったリンクとなっているのがわかります。問い合わせはz-indexで上に配置させていいるため、「#1」のリンクが効いています。いうclassを付与していますが、疑似要素で何番目というように指定しても設定は可能です。