HTMLで画像をリンクにする方法

画像は、リンク(ハイパーリンク)としても使えます。

本ページでは、画像をリンクにする方法を説明します。また、画像と文字を一体でリンクにする方法、マウスが上にある時だけ半透明にする方法についても説明します。

画像をリンクにする方法

画像をリンクにするためには、HTMLで以下のように記述します。

【画像をリンクとして使うためのHTML】
<a href="page.html">
<img src="images/image1.png" alt="image1の説明">
</a>

つまり、imgをaの子要素にします。これで、画像がクリックされると、指定したページ(上ではpage.html)に移動します。

a要素のhref属性は、リンク先(移動先)のファイルを示します。

同じドメインであれば、上記のようにファイル名(page.html部分)だけ記述することも可能です。異なるドメインの場合は、例えばhttps://example.com/page.htmlなどとドメイン含めて記述します。

画像と文字を一体でリンクにする方法

以下のように、画像の横に文字を並べて、画像も文字も一体でリンクにすることができます。

画像の横に文字が表示されて両方がリンクになっている

これは、記事の一覧を画像つきで紹介する時に使えます。

画像の横にテキストを表示するのであれば、span要素を使えば実現可能です。ただし、テキストが2段になると、画像の下にテキストが表示されてしまいます。

2段以上になっても、画像の右に表示するためには、フレックスボックスを使います。以下は、CSSです。

【フレックスボックスを使うCSS】
.test {
  display: flex;
}

上記で、クラスtestを適用した要素はフレックスコンテナになるため、子要素のフレックスアイテムが横に並んで表示されるようになります。

以下は、HTMLです。

【a要素の子要素にimgとpを使うHTML】
<a href="page.html" class="test">
<img src="images/image1.png" alt="image1の説明">
<p>画像の説明です。2段以上になっても画像の右に表示されます。</p>
</a>

a要素で、クラスtestを適用してフレックスコンテナにすることで、img要素とp要素を横並びにしています。a要素の子要素なので、どちらもリンクになっています。

なお、文書が長くなって行数が増えると、画像が自動で高さを揃えるため伸びてゆがみます。

画像を伸ばさないためには、CSSでalign-itemsプロパティを使います。

【フレックスボックスを使うCSS】
.test {
  display: flex;
  align-items: flex-start;
}

flex-startは上揃えです。flex-endにすると下揃え、centerにすると中央に揃えます。

以下は、centerを指定した時の表示です。 画像の横の文字は複数行で表示されているが、画像はその中央に表示されている

画像は、右の文書に対して縦方向の中央に表示されています。

画像にカーソルを乗せると変化する方法

画像の上にマウスがあると、半透明にしてリンクしていることが視覚的にわかるようにできます。

以下は、CSSの例です。

【画像の上にマウスがあると半透明にするためのCSS】
a img:hover {
  opacity: 0.4;
}

セレクタをa img:hoverと記述すると、リンクとして使っている画像でマウスが上にある時だけが対象になります。

opacityは、0〜1の間で不透明度を指定します。0に近いほど透明になり、0は完全に透明になって見えなくなります。1は不透明で、デフォルトです。

上記は、以下のように表示されます(リンクは入れていません)。

水をイメージする画像で、マウスを乗せると半透明になる

マウスが上にある時だけ、半透明で表示されます。

最初のページHTMLに画像を挿入する方法