HTML 画像：src、alt、サイズで埋め込みとスタイリングを学ぶ

はじめに

画像は現代のウェブページに不可欠な要素であり、コンテンツをより魅力的で視覚的に訴えるものにします。HTML では、<img>タグを使用して画像をドキュメントに埋め込みます。このタグは強力で、画像のソース、サイズ、アクセシビリティを制御するためのいくつかの属性を備えています。

この実験では、ウェブページに画像を表示する方法を学びます。まず基本的な画像を挿入し、次に代替テキストの提供、寸法の設定、ツールチップの追加、そして最終的にクリック可能なリンクへの変換を行うために、属性を段階的に追加していきます。

環境は、~/projectディレクトリにindex.htmlファイルとlabex.svgという名前の画像ファイルが事前に設定されています。「Web 8080」タブで変更をリアルタイムにプレビューできるように、ウェブサーバーも実行されています。

画像のソースとして src 属性を持つ img タグを挿入する

このステップでは、HTML ページに画像を追加する方法を学びます。<img>タグは画像を表示するために使用されます。これは空のタグであり、閉じタグを持ちません。<img>タグの最も重要な属性はsrcであり、表示したい画像のパスを指定します。

まず、左側のファイルエクスプローラーを使用して、~/projectディレクトリにあるindex.htmlファイルを開きます。

次に、<body>セクション内のコメントのすぐ下に<img>タグを追加します。src属性をプロジェクトディレクトリで提供されている画像ファイルであるlabex.svgに設定します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" />
  </body>
</html>

コードを追加した後、ファイルを保存します。結果を確認するには、ラボ環境のトップバーにあるWeb 8080タブに切り替えます。ページに LabEx ロゴが表示されているはずです。

画像の説明のために alt 属性を追加する

このステップでは、<img>タグにalt属性を追加します。alt属性は画像の代替テキストを提供します。このテキストは、何らかの理由で画像が読み込めない場合に表示されます。さらに重要なのは、スクリーンリーダーが視覚障害のあるユーザーに画像を説明するために使用し、ウェブサイトのアクセシビリティを高めることです。

index.htmlファイル内の<img>タグを修正して、alt属性を含めてください。適切なaltテキストは、画像の簡潔な説明であるべきです。

<img src="labex.svg" alt="LabEx Logo" />

これで、完全なindex.htmlファイルは次のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" />
  </body>
</html>

ファイルを保存します。画像は正しく読み込まれているため、Web 8080タブに視覚的な変更はありません。しかし、alt属性を追加することは、ウェブ開発における重要なベストプラクティスです。

画像のサイズのために width と height 属性を設定する

このステップでは、widthおよびheight属性を使用して画像のサイズを制御する方法を学びます。デフォルトでは、ブラウザは画像を元の寸法で表示します。widthおよびheightを指定することで、画像のサイズを変更でき、ブラウザが画像読み込み前に適切なスペースを確保するのに役立ち、ページレイアウトのずれを防ぎます。

画像の幅を200ピクセル、高さを50ピクセルに設定しましょう。index.htmlの<img>タグにwidthおよびheight属性を追加します。

<img src="labex.svg" alt="LabEx Logo" width="200" height="50" />

完全なindex.htmlファイルは次のようになります。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" width="200" height="50" />
  </body>
</html>

ファイルを保存し、Web 8080タブに切り替えます。画像が指定した寸法にリサイズされていることに気づくでしょう。

画像のツールチップのために title 属性を使用する

このステップでは、<img>タグにtitle属性を追加します。title属性は、要素に関する追加情報を提供します。画像の場合、この情報は通常、ユーザーがマウスカーソルを画像の上に置いたときにツールチップとして表示されます。

次のステップで実装するクリック時の動作について、ユーザーにヒントを与えるために画像にタイトルを追加しましょう。index.htmlの<img>タグにtitle属性を追加します。

<img
  src="labex.svg"
  alt="LabEx Logo"
  width="200"
  height="50"
  title="Go to LabEx Homepage"
/>

index.htmlファイルには、次のコードが含まれているはずです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img
      src="labex.svg"
      alt="LabEx Logo"
      width="200"
      height="50"
      title="Go to LabEx Homepage"
    />
  </body>
</html>

ファイルを保存し、Web 8080タブを更新します。次に、マウスカーソルを画像の上に移動します。「Go to LabEx Homepage」というテキストが表示された小さなボックスが現れるはずです。

クリック可能な画像リンクのために img を a タグで囲む

この最終ステップでは、画像をクリック可能なリンクにします。これを行うには、<img>タグをアンカータグ<a>で囲む必要があります。<a>タグはハイパーリンクを定義し、そのhref属性はリンク先のページの URL を指定します。

既存の<img>タグを<a>タグで囲みます。<a>タグのhref属性をhttps://labex.ioに設定します。

<a href="https://labex.io">
  <img
    src="labex.svg"
    alt="LabEx Logo"
    width="200"
    height="50"
    title="Go to LabEx Homepage"
  />
</a>

最終的なindex.htmlファイルは次のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <a href="https://labex.io">
      <img
        src="labex.svg"
        alt="LabEx Logo"
        width="200"
        height="50"
        title="Go to LabEx Homepage"
      />
    </a>
  </body>
</html>

ファイルを保存し、Web 8080タブに移動します。画像の上にマウスカーソルを置くと、それがリンクであることを示すポインターに変わることに気づくでしょう。画像をクリックすると、LabEx のホームページに移動しようとします。

まとめ

実験完了おめでとうございます！HTML での画像の扱い方を習得しました。

この実験では、以下の主要な概念を学びました。

<img>タグを使用した画像の埋め込み。
src属性による画像ソースの指定。
alt属性によるアクセシビリティのための代替テキストの提供。
widthおよびheight属性による画像寸法の制御。
title属性によるツールチップの追加。
<a>タグで囲むことによる画像クリックリンク化。

これらは、リッチでインタラクティブなウェブページを作成するための不可欠なスキルです。これで、今後の HTML プロジェクトで自信を持って画像を追加・管理できるようになります。