HTML 画像埋め込みのマスター

はじめに

HTML の<img>タグは、Web ページに画像を埋め込むために使用されます。これは空要素であり、終了タグがありません。src属性は必須で、画像へのパスまたは URL を指定します。その他のオプション属性には、alt、title、height、widthなどがあります。この実験では、HTML の<img>タグを使用して Web ページに画像を挿入する方法を学びます。

注：index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080タブを更新して Web ページをプレビューできます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

プロジェクトをセットアップする

最初のステップは、「html-img-tag-lab」という名前の新しいディレクトリを作成し、その中に「index.html」という名前のファイルを作成することです。コードエディタでファイルを開き、<head>セクションに次のコードを追加します。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML Img Tag Lab</title>
  </head>
  <body></body>
</html>

Web ページに画像を追加する

Web ページに画像を追加するには、画像ファイルが必要です。この例では、ルートディレクトリの「images」というフォルダに「logo.png」という名前の画像があると仮定します。<img>タグを使用してこの画像を Web ページに追加するには、<body>セクションに次のコードを追加します。

<img src="images/logo.png" alt="Logo" />

このコードでは、src属性が画像ファイルへのパスを指定します。alt属性は、画像が何らかの理由で読み込めない場合に表示される代替テキストを提供します。

画像に追加の属性を追加する

画像の外観と動作を制御するために、いくつかの追加属性を追加することができます。以下は、最も一般的な属性のいくつかを使用する方法を示す例です。

<img
  src="images/logo.png"
  alt="Logo"
  width="200"
  height="100"
  title="My Website Logo"
/>

このコードでは、width属性とheight属性が画像のサイズを制御します。title属性は、ユーザーが画像の上にマウスを置いたときにツールチップを提供します。

イメージマップを使用する

イメージマップは、異なる宛先にリンクするクリック可能な領域、つまり「ホットスポット」が定義された画像です。イメージマップを作成するには、各ホットスポットの座標とそれがリンクする URL を定義する必要があります。以下は、イメージマップの例です。

<img src="images/worldmap.gif" alt="World map" usemap="#worldmap" />

<map name="worldmap">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="https://www.northamerica.com"
    alt="North America"
  />
  <area
    shape="rect"
    coords="100,0,200,100"
    href="https://www.southamerica.com"
    alt="South America"
  />
  <area
    shape="rect"
    coords="200,0,300,100"
    href="https://www.europa.com"
    alt="Europe"
  />
  <area
    shape="rect"
    coords="300,0,400,100"
    href="https://www.asia.com"
    alt="Asia"
  />
  <area
    shape="rect"
    coords="400,0,500,100"
    href="https://www.africa.com"
    alt="Africa"
  />
</map>

このコードでは、usemap属性がマップの名前を指定しており、これは<map>タグを使用して定義されています。各<area>タグは、その形状（たとえば、四角形の場合は「rect」）、座標、およびそれがリンクする URL を指定することでホットスポットを定義します。

背景として画像を追加する

HTML 要素（たとえば、Web ページの本体）の背景として画像を使用することもできます。以下は例です。

<style>
  body {
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

このコードでは、background-imageプロパティが画像ファイルへのパスを指定し、background-repeatプロパティが画像を繰り返さないように設定します。background-sizeプロパティは画像を拡大縮小して背景全体を覆うようにします。

まとめ

おめでとうございます！HTML の<img>タグを使って Web ページに画像を追加する方法をうまく学びました。また、画像のサイズや外観を制御するためのいくつかの一般的な属性の使い方と、イメージマップを作成する方法、背景として画像を使う方法も学びました。

HTML 画像の埋め込み