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

Webページで画像を表示する方法｜HTMLのimgタグと主要属性をわかりやすく解説

Webページ上に画像を表示するには、HTMLの<img>タグを使用します。このタグでは、画像ファイルの場所（src属性）、代替テキスト（alt属性）、表示サイズ（width・height属性）などを指定することができます。

特にalt属性は、画像が何らかの理由で読み込めなかった場合に代わりに表示されるテキストです。また、視覚に障害のあるユーザーが利用するスクリーンリーダーでも読み上げられるため、アクセシビリティの観点からも必ず設定しておくことをおすすめします。

imgタグで使える主な属性一覧

属性説明
alt画像の代替テキスト。画像が表示できない場合に表示される
height画像の高さを指定する
ismap画像をサーバーサイド・イメージマップとして扱う
longdesc画像の詳細な説明が記載されたページのURLを指定する
src画像ファイルのURL（パス）を指定する
usemap画像をクライアントサイド・イメージマップとして扱う
width画像の幅を指定する

なお、<img>タグは終了タグを持たない「空要素」である点に注意してください。
Webページで画像を表示する方法｜HTMLのimgタグと主要属性をわかりやすく解説

コード例

以下のコードを実行すると、HTMLページ内に画像を実際に表示させることができます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML img tag</title>
   </head>
   <body>
      <h1>Tutorialspoint</h1>
      <h2>Simply Easy Learning</h2>
      <img src="/green/images/logo.png" alt="Tutorialspoint" width="260" height="100">
   </body>
</html>
  1. WordPressで外部画像をアイキャッチ画像として設定する方法|「Featured Image from URL」プラグイン活用ガイド

    アイキャッチ画像は、ブログ記事にとって欠かせない重要な要素です。最新記事の一覧ページやスライダー、Facebookでのシェアなど、さまざまな場面で活用されます。しかし、WordPressでアイキャッチ画像を設定するには、通常、画像をメディアライブラリにアップロードし、そこから選択する必要があります。 では、使いたい画像がすでにWeb上のどこかにある場合はどうすればよいのでしょうか?一度ハードディスクにダウンロードしてから、改めてギャラリーへアップロードし直す手間が必要なのでしょうか?実は、面倒な作業なしに外部画像をそのままアイキャッチ画像として使う方法があります。 「Featured Imag

  2. 画像メタデータエディタの使い方完全ガイド｜EXIF・GPS情報の編集・削除方法

    記事の概要：メタデータエディタは、プロのカメラマンや編集者にとって欠かせない便利なツールです。写真に含まれるEXIFデータ、GPSデータ、IPTCデータ、XMPデータなどを編集・削除できます。本記事では、メタデータエディタの必要性と具体的な使い方について詳しく解説します。 メタデータとは、ファイルの作成に関する詳細情報のことです。画像メタデータには、デジタル画像が生成された際のさまざまな情報が記録されています。例えば、カメラの機種、撮影日時、撮影場所、ピクセル数、保存時に使用された圧縮方式などです。デジタル写真のメタデータからは、こうした豊富な情報を読み取ることができます。EXIFエディタを使