【ITニュース解説】Day 4/365 Days of Full Stack Challenge: Bringing Your Page to Life - Inserting Images in HTML

ウェブ開発を進める中で、これまで作成してきたウェブページは、情報が整理され、構造もしっかりとしたものになってきた。しかし、現代のウェブサイトに不可欠な要素が一つ不足している。それは視覚的なコンテンツ、つまり画像だ。画像はウェブページをより魅力的で、分かりやすく、そしてプロフェッショナルなものにする上で欠かせない要素である。今回は、HTMLに画像を埋め込む具体的な方法と、その際に特に重要となるアクセシビリティへの配慮、すなわちalt属性の設定について、システムエンジニアを目指す初心者にも理解できるように詳しく解説する。

ウェブページに画像を挿入するために使用するHTMLタグは<imgタグ>である。このタグは、これまでの学習で使ってきた多くのタグとは異なり、開始タグと終了タグで内容を囲む形式ではない。<imgタグ>は自己終了タグであり、単独で完結する。一般的な記述方法としては、<img />のようにスラッシュを含める場合もあれば、<img >のように記述する場合もある。このタグは、画像そのものをHTMLファイルの中に直接埋め込むのではなく、どこにある画像をどのように表示するかを「属性」という形で指定することで機能する。中でも、画像を正しく表示し、ウェブページの品質を保証するために最も重要な属性がsrcとaltの二つである。

まず、src属性から説明する。これは「ソース」の略であり、表示したい画像ファイルがどこにあるのかをブラウザに伝えるための必須属性だ。src属性に指定する画像のパス（場所）には、主に二つの種類がある。一つは「相対URL」で、もう一つは「絶対URL」だ。相対URLは、現在開いているHTMLファイルからの相対的な位置で画像ファイルを指定する方法を指す。例えば、HTMLファイルと同じフォルダに「my-cat.jpg」という画像がある場合、<img src="my-cat.jpg" />と記述する。また、HTMLファイルがあるフォルダの中に「images」というサブフォルダがあり、その中に「website-logo.png」という画像がある場合は、<img src="images/website-logo.png" />のように記述する。自身のウェブサイトを構築する際には、この相対URLを使うのが最も一般的で、推奨される方法である。もう一つの絶対URLは、ウェブ上にある画像の完全なアドレスを直接指定する方法だ。例えば、<img src="https://example.com/path/to/image.jpg" />のように、http://またはhttps://から始まる完全なURLを記述する。しかし、他人のウェブサイトにホストされている画像を直接リンクする行為は「ホットリンク」と呼ばれ、一般的には推奨されない。その理由は、相手のサイトの帯域幅を勝手に消費することになる上、相手が画像を移動したり削除したりした場合、自分のサイトで画像が表示されなくなるという制御不能なリスクがあるためだ。さらに、著作権や検索エンジン最適化（SEO）の観点からも問題が生じる可能性があるため、基本的には自分の管理下にある画像を使用すべきだ。

次に、alt属性について詳しく解説する。altは「代替テキスト」の略で、画像が表示できない場合や、画像を見ることができないユーザーのために、その画像が何であるかを説明するテキストを提供する。この属性はウェブページのアクセシビリティを確保するために不可欠であり、ウェブ開発におけるベストプラクティスとして設定が強く推奨される。alt属性がなぜそこまで重要なのか、その理由はいくつかある。第一に、視覚障がいのあるユーザーがウェブページを利用する際に使用する「スクリーンリーダー」というソフトウェアは、画像そのものを見ることはできないが、alt属性に書かれたテキストを読み上げることで、画像の内容や目的をユーザーに伝えることができる。これにより、誰もが等しく情報にアクセスできるウェブサイトとなる。第二に、ネットワークの接続が遅い、画像ファイルのパスが間違っている、サーバーに問題があるなど、何らかの理由で画像がウェブページに表示されない「画像が壊れた」状態になった場合に、alt属性に記述されたテキストが画像の位置に表示される。これにより、ユーザーは画像がなくてもその部分がどのようなコンテンツであったかを理解できる。第三に、検索エンジン最適化（SEO）の観点からも重要だ。Googleなどの検索エンジンは、ウェブページの画像を理解するためにalt属性のテキストを利用する。適切な代替テキストを設定することで、画像検索で自分のページが上位に表示される可能性が高まり、より多くのユーザーに見てもらえるようになる。良いaltテキストを書くためのポイントは、画像の内容を正確かつ簡潔に記述することだ。もし画像がリンクやボタンとして機能する場合、その画像が何をするものなのか、その機能も説明に含めるべきだ。一方で、純粋に装飾的な目的の画像で、情報的な価値を持たない場合は、alt=""のように空のalt属性を設定することで、スクリーンリーダーがその画像を読み飛ばすように指示できる。これにより、不要な情報が読み上げられるのを防ぎ、ユーザー体験が向上する。

src属性とalt属性が画像の埋め込みにおける必須の要素である一方、他にも便利でよく使われるオプション属性がある。それがwidthとheight属性だ。これらの属性は、画像がウェブページに表示される際の横幅と高さをピクセル単位で指定する。例えば、<img src="photo.jpg" alt="風景写真" width="800" height="600" />のように記述する。これらの属性を設定することは、ウェブページのパフォーマンスにとって良い習慣である。画像がまだ完全に読み込まれていない状態でも、ブラウザはwidthとheightの値に基づいて画像の表示領域を事前に確保できるため、画像が読み込まれた際にページのレイアウトが突然変化してガタつく現象（レイアウトシフト）を防ぐことができる。これはユーザー体験を向上させる重要な要素だ。将来的にCSSを使って画像をレスポンシブ（様々な画面サイズに合わせて表示を調整する）に表示する方法も学ぶことになるが、HTMLで初期のサイズを指定することは、パフォーマンス上のベストプラクティスとして認識されている。

これまでの説明を踏まえて、実際にHTMLコードの中で画像をどのように活用するか具体的な例を見てみよう。例えば、旅行記のブログ記事を作成する場合を想定する。まず基本的なHTMLの構造を準備し、<h1>タグでページのタイトルを、<p>タグで導入文を記述する。その記事のメインとなる「ヒーロー画像」を配置する際には、src属性で画像ファイルへの相対パスを指定し、alt属性には「晴れた日のパシフィック・クレスト・トレイルから見た山脈のパノラマビュー」のように、画像の内容が明確に伝わる記述を含める。さらに、widthとheight属性で適切なサイズを設定すると良いだろう。記事の中で特定のポイントを説明するために、例えば野生動物について記述した後に、その動物の画像を挿入する。ここでも、srcで画像パスを指定し、「好奇心旺盛なラバの鹿がトレイルに立ち、カメラの方を見ている」といった具体的なaltテキストを記述する。装備品リストのような箇条書きの後にも、その装備品が並べられた画像のパスと、それが「草地に広げられたハイキング用品、ブーツ、バックパック、水筒、地図など」であることを説明するaltテキストを設定する。このように、画像は単なる視覚的な飾りではなく、文章の内容を補完し、物語をより豊かにする重要な要素として機能する。

今日学んだこれらの知識を実践することは、ウェブ開発スキルを向上させる上で非常に重要である。具体的な課題として、まず自分のプロジェクトフォルダ内に「images」という新しいフォルダを作成し、著作権に問題のない画像（自分で撮影した写真やUnsplash、Pexelsなどの無料素材サイトから入手した画像）を2〜3枚、その「images」フォルダに保存する。次に、「gallery.html」という新しいHTMLファイルを作成し、画像を展示するページを作成する。このページには、タイトルと導入の段落を含め、各画像を<imgタグ>で表示させ、src属性には必ずimages/your-image.jpgのような相対パスを使用する。そして、すべての画像に意味があり、記述的で詳細なalt属性を忘れずに設定する。任意でwidthとheight属性を設定しても良い。最後に、見出しや段落を使って、それぞれの画像にコンテキスト（文脈）を与えることを意識する。完成したら、ブラウザでそのページを開いてテストする。特に、意図的に「images」フォルダ内の画像ファイル名を変更してみて、画像が壊れた状態になったときにaltテキストが正しく表示されるかを確認することは、学習効果を高める上で非常に有効だ。

これらの実践を通じて、視覚的に豊かで、誰もがアクセスしやすい、そしてプロフェッショナルなウェブページを作成する能力を身につけることができる。これはウェブ開発者として大きな一歩であり、素晴らしい進歩だ。