HTML で画像を挿入してスタイリングする

はじめに

この実験では、さまざまなテクニックと属性を使って HTML に画像を効果的に挿入し、スタイルを付ける方法を学びます。この実験では、ソースと代替テキストを持つ基本的な画像の追加、固定画像サイズの設定、画像の整列、および情報的なツールチップの作成などの必須スキルがカバーされています。手順を追うことで、画像要素を操作してウェブページのデザインを向上させ、ユーザーエクスペリエンスを改善する実践的な経験を得ることができます。

実践的な練習を通じて、画像の表示とアクセシビリティを制御するために、src、alt、width、height、titleなどのさまざまな HTML 属性を探ります。これらのスキルは、視覚的に魅力的で応答性のあるウェブページを作成し、画像を適切に統合してスタイルを付けるためのウェブ開発者にとって不可欠です。

src と alt 属性を使って基本的な画像を追加する

このステップでは、<img> タグとその必須属性を使って HTML ページに基本的な画像を追加する方法を学びます。画像はウェブデザインの重要な部分であり、ウェブページをより視覚的に魅力的で情報豊かにするのに役立ちます。

まず、作業用の HTML ファイルを作成しましょう。WebIDE を開き、~/project ディレクトリに images.html という名前の新しいファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Images</title>
  </head>
  <body>
    <!-- 画像をここに追加します -->
  </body>
</html>

<img> タグは、HTML ドキュメントに画像を埋め込むために使用される自己終了タグです。重要な属性は 2 つあります。

src（ソース）：画像ファイルへのパスを指定します
alt（代替テキスト）：画像のテキスト説明を提供します

HTML ファイルに画像を追加しましょう。

<body>
  <img
    src="https://file.labex.io/static/images/labex-logo-dark.png"
    alt="LabEx Logo"
  />
</body>

src 属性は画像の URL を指し、alt 属性は次のような説明を提供します。

画像の読み込みに失敗した場合に表示されます
視覚障害者向けの画面リーダーが画像を説明するのに役立ちます
検索エンジンにコンテキストを提供することで SEO を向上させます

ファイルを保存し、ウェブブラウザで開いて画像を確認しましょう。

注：WebIDE で HTML ファイルをプレビューする方法に関する詳細はこちらをご覧ください。

LabEx logo dark version

幅と高さで固定画像サイズを設定する

このステップでは、HTML の width と height 属性を使って画像のサイズを制御する方法を学びます。これらの属性を使うと、画像の正確なサイズを指定でき、ページのレイアウトと読み込み性能の向上に役立ちます。

前のステップで作成した images.html ファイルを開きます。既存の画像を変更し、さまざまなサイズ調整技術を示すためにさらにいくつかの画像を追加します。

HTML で画像のサイズを設定するための 2 つの属性があります。

width：画像の幅をピクセル単位で設定します
height：画像の高さをピクセル単位で設定します

前の画像を更新し、新しい例を追加しましょう。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Dimensions</title>
  </head>
  <body>
    <!-- 固定サイズの元の画像 -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
    />

    <!-- 異なるサイズの別の画像 -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="300"
      height="150"
    />

    <!-- 幅のみ指定の画像 -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="250"
    />
  </body>
</html>

画像サイズに関する要点：

サイズはピクセル単位で指定します
幅、高さのどちらか一方、または両方を設定できます
一方のサイズのみを指定すると、画像は比例して拡大縮小されます
サイズを設定することで、画像の読み込み時のページレイアウトのシフトを防ぐことができます

ウェブブラウザでの例の出力では、さまざまなサイズの 3 つの画像が表示されます。

非推奨の align 属性を使って画像を整列させる

このステップでは、HTML における画像の配置について、非推奨の align 属性について学びます。現代のウェブデザインではレイアウトに CSS を使用しますが、この画像の整列の歴史的な方法を理解することは重要です。

前のステップの images.html ファイルを開き、さまざまな画像の整列を示すように変更します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Alignment</title>
  </head>
  <body>
    <p>
      <!-- 左揃えの画像 -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="left"
        width="150"
        height="75"
      />
      このテキストは左揃えの画像の周りを流れます。
    </p>

    <p>
      <!-- 右揃えの画像 -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="right"
        width="150"
        height="75"
      />
      このテキストは右揃えの画像の周りを流れます。
    </p>

    <p>
      <!-- 中央揃えの画像 -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="middle"
        width="150"
        height="75"
      />
      このテキストは画像の中央に揃っています。
    </p>
  </body>
</html>

align 属性は主に 3 つの値をサポートしています。

left：画像を左に整列させ、テキストがその周りを流れる
right：画像を右に整列させ、テキストがその周りを流れる
middle：画像を垂直方向にテキストのベースラインと整列させる

重要なメモ：

align 属性は HTML5 では非推奨となっています
現代のウェブデザインではレイアウトに CSS の float やフレックスボックスを使用します
この属性は歴史的な理解のために残されています

例の出力では、段落内で異なる位置に配置された画像が表示されます。

注：Labby のダイアログボックスが右揃えの画像を隠す場合があります。

title 属性を使ってツールチップ情報を追加する

このステップでは、画像にツールチップ情報を追加するために title 属性をどのように使用するかを学びます。ユーザーが要素の上にマウスを乗せるときに、ツールチップは追加のコンテキストや説明を提供します。

前のステップの images.html ファイルを開き、ツールチップの使用方法を示すように変更します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Tooltips</title>
  </head>
  <body>
    <!-- 単純なツールチップ付きの画像 -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="Official LabEx Logo"
    />

    <!-- より詳細なツールチップ付きの画像 -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="LabEx Logo: Learn coding through hands-on labs"
    />

    <!-- 異なるツールチップ付きの複数の画像 -->
    <div>
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Programming Logo"
        width="150"
        height="75"
        title="Web Development"
      />

      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Cloud Logo"
        width="150"
        height="75"
        title="Cloud Computing"
      />
    </div>
  </body>
</html>

title 属性に関する要点：

画像の上にマウスを乗せるときに追加情報を提供します
画像、テキスト、その他のほとんどの HTML 要素で機能します
コンテキストを提供することでユーザーエクスペリエンスを向上させます
マウスが要素の上にあるときに小さなポップアップで表示されます

ウェブブラウザでこれらの画像の上にマウスを乗せると、ツールチップのテキストが表示されます。

まとめ

この実験では、参加者は画像の埋め込みとスタイリングの重要な技術を身につけることで、HTML における画像を効果的に扱う方法を学びました。この実験では、src や alt などの重要な属性を持つ <img> タグを使って画像を追加するなど、画像の表示とアクセシビリティを確保するための基本的なスキルを学びました。学習者は、width と height 属性を使って画像のサイズを制御する方法を探求し、これらの設定がページのレイアウトと性能にどのように影響するかを理解しました。

実践演習では、学生たちに固定画像サイズの設定、title 属性を使ったツールチップ情報の追加、さまざまな画像の整列戦略の実験など、さまざまな画像操作技術を学んでもらいました。HTML 画像要素を実際に操作することで、参加者は視覚的に魅力的で応答性の高いウェブページデザインを作成するための貴重な洞察を得ました。