HTMLで画像をWebページに表示する方法を解説します。Webサイトを自分で作ったり、ブログを書いたりする際に、画像は欠かせない要素ですよね。「HTMLで画像を表示したいけど、どうすればいいの？」「画像が表示されなくて困っている…」そういった悩みを持つ方もいるのではないでしょうか。この記事では、HTMLを使って画像をWebページに表示する基本的な方法を、初心者の方にも分かりやすく解説します。
HTML 画像 表示 方法：3つのステップ
HTMLで画像を表示する方法はいくつかありますが、ここでは基本的な3つの方法を紹介します。
1. <img> タグを使う
最も基本的な方法は、<img>タグを使うことです。このタグは、画像を表示するための専用のタグで、以下のように記述します。
<img src="画像のURL" alt="画像の代替テキスト">
src属性には、表示したい画像のURLを指定します。URLは、画像ファイルの場所（インターネット上またはローカルのファイルパス）を示します。alt属性は、画像が表示されなかった場合に表示される代替テキストです。視覚的に画像が見えないユーザー（スクリーンリーダーを使用するユーザーなど）のために、画像の情報を伝えます。SEO対策としても重要です。
2. ローカルの画像を表示する
自分のパソコンにある画像を表示する場合は、画像のファイルパス（保存場所）をsrc属性に指定します。例えば、image.jpgという画像が、HTMLファイルと同じフォルダにある場合は、src="image.jpg"と記述します。もし、画像が別のフォルダに入っている場合は、そのフォルダからのパスを記述します。
3. 画像のサイズを指定する
画像を表示する際に、幅や高さを指定したい場合は、width属性やheight属性を使用します。
<img src="画像のURL" alt="画像の代替テキスト" width="200" height="150">
width属性で画像の幅を、height属性で高さを指定できます。ピクセル単位（px）で数値を指定します。
注意点・コツ
- 画像のURLの確認:
src属性に指定するURLが正しいか、必ず確認しましょう。URLが間違っていると、画像は表示されません。 - 代替テキストの重要性:
alt属性には、必ず適切な代替テキストを設定しましょう。SEO対策だけでなく、ユーザービリティの向上にも繋がります。 - 画像の最適化: Webサイトの表示速度を考慮して、画像のサイズや形式を最適化しましょう。大きすぎる画像は、ページの表示速度を遅くする原因になります。
まとめ
この記事では、HTMLで画像を表示する方法について解説しました。<img>タグの基本的な使い方、ローカルの画像を表示する方法、画像のサイズ指定など、Webページに画像を表示するための基本的な知識を紹介しました。これらの情報を参考に、Webサイトやブログに画像を表示してみてください。最初は難しいかもしれませんが、繰り返し実践することで、徐々に慣れていくことができます。