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

HTMLで画像を表示する方法！imgタグの基本と主要属性まとめ

HTMLでWebページに画像を表示するには、<img>タグを使用します。<img>タグは終了タグを持たない空要素で、src属性で指定した画像ファイルを読み込んで画面に表示します。

ここでは、<img>タグで使える主な属性を一覧形式で解説し、最後に実際に動作するサンプルコードを紹介します。

imgタグの主な属性一覧

属性値説明
aligntop / bottom / middle / left / right非推奨 — 画像の表示位置（揃え方）を指定します。
altテキスト画像が表示できない場合に代わりに表示される代替テキストを指定します。
borderピクセル非推奨 — 画像の枠線の太さを指定します。
crossoriginanonymous / use-credentialsクロスオリジン（異なるドメイン）からのアクセスが許可された第三者サイトの画像を、canvas上で再利用できるようにします。
heightピクセル または %画像の高さを指定します。
hspaceピクセル非推奨 — 画像の左右に挿入する余白の量を指定します。
ismapURL画像をサーバーサイド・イメージマップとして定義します。
longdescテキスト非推奨 — 詳細な説明文のURI/URLを指定します。alt属性による短い説明を補足するために使われます。
srcURL表示する画像ファイルのURLを指定します。（必須属性）
usemap#mapname画像をクライアントサイド・イメージマップとして定義し、<map>タグおよび<area>タグと組み合わせて使用します。
vspaceピクセル非推奨 — 画像の上下に挿入する余白の量を指定します。
widthピクセル または %画像の幅をピクセル数またはパーセンテージで指定します。

非推奨属性に関する注意点

align、border、hspace、vspace、longdescといった属性は、現在のHTML標準では非推奨（Deprecated）とされています。これらの役割は、CSS（例：text-align、margin、borderプロパティなど）で代替することが推奨されているため、新しくコードを書く場合はCSSでのスタイル指定を心がけましょう。

使用例

次のコードを実行すると、Webページ上に画像を表示できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML imgタグのサンプル</title>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg"
      alt = "Learn HTML5" height = "250" width = "270" />
   </body>
</html>

この例では、src属性に画像のURLを指定し、alt属性で代替テキストを設定しています。また、height属性とwidth属性により、画像の高さと幅を明示的に指定することで、レイアウトの崩れを防ぎ、ページ読み込み時の表示も安定します。

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

    HTMLで画像をリンクとして使用するには、<img>タグと、href属性を持つ<a>タグを組み合わせます。<img>タグはWebページに画像を表示するためのタグであり、<a>タグはリンクを作成するためのタグです。<img>タグのsrc属性には表示したい画像のURLを指定します。あわせてwidth属性とheight属性を指定することで、画像のサイズを明示的に制御でき、レイアウトの崩れを防ぐこともできます。基本的な書き方構造としては、<a>タグの中に<img>タグを入れ子にするだけです。これにより、クリック可能な画

  2. HTMLページでアニメーション画像（GIF）を表示する方法をわかりやすく解説

    HTMLにおけるアニメーション画像とは、Webページ上で動きのある画像のことです。一般的にはGIF（Graphics Interchange Format／グラフィックス・インターチェンジ・フォーマット）形式のファイルが使用されます。GIFは特別なプラグインやJavaScriptなしでもブラウザ上で自動的に再生されるため、手軽に動きのあるコンテンツを表現できるのが魅力です。 HTMLでアニメーション画像を追加するのはとても簡単です。<img>タグにsrc属性を組み合わせて使用します。src属性には、表示したいGIF画像のURLを指定します。 さらに、height属性とwidth属