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です。

.test {
  display: flex;
}

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

以下は、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プロパティを使います。

.test {
  display: flex;
  align-items: flex-start;
}

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

以下は、centerを指定した時の表示です。

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

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

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

以下は、CSSの例です。

a img:hover {
  opacity: 0.4;
}

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

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

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

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