HTMLで画像を表示する｜img要素の使い方とCSS装飾 - マルオモスキートのお勉強部屋

Webページに画像を表示するには、HTMLの<img>タグを使います。写真やイラスト、アイコンなど、あらゆる画像をページに埋め込むことができます。この記事では、img要素の基本的な使い方から、CSSを使った画像の装飾方法まで解説します。

基本的な使い方

<img>タグは、src属性に画像のパス（場所）を指定して使います。終了タグは不要です。

HTML

<!-- 基本形 -->
<img src="画像のパス">

<!-- alt属性を付ける（推奨） -->
<img src="photo.jpg" alt="風景の写真">

<!-- 幅と高さを指定 -->
<img src="photo.jpg" alt="風景の写真" width="600" height="400">

alt属性は画像が表示できない場合に代わりに表示されるテキストです。また、スクリーンリーダー（視覚障害者向けの読み上げソフト）がこのテキストを読み上げるため、アクセシビリティの観点から必ず設定しましょう。検索エンジンもalt属性を参照するため、SEO対策にも有効です。

画像のパス指定

画像のパスには「相対パス」と「絶対パス」の2種類があります。

HTML

<!-- 相対パス：同じフォルダ内の画像 -->
<img src="photo.jpg" alt="同じフォルダの画像">

<!-- 相対パス：サブフォルダ内の画像 -->
<img src="images/photo.jpg" alt="imagesフォルダ内の画像">

<!-- 相対パス：1つ上のフォルダの画像 -->
<img src="../photo.jpg" alt="親フォルダの画像">

<!-- 絶対パス：外部サイトの画像URL -->
<img src="https://example.com/images/photo.jpg" alt="外部の画像">

Webサイトの制作では相対パスを使うのが一般的です。../は「1つ上のフォルダ」を意味し、./は「現在のフォルダ」を意味します。画像が表示されない場合は、まずパスが正しいかを確認しましょう。

CSSで画像サイズを制御する

HTML属性でサイズを指定する方法もありますが、CSSで制御する方が柔軟です。特にレスポンシブデザイン（画面サイズに応じてレイアウトを変える手法）では、CSSでのサイズ制御が必須です。

CSS

/* 画面幅に合わせて自動縮小（レスポンシブ対応） */
.responsive-img {
    max-width: 100%;
    height: auto;
}

/* 固定サイズ */
.fixed-img {
    width: 300px;
    height: 200px;
}

/* 親要素の幅いっぱいに表示 */
.full-width-img {
    width: 100%;
    height: auto;
}

HTML

<img src="photo.jpg" alt="レスポンシブ画像" class="responsive-img">

max-width: 100%;とheight: auto;の組み合わせは、画像を親要素の幅を超えないようにしつつ、縦横比を維持する定番のテクニックです。ほぼすべてのWebサイトで使われています。

CSSで画像を装飾する

CSSを使って画像に枠線、影、角丸などの装飾を加えることができます。

CSS

/* 角を丸くする */
.rounded-img {
    border-radius: 10px;
}

/* 丸い画像（アイコン・プロフィール用） */
.circle-img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;  /* 画像のトリミング */
}

/* 枠線をつける */
.bordered-img {
    border: 3px solid #ddd;
    padding: 5px;
}

/* 影をつける */
.shadow-img {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ホバー時に拡大するエフェクト */
.zoom-img {
    transition: transform 0.3s ease;
}
.zoom-img:hover {
    transform: scale(1.05);
}

border-radius: 50%;で画像を正円にするテクニックは、プロフィール画像やアイコンでよく使われます。この場合、object-fit: cover;を併用すると、画像が正方形にトリミングされ、縦横比が異なる画像でもきれいに丸く表示されます。

figure要素でキャプションをつける

画像に説明文（キャプション）をつけたい場合は、<figure>タグと<figcaption>タグを使います。

HTML

<figure>
    <img src="photo.jpg" alt="東京タワーの夜景">
    <figcaption>図1: 東京タワーの夜景（2024年撮影）</figcaption>
</figure>

CSS

figure {
    text-align: center;
    margin: 20px 0;
}

figure img {
    max-width: 100%;
    border-radius: 8px;
}

figcaption {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

<figure>タグは画像とキャプションを意味的にまとめるHTMLタグです。検索エンジンにとっても、画像とその説明文の関連性が明確になるメリットがあります。

画像フォーマットの選び方

JPEG (.jpg): 写真に最適。ファイルサイズが小さい。透過非対応
PNG (.png): イラストやロゴに最適。透過（透明背景）に対応
GIF (.gif): アニメーションに対応。色数が少ない画像向け
WebP (.webp): JPEG/PNGより軽量。最新ブラウザ対応
SVG (.svg): ベクター画像。拡大しても劣化しない。アイコン向け

よくある間違い

alt属性を省略すると、アクセシビリティとSEOの両方に悪影響があります
widthとheightを指定しないと、画像読み込み時にページがガタつきます（CLS）
大きなサイズの画像をそのまま使うとページの表示速度が低下します。適切なサイズに縮小してから使用しましょう

まとめ

<img>タグのsrc属性で画像パスを指定し、alt属性で代替テキストを設定する
画像パスは相対パスと絶対パスがあり、Web制作では相対パスが一般的
max-width: 100%; height: auto;でレスポンシブ対応する
border-radiusで角丸、50%で正円にできる
figure要素とfigcaptionで画像にキャプションをつけられる
画像フォーマットは用途に応じてJPEG/PNG/WebP等を使い分ける