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

HTMLで画像をリンクとして使用する方法

HTMLで画像をリンクとして使用するには、<img>タグと、href属性を持つ<a>タグを組み合わせます。<img>タグはWebページに画像を表示するためのタグであり、<a>タグはリンクを作成するためのタグです。

<img>タグのsrc属性には表示したい画像のURLを指定します。あわせてwidth属性とheight属性を指定することで、画像のサイズを明示的に制御でき、レイアウトの崩れを防ぐこともできます。

基本的な書き方

構造としては、<a>タグの中に<img>タグを入れ子にするだけです。これにより、クリック可能な画像リンクが完成します。

コード例

以下のコードを実行すると、HTMLで画像をリンクとして使用する動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Image as link</title>
   </head>
   <body>
      次の画像はリンクとして機能します：<br>
      <a href="https://www.qries.com/">
         <img alt="Qries" src="https://www.qries.com/images/banner_logo.png"
         width=150" height="70">
      </a>
   </body>
</html>

ポイント

  • alt属性を必ず設定する：画像が読み込めない場合や、スクリーンリーダー利用者のために、代替テキストを指定しておきましょう。アクセシビリティとSEOの両面で重要です。
  • サイズを明示する：widthとheightを指定しておくと、ページ読み込み時のレイアウトシフト（CLS）を防げます。
  • リンク先を明確にする：画像リンクは見た目だけではリンク先が分かりにくいため、必要に応じてtitle属性で補足情報を追加するとユーザーに親切です。
  1. HTMLのmultiple属性とは？複数選択を可能にする使い方を徹底解説

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性はブール型（真偽値）属性であり、<input>要素と<select>要素の両方で使用できます。特に、HTMLフォームで複数のファイルをアップロードしたい場合にmultiple属性が活躍します。また、この属性は「email」および「file」タイプの入力フィールドに対応しています。multiple属性の主な特徴fileタイプ：ファイル選択ダイアログで複数のファイルを同時に選択可能になります（CtrlキーやShiftキーを押しながらクリック）。emailタイプ：カンマ区切

  2. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali