HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで画像リンクを作成する方法【初心者向け】

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

画像はあらゆるWebページに欠かせない要素であり、別ページへのリンクを作る手段としても非常に有効です。アンカー(<a>)タグのhref属性と<img>タグを組み合わせることで、クリックすると別のページへ移動できる「画像リンク」を簡単に作成できます。

以下の手順に従って、実際に作ってみましょう。

画像リンクの作成手順

  1. div要素を作成する
    まずは<div>要素を用意します。この中に<img>タグ、アンカータグ、そしてリンクに関する説明文などをまとめて配置していきます。
  2. アンカータグを作成する
    次に<a>タグを作成します。<a>タグはhref属性(ハイパーテキスト参照)によってリンク先を指定できます。移動させたいサイトやファイルのURLをhrefに設定しましょう。
  3. <img>タグを挿入する
    <a>タグの開始タグと終了タグの間に<img>タグを記述します。<img>タグは閉じタグが不要な空要素(セルフクロージング)である点に注意してください。また、src属性には、リンクに使用する画像のURLまたはパスを指定します。
  4. 画像の説明文を追加する
    ユーザーが「この画像はクリックできる」とひと目で分かるよう、説明文を添えましょう。<caption>タグ、<div>タグ、<h2>要素、<p>タグなど、好きな要素を使うことができます。

下のコードエディタにあるのは実際に動作するサンプルです。ぜひいろいろと触って試してみてください。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image Link</title>
   <style>
       div {
           width: 500px;
           display: flex;
           flex-flow: column wrap;
       }
       img {
           width: 100%;
       }
       caption {
           width: 100%;
           height: 50px;
       }
   </style>
</head>
<body>
   <div>
       <a href="https://www.goldengate.org/" target="_blank" referrerpolicy="no-referrer">
           <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2100&amp;q=80" alt="Golden Gate Bridge"  refer/>
       </a>
       <caption>
           An icon in the San Francisco skyline, the Golden Gate bridge shines in the twilight night sky. Click the image to learn more information about the Golden Gate bridge.
       </caption>
 
   </div>
</body>
</html>

補足：リンク範囲をどこに設定すべきか

最後に一つ重要なポイントがあります。「リンク先を説明しているのはキャプション部分だから」という理由で、<a>タグをキャプションだけに適用したくなるかもしれません。しかし、これは避けましょう。

多くのユーザーは「画像をクリックすると新しいタブでリンク先が開く」という挙動を期待しています(サンプルコード内のtarget="_blank"はまさにそのための指定です)。そこで、次のいずれかの方法を採用するのがおすすめです。

  • <a>タグで画像を囲み、テキストは画像の説明としてそのまま表示する
  • テキストと<img>の両方を<a>タグで囲む

どちらの方法でも問題なく機能するので、デザインや用途に合わせて選択してください。

  1. HTMLでダウンロードリンクを作成する方法をわかりやすく解説

    HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。コード例以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。<!DOCTYPE html> <html> <body> <h1>Download Link example</h1> <a href="https://i.picsum.photos/id/225/800

  2. OneNoteでリンクを作成する方法|ノートブック・ページ・段落・ファイルへのリンク設定手順

    OneNoteでプロジェクトを作成する際、複数のOneNoteノートブック同士をリンクで結び付ける必要があることがあります。この記事では、OneNoteのノートブック、セクション、ページ、段落へのリンクを作成する方法を詳しく解説します。リンクを作成すれば、ノートブック内の任意の場所に貼り付けることができ、リンクをクリックするだけでOneNoteが該当するノートブックを自動的に開いてくれます。 OneNoteノートブックでリンクを活用することには、次のようなメリットがあります。 難しい用語や重要なキーワード同士をリンクで結び付けられるため、自分と読者の両方の時間を節約できます。 目次からノート