ホームページ制作MATSUTE BLOG

この記事は「2020年12月25日」に書かれた記事です

1. テキストのリンク領域
2. display : block　を使用する
3. 疑似要素を利用

aタグがインライン要素である、ということ基本を押さえて見てみましょう。

1．テキストのリンク領域

ここをクリックする

「ここ」にリンクがかかってます。これでも問題はありませんが、

テキスト部分だけだと心もとない。リンクの領域を少し広げたいな

と思うときは、ネガティブマージンを使ってリンクの領域を広げることができます。（4-6 わかりそうでわからない「ネガティブマージン」）

ここをクリックする

※リンクの枠を分かりやすくするため、hover字に背景色を付けています。

a  {
display: inline-block;
position:rerative;
margin:-10px;
padding:10px;
}

aタグに対してネガティブマージンを使ったことで、リンクの領域が広がりました。

2．display : block　を使用する

テキストリンクで要素全体を選択範囲とする場合によく使います。

• ここはテキスト部分しかリンクがかかっていません
• このテキストではない部分をクリックしてもリンクが効いています。

※リンクの枠を分かりやすくするため、hover字に背景色を付けています。

HTML

<ul>
<li><a href="javascript:void(0)">このテキストではない部分をクリックしてもリンクが効いています。</a></li>
</ul>

CSS
a {
display : block;
}

リスト全体のどこを触ってもクリックできるので操作性が上がります。スマートフォンなどでこの設定を使う場合、上下左右の領域を意識しましょう。手の大きな人や指の太い人が触っても、問題ないリンクの大きさを確保することが大切です。

3．疑似要素を利用

複数の要素のどこを触ってもクリックできるようにリンクの領域を拡大する場合、ちょっと前まで下記の記述を使っていました。今でも使うことはあるかと思います。

<a href="javascript:void(0)">
<section>
<h4>コンテンツタイトル</h4>
<p>この領域全体をリンクしたいと思っている</p>
<p>続きを見る</p>
</section>
</a>

この方法でも領域全体にリンクはかかるのですが、コンテンツタイトルは赤文字で、テキストの色は黒のまま、続きを見るはリンク色を付けておきたい、などaタグの設定色とはことなるときに、設定が面倒になります。そんなときは疑似要素を使うと簡単になります。

※わかりやすくするため、hover時に黄色の背景を設定しています。実際に<a>タグを設定しているのはテキスト部分ですが、マウスオンすると、リンクが全体に広がっているのがわかります。

疑似的にリンクの領域を広げているため、もともとの設定は影響を受けません。
幾重にもcssの設定をしなくてもよくなりました。

HTML

<div>
<h4>コンテンツタイトル</h4>
<p>この領域全体をリンクしたいと思っている</p>
<a href="javascript:void(0)">実際はこの文言にリンクがかかっています</a>
</div>

CSS
a {
position:relative;
}

a::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}

あれ、複数のリンクが入っているときはどうしたらいいの？

この方法で実現するのであれば「z-index」を使えばそれぞれ場所にリンクを飛ばすことができる

例）全体としては続きを見ると同じページにリンクさせる。問い合わせのみ問い合わせフォームへ

※わかりやすくするため、hover時に黄色の背景を設定しています。続きを見るにリンクした「＃2」が全体に広がったリンクとなっているのがわかります。また、問い合わせはz-indexで上に配置させていいるため、「＃1」のリンクが効いています。

HTML

<div>
<h4>コンテンツタイトル</h4>
<p>この領域全体をリンクしたいと思っている</p>
<ul>
<li><a href="javascript:void(0)" class=”contact”>問い合わせ</a></li>
<li><a href="javascript:void(0)">続きを見る</a></li>
</ul>
</div>

CSS
a {
position:relative;
}

a::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}

a.contact::before {
position: relative;
z-index:2;
}