HTMLのimgタグとpictureタグとは？初心者でもわかる画像表示の基本
生徒
「Webページに写真を表示したいんですが、どうやってやるんですか？」
先生
「HTMLでは、画像を表示するためにimgタグやpictureタグを使います。とても基本的で大切な知識ですよ。」
生徒
「imgタグとpictureタグって何が違うんですか？」
先生
「imgタグは一枚の画像を表示する基本の方法で、pictureタグは画面サイズなどに応じて画像を切り替えられる仕組みです。順番に見ていきましょう。」
1. HTMLで画像を表示するとはどういうこと？
HTMLで画像を表示するとは、文字だけのページに写真やイラストを置いて、見た目や内容を分かりやすくすることです。文章だけだと分かりにくい説明も、画像があるだけで直感的に理解しやすくなります。たとえば、料理のレシピに完成写真があると安心できるのと同じです。
HTMLでは画像そのものをページに埋め込むのではなく、画像ファイルの場所を指定して表示します。そのため、imgタグやpictureタグで画像のパスを正しく指定することが重要になります。
2. imgタグとは？画像表示の基本ルール
imgタグは、HTMLで画像を表示するための最も基本的なタグです。文章の中に写真を差し込むような感覚で使えます。imgタグは閉じタグがなく、一行で完結するのが特徴です。
src属性には画像ファイルの場所を、alt属性には画像が表示できないときに代わりに表示される説明文を書きます。altは目が不自由な方の読み上げや、検索エンジン対策としても大切な要素です。
<img src="/img/sample150-100.jpg" alt="サンプル画像">
3. imgタグのサイズ指定と見た目の調整
画像はそのまま表示すると大きすぎたり小さすぎたりすることがあります。その場合は、widthやheight属性を使ってサイズを調整します。これは写真を額縁に合わせて調整するようなイメージです。
数字はピクセルという単位で指定します。ピクセルとは画面を構成する小さな点の集まりで、数値が大きいほど表示も大きくなります。
<img src="/img/sample120-120.jpg" alt="正方形の画像" width="120" height="120">
4. alt属性の役割とSEOへの効果
alt属性は、画像の内容を文字で説明するためのものです。画像が読み込めないときに表示されるだけでなく、検索エンジンが画像の意味を理解する手助けにもなります。
たとえば「猫」という画像に対して「かわいい白い猫の写真」と書いておくことで、画像検索にも強くなります。画像の説明を丁寧に書くことは、ユーザーにも検索エンジンにも親切なHTMLになります。
5. pictureタグとは？画像を切り替える仕組み
pictureタグは、画面の大きさや条件によって表示する画像を切り替えたいときに使います。スマートフォンとパソコンで違う画像を見せたい場合などに便利です。
pictureタグの中にはsourceタグとimgタグを入れます。条件に合ったsourceが使われ、どれにも当てはまらない場合は最後のimgタグが表示されます。
<picture>
<source media="(max-width: 600px)" srcset="/img/sample150-100.png">
<img src="/img/sample150-100.jpg" alt="切り替わるサンプル画像">
</picture>
6. imgタグとpictureタグの使い分け
基本的に、画像を一枚表示するだけならimgタグで十分です。操作も簡単で、初心者でもすぐに使えます。一方で、画面サイズごとに最適な画像を表示したい場合はpictureタグが向いています。
たとえば、スマートフォンでは軽い画像、パソコンでは高画質な画像を表示することで、表示速度と見た目の両方を良くできます。これはお店で状況に応じて商品を並べ替えるような感覚です。
7. 画像パスの考え方とフォルダ構成
画像パスとは、画像ファイルがどこに置いてあるかを示す住所のようなものです。今回の例ではimgフォルダの中に画像が入っていると想定しています。
フォルダを整理しておくと、後から修正するときにも迷いません。画像専用のフォルダを作ることは、初心者のうちから意識しておくと安心です。
8. 初心者がつまずきやすい画像表示の注意点
画像が表示されない原因の多くは、パスの間違いやファイル名の入力ミスです。大文字と小文字は別物として扱われるため、正確に書く必要があります。
また、alt属性を書き忘れる人も多いですが、これはHTMLとして好ましくありません。画像を使うときは、必ず説明文も一緒に書く習慣をつけましょう。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
