HTML & CSS

最終更新日:
公開日:

レシピ

リンク

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

a要素とimg要素を組み合わせた、バナー画像リンクの作成方法を解説。マウスオン(ホバー)した時に画像を透過する方法も合わせてご紹介します。

この記事のポイント

  • 画像にリンクを設定する
  • 画像の余計な余白をとって綺麗に表示する

目次

画像をリンクにする

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

バナー画像を使ったリンクの例

コード例

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>