はじめに
画像は現代の Web ページにおいて不可欠な要素であり、コンテンツをより魅力的で視覚的に訴求力のあるものにします。HTML では、<img> タグを使用してドキュメントに画像を埋め込みます。このタグは非常に強力で、画像のソース、サイズ、アクセシビリティを制御するためのさまざまな属性を備えています。
この実験では、Web ページに画像を表示する方法を学びます。まずは基本的な画像の挿入から始め、段階的に代替テキストの提供、寸法の指定、ツールチップの追加、そして最終的にはクリック可能なリンクにする方法までを習得します。
環境には、~/project ディレクトリ内に index.html ファイルと labex.svg という画像ファイルが事前に用意されています。Web サーバーも実行されているため、「Web 8080」タブで変更をリアルタイムにプレビューできます。
src 属性を使用した img タグの挿入
このステップでは、HTML ページに画像を追加する方法を学びます。<img> タグは画像を埋め込むために使用されます。これは空要素タグであり、終了タグは必要ありません。<img> タグの最も重要な属性は src であり、表示したい画像のパスを指定します。
まず、左側のファイルエクスプローラーを使用して、~/project ディレクトリにある index.html ファイルを開きます。
次に、<body> セクション内の <!-- Image will be added here --> コメントのすぐ下に <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 属性は画像の代替テキストを提供します。このテキストは、何らかの理由で画像が読み込めない場合に表示されます。さらに重要な点として、スクリーンリーダーが視覚障害のあるユーザーに対して画像を説明するために使用されるため、Web サイトのアクセシビリティ向上に役立ちます。
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 属性を追加することは、Web 開発における重要なベストプラクティスです。
画像サイズのための 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」というテキストが表示された小さなボックスが現れるはずです。
クリック可能な画像リンクのための 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>タグで囲むことによる、画像をクリック可能なリンクにする方法。
これらは、リッチでインタラクティブな Web ページを作成するための必須スキルです。これで、今後の HTML プロジェクトで自信を持って画像を追加・管理できるようになりました。
