バナーなど画像にリンクを設定する

画像をリンクにする

リンクはテキストやボタンの形にしたものが多いですが、バナーやロゴなど画像と組み合わせたリンクもよく使われます。
今回はこの画像を使ったリンクの設定方法を解説します。

コード例

HTMLとCSSのコードは非常にシンプルです。

コード例

<style>
.btn a {
	display: inline-block;
	width: 300px;
}
.btn a img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
</style>
<p class="btn"><a href="#">もっと見る</a></p>

HTMLは基本的にはリンクを設定するa要素でimg要素を囲むだけで大丈夫です。

CSSではa要素をブロックレベルにしている部分と、img要素でvertical-alignプロパティを指定している部分が重要です。

画像をリンクにするだけならa要素はインラインレベルでも問題ありませんが、画像のマルチデバイス対応などでwidthプロパティを使って横幅を指定することがあります。
横幅の指定はブロックレベルである必要があるため、「display: inline-block;」はそのための指定です。（高さを指定したいときも同様）

img要素の「vertical-align: top;」は画像の無駄な余白を削除するための指定です。
こちらの指定がなかった場合、img要素は下部に若干余白が発生します。
この指定をすることで、画像のサイズピッタリで綺麗なリンクを表示することが可能になります。

マウスオン（ホバー）時に画像を透過

マウスカーソルがバナー画像の上に乗ったときに透過する方法を解説します。

コード例

<style>
.btn a {
	display: inline-block;
	width: 300px;
	transition: all 0.5s;
}
.btn a img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
.btn a:hover {
	opacity: 0.8;
}
</style>
<p class="btn"><a href="#">もっと見る</a></p>

リンクのホバー時の透過度はopacityプロパティで設定しています。

その上のtransitionプロパティでは、透過えフィクトの速度です。
「0.5s」は0.5秒を意味します。
transitionプロパティはベンダープレフィクスを指定することも多いですが、IE10以降、Edge、Safari、Chrome、Firefoxの各種最新版はこのプロパティに対応しているため、基本的には指定しなくても大丈夫です。
もし念のため指定する場合は次のコードとなります。

コード例

<style>
.btn a {
	display: inline-block;
	width: 300px;
	-ms-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.btn a img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
.btn a:hover {
	opacity: 0.8;
}
</style>
<p class="btn"><a href="#">もっと見る</a></p>