今回はHTMLのimgタグについて解説します。
imgタグとは？
HTMLのimgタグは、ウェブページに画像を表示するための要素です。
imgタグの基本的な使い方と、よく使用される属性について解説します。
imgタグの基本的な書き方
<img src="画像のURL" alt="代替テキスト">- src属性: 画像のURLを指定します。ローカルのファイルパスや外部の画像ファイルのURLを指定できます。
- alt属性: 画像が表示されなかった場合や、スクリーンリーダーなどの補助技術を使用している場合に代替テキストとして表示されます。画像の内容や役割を説明するテキストを指定します。
画像のローカルファイルへのリンク
ウェブページと同じディレクトリ内にある画像ファイルを表示するには、src属性にファイルの名前を指定します。
<img src="image.jpg" alt="画像の説明">ファイル名と拡張子は正確に指定する必要があります。
なお、ディレクトリ構造がある場合には、適切なパスを指定する必要があります。
外部の画像ファイルへのリンク
ウェブ上の他の場所にある画像を表示するには、src属性に画像ファイルのURLを指定します
<img src="https://example.com/image.jpg" alt="画像の説明">上記の例では、"https://example.com/image.jpg"というURLの画像を表示しています。
画像のURLは、直接指定するか、JavaScriptやサーバーサイドのスクリプトから生成することもできます。
代替テキストの利用
alt属性は画像が表示されなかった場合や補助技術で利用されます。
画像の内容や役割を簡潔に説明するテキストを指定します。
<img src="image.jpg" alt="カラフルな風景の画像">代替テキストはSEO（検索エンジン最適化）の観点からも重要です。
検索エンジンは画像を読み込むことはできませんが、代替テキストを解釈してコンテンツの関連性を判断します。
画像のサイズ指定
imgタグには、幅と高さを指定するための属性があります。
これにより、画像の表示サイズを制御することができます。
<img src="image.jpg" alt="画像の説明" width="300" height="200">上記の例では、幅が300ピクセル、高さが200ピクセルに設定された画像が表示されます。
ただし、指定したサイズが画像の実際のサイズと異なる場合、画像が歪んで表示される可能性があります。
そのため、実際の画像の比率を保つために、幅または高さの一方を指定し、もう一方は省略することもできます。
<img src="image.jpg" alt="画像の説明" width="300">上記の例では、幅が300ピクセルと指定されており、高さは画像の比率に基づいて自動的に計算されます。
その他の属性
imgタグには他にも様々な属性があります。
以下にいくつかの一般的な属性を紹介します。
title属性
画像にマウスカーソルを合わせると表示されるツールチップを指定します。
<img src="image.jpg" alt="画像の説明" title="クリックして拡大表示">border属性
画像の周囲に境界線を表示します。
<img src="image.jpg" alt="画像の説明" border="1">align属性
画像の水平方向の配置を指定します（left、right、centerなど）
<img src="image.jpg" alt="画像の説明" align="left">style属性
CSSスタイルを直接指定して画像のスタイルをカスタマイズします
<img src="image.jpg" alt="画像の説明" style="border: 1px solid black; width: 300px;">これらの属性を組み合わせることで、さまざまな見た目や機能を持つ画像を作成することができます。
まとめ
imgタグはHTMLにおいて画像を表示するための重要な要素です。
基本的な構文や属性を使いこなすことで、ウェブページに魅力的な画像コンテンツを追加することができます。
代替テキストやサイズ指定など、画像のアクセシビリティや表示制御にも注意を払いながら、適切に利用しましょう。
