画像を表示する：imgタグの基本

2025年3月14日

はじめに

ウェブページを作るとき、テキストだけでは情報が伝わりにくい場合があります。そのときに役立つのが画像の挿入です。HTMLのimgタグを使えば、画像を簡単にページに表示することができます。本記事では、imgタグの基本構造から属性の使い方、画像の最適化方法まで詳しく解説します。

ふくろう

「ねこ君、ウェブページに画像を入れるときには何を使えばいいかわかるかな？」

ねこ

「imgタグを使うって聞いたことがあります！」

ふくろう

「その通りだ！今日はそのimgタグをしっかり学んでいこう。」

ねこ

（画像を使えるようになったら、ページがもっと見た目よくなるぞ！）

imgタグの基本を学ぶ

画像はウェブページのデザインを向上させる重要な要素です。imgタグを使用して画像を正確に表示し、ユーザーに視覚的なインパクトを与える方法を学びましょう。

ふくろう

「ねこ君、imgタグにはどんな特徴があるか知っているかな？」

ねこ

「画像を表示するためのタグですよね。でも、具体的な使い方はまだよくわかりません。」

ふくろう

「大丈夫だよ。まずは基本的な構造から始めてみよう！」

ねこ

（これを覚えれば、画像を自由自在に使えるようになるぞ！）

imgタグの基本構造と属性

imgタグの基本構造

imgタグは、画像をウェブページに表示するためのシンプルなHTML要素です。このタグは自己終了型で、以下のような構造を持っています。

<img src="画像のURL" alt="代替テキスト">

主な属性:

src: 表示する画像のURLを指定する属性。必須項目です。
alt: 画像が表示できない場合に代替テキストを表示する属性。アクセシビリティの観点から重要です。

例:

<img src="example.jpg" alt="サンプル画像">

src属性

src（source）属性は、画像ファイルの場所を指定します。相対パスまたは絶対パスで指定することが可能です。

相対パス: 現在のファイルの位置を基準に画像の場所を指定。<img src="images/sample.jpg" alt="サンプル画像">
絶対パス: URL全体を記述。<img src="https://example.com/images/sample.jpg" alt="サンプル画像">

alt属性

alt属性は、画像の内容や目的を説明するために使用されます。特に以下の場面で役立ちます。

画像が読み込めない場合に代替テキストを表示。
画面リーダーを使用するユーザーに画像の内容を伝える。

良いaltテキストの例:

<img src="dog.jpg" alt="公園で遊ぶ黒い犬">

悪いaltテキストの例:

<img src="dog.jpg" alt="画像">

width属性とheight属性

画像の表示サイズを指定するために使用されます。ピクセルやパーセントで設定可能です。

例:

<img src="example.jpg" alt="サンプル画像" width="300" height="200">

注意: 画像のサイズは、元のアスペクト比を維持しつつCSSで調整するのが推奨されます。

その他の属性

title: 画像にカーソルを合わせたときに表示されるテキストを指定。<img src="example.jpg" alt="サンプル画像" title="これはサンプル画像です">
loading: 遅延読み込みを指定（パフォーマンス向上）。<img src="example.jpg" alt="サンプル画像" loading="lazy">

これでimgタグの基本構造と主要属性について理解できました！次は、imgタグを使った応用技術を学びましょう！

alt属性でアクセシビリティを向上させる

alt属性の役割とは？

alt属性（代替テキスト）は、画像の内容を説明するためのHTMLの属性であり、主に以下の目的で使用されます。

視覚障害者向けのサポート
画面リーダー（スクリーンリーダー）を使用するユーザーに、画像の内容を音声で伝える。
画像が表示できない場合の代替表示
ネットワークの問題やエラーにより画像が読み込めないときに、テキストで内容を補足する。
SEO（検索エンジン最適化）
検索エンジンが画像の内容を理解しやすくなり、適切にインデックスされる。

alt属性の正しい書き方

alt属性は、画像の内容や目的に応じて適切に記述することが重要です。

1. 意味のある画像（説明が必要な画像）

画像がコンテンツの一部であり、意味がある場合は、内容を具体的に記述します。

✅ 良い例

<img src="sunset.jpg" alt="夕焼けに染まる海岸の風景">

❌ 悪い例

<img src="sunset.jpg" alt="画像">
<img src="sunset.jpg" alt="">

→「画像」だけでは意味が伝わらず、altを空欄にするとアクセシビリティが低下する。

2. 装飾目的の画像

デザインの一部であり、特に意味を持たない画像（アイコンや背景装飾など）は、alt属性を空にするのが適切です。

✅ 良い例

<img src="decorative.png" alt="">

✅ CSSで装飾する

body {
  background-image: url("decorative.png");
}

❌ 悪い例

<img src="decorative.png" alt="装飾画像">

→「装飾画像」と書くとスクリーンリーダーが不要な情報を読み上げるため、逆にユーザーの混乱を招く。

3. 重要な情報を持つ画像

例えば、図表やインフォグラフィックなどの画像は、詳細な説明が必要な場合があります。

✅ 良い例

<img src="graph.png" alt="2024年の売上推移を示したグラフ。1月から3月にかけて20%増加。">

❌ 悪い例

<img src="graph.png" alt="グラフ">

→「グラフ」だけでは情報が不足しており、内容が伝わらない。

4. リンク付き画像

画像をリンクとして使用する場合、alt属性にはリンクの目的を記述します。

✅ 良い例

<a href="contact.html">
  <img src="email-icon.png" alt="お問い合わせページへ">
</a>

❌ 悪い例

<a href="contact.html">
  <img src="email-icon.png" alt="メールアイコン">
</a>

→「メールアイコン」では何のリンクか分かりづらい。

alt属性を適切に使うメリット

スクリーンリーダーのユーザーがページ内容を理解しやすくなる
検索エンジンが画像の内容を適切にインデックスできる
画像が表示されない場合でも、ユーザーが情報を得られる

適切なalt属性の記述は、アクセシビリティ向上とSEO対策の両方に役立ちます。これを機に、正しく活用していきましょう！

画像サイズを調整する方法

CSSで画像サイズを変更する方法

CSSを利用して画像のサイズを変更することで、デザインの自由度を高めることができます。特に、CSSのwidthやheightプロパティを活用することで、画像の大きさを簡単に調整できます。以下の方法で画像のサイズを変更できます。

固定サイズで指定する
px（ピクセル）単位で幅や高さを設定すると、画像のサイズが固定されます。例えば、次のように記述します。 cssコピーする編集するimg { width: 300px; height: 200px; } この設定では、すべての<img>タグに適用されるため、一括で管理するのに便利です。
パーセンテージで指定する
width: 50% のようにパーセンテージを使用すると、親要素のサイズに応じて画像の大きさが変わります。例えば、次のように設定すると、コンテナの50%の幅に収まるようになります。img { width: 50%; } これにより、レスポンシブなデザインに対応しやすくなります。
max-widthを活用する
max-widthプロパティを使用すると、画像が特定の幅を超えないように調整できます。img { max-width: 100%; height: auto; } これにより、画像が親要素より大きく表示されることを防ぎ、適切なサイズを保つことができます。

HTML属性で画像サイズを指定する

HTMLのwidthやheight属性を利用することで、画像のサイズを直接設定することができます。例えば、次のように記述します。

<img src="image.jpg" width="400" height="300" alt="サンプル画像">

この方法のメリットは、CSSを使用しなくてもサイズが指定できる点ですが、デメリットとして、レスポンシブデザインに対応しにくいことがあります。そのため、通常はCSSでの設定が推奨されますが、画像サイズを固定したい場合には有効です。

また、widthとheightを省略すると、画像の元のサイズで表示されます。

<img src="image.jpg" alt="元のサイズで表示">

アスペクト比を保持する設定
画像の縦横比を維持しながらサイズを変更したい場合は、widthまたはheightの片方だけを指定すると、自動で比率が調整されます。

<img src="image.jpg" width="400" alt="アスペクト比保持">

レスポンシブデザインに対応した画像調整

スマートフォンやタブレットなど、異なる画面サイズに適した画像サイズを指定するためには、CSSのmedia queryを利用するのが効果的です。

例: スマートフォンでの最適化

img {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    img {
        width: 50%;
    }
}

このコードでは、デフォルトで画像は親要素の100%の幅で表示され、画面幅が768px以上になると50%の幅に縮小されます。

srcset属性を活用した最適化
複数の画像を用意し、デバイスに応じた適切なサイズの画像を提供するには、srcset属性を使います。

<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="レスポンシブ画像">

このコードでは、画面サイズが768px以下の場合はmedium.jpg、それ以上の場合はlarge.jpgが表示されるようになります。

以上の方法を活用することで、画像のサイズを適切に調整し、ユーザーにとって最適な表示を実現できます。

imgタグを活用したデザイン

imgタグを活用することで、ページ全体のデザイン性を高めることが可能です。このセクションでは、応用テクニックを学びます。

ふくろう

「ねこ君、ただ画像を表示するだけじゃなくて、少し工夫することでページがもっと魅力的になるんだよ。」

ねこ

「どんな工夫ができるんですか？」

ふくろう

「例えば、背景画像として使ったり、レスポンシブデザインに対応させたりする方法があるよ。」

ねこ

（応用テクニックも覚えれば、もっとプロっぽくなるかも！）

背景画像として使用する場合

CSSを使用した背景画像の基本設定

ウェブサイトのデザインを美しくするために、CSSを使って背景画像を設定する方法は一般的です。特に、background-imageプロパティを使用すると、任意の要素に背景画像を適用できます。

基本的な記述方法

背景画像を適用するには、以下のようにCSSを記述します。

body {
    background-image: url('background.jpg');
}

このコードを適用すると、background.jpgがページ全体の背景として表示されます。

背景画像の位置調整

背景画像の表示位置を調整するには、background-positionプロパティを使用します。例えば、画像を中央に配置する場合は以下のように記述します。

body {
    background-image: url('background.jpg');
    background-position: center;
}

また、画像を右下に配置したい場合は、以下のように記述できます。

body {
    background-image: url('background.jpg');
    background-position: right bottom;
}

背景画像の繰り返し設定

デフォルトでは、背景画像は繰り返し表示（タイル状）されますが、background-repeatを使用することで調整できます。

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
}

この設定により、背景画像が1回だけ表示され、繰り返しが無効になります。もし、横方向にのみ繰り返したい場合は、以下のように指定します。

body {
    background-image: url('background.jpg');
    background-repeat: repeat-x;
}

同様に、縦方向にのみ繰り返したい場合は、以下のように記述します。

body {
    background-image: url('background.jpg');
    background-repeat: repeat-y;

背景画像をレスポンシブ対応にする

ウェブサイトをモバイルフレンドリーにするために、背景画像をレスポンシブ対応にすることが重要です。CSSのbackground-sizeプロパティを活用することで、異なる画面サイズに応じた背景画像の表示が可能になります。

背景画像を画面いっぱいに表示

background-size: cover;を指定すると、画像が画面いっぱいに引き伸ばされ、余白が発生しないように調整されます。

body {
    background-image: url('background.jpg');
    background-size: cover;
}

この設定では、画像が適切な大きさで表示され、画面サイズが変わっても対応できます。

背景画像を全体にフィットさせる

background-size: contain;を使用すると、画像が要素内に収まるように調整されます。

body {
    background-image: url('background.jpg');
    background-size: contain;
}

この設定は、画像全体を表示したい場合に便利ですが、要素のサイズによっては余白が生じる可能性があります。

異なるデバイスに対応

メディアクエリを使用して、デバイスごとに異なる背景画像を適用することも可能です。

body {
    background-image: url('background-large.jpg');
    background-size: cover;
}

@media (max-width: 768px) {
    body {
        background-image: url('background-small.jpg');
    }
}

このコードでは、画面サイズが768px以下のデバイスでは、background-small.jpgを使用するように指定されています。

背景画像とテキストの組み合わせ

背景画像を設定した際に、テキストの可読性を向上させるためには、適切なスタイリングが必要です。背景画像の上にテキストを配置すると、場合によっては視認性が低下する可能性があります。

オーバーレイを使用する

背景画像の上に半透明のオーバーレイを適用することで、テキストが読みやすくなります。

.container {
    position: relative;
    background-image: url('background.jpg');
    background-size: cover;
    height: 400px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    font-weight: bold;
}

このコードでは、背景画像の上に黒の半透明オーバーレイ（rgba(0, 0, 0, 0.5);）を重ねることで、テキストの可読性を高めています。

グラデーションオーバーレイを適用

CSSのグラデーションを活用することで、背景画像に自然な影を加え、テキストが読みやすくなります。

.container {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('background.jpg');
    background-size: cover;
    color: white;
    padding: 20px;
}

この設定により、背景画像の上部が明るく、下部が暗くなるため、テキストの視認性が向上します。

これらのテクニックを活用することで、CSSを使った背景画像の設定が柔軟に行えるようになります。デザインに合わせて適切な方法を選択し、ウェブページを魅力的に演出しましょう。

画像のリンク化

画像をリンクにする基本的な方法

ウェブページに画像を配置する際、単なる装飾としてだけでなく、リンクとして機能させることも可能です。特に、バナー広告やナビゲーションメニューでは、画像リンクが広く使用されています。

基本的な画像リンクの書き方

HTMLでは、<a>タグの中に<img>タグを入れることで、画像をリンクに変換できます。

<a href="https://example.com">
    <img src="image.jpg" alt="サンプル画像">
</a>

このコードでは、「image.jpg」をクリックすると、https://example.comに移動します。

ターゲットの指定

リンクを新しいタブで開きたい場合は、target="_blank"属性を使用します。

<a href="https://example.com" target="_blank">
    <img src="image.jpg" alt="サンプル画像">
</a>

この設定により、クリックすると新しいタブでリンク先が開きます。

alt属性の活用

画像リンクではalt属性を適切に設定することが重要です。画像が表示されない場合に代替テキストが表示されるため、ユーザーエクスペリエンスの向上につながります。

<a href="https://example.com">
    <img src="image.jpg" alt="サイトの詳細を見る">
</a>

画像リンクのデザインとスタイリング

画像リンクは、CSSを使用することでより視覚的に魅力的なデザインにすることが可能です。

画像の枠線をなくす

デフォルトでは、リンクの画像に青い枠線が表示されることがあります。これを削除するには、border: 0;を適用します。

a img {
    border: 0;
}

ホバーエフェクトを追加

画像リンクにホバーエフェクト（マウスオーバー時の変化）を加えることで、クリックを促しやすくなります。

a img:hover {
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
}

このコードでは、マウスを画像リンクに重ねると透明度が70%になり、視覚的な変化が生まれます。

画像をボタン風にアレンジ

ボタンのように見せるには、border-radiusやbox-shadowを活用します。

a img {
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

この設定により、角が丸まり、影がついたボタン風のデザインになります。

画像リンクのSEO対策

画像リンクを適切に使用することで、SEO（検索エンジン最適化）にも良い影響を与えることができます。

画像のalt属性の最適化

検索エンジンは画像の内容を直接解析できないため、alt属性を適切に設定することが重要です。例えば、以下のように記述すると、検索エンジンがリンク先の内容を認識しやすくなります。

<a href="https://example.com">
    <img src="product.jpg" alt="最新モデルのスマートフォン">
</a>

画像のサイズを最適化

リンク画像が大きすぎるとページの読み込み速度に影響を与えるため、適切なサイズに圧縮することが推奨されます。GoogleのPageSpeed Insightsなどのツールを活用し、適切なサイズを確認しましょう。

レスポンシブ対応

モバイルフレンドリーなデザインを実現するため、CSSのmax-widthを活用して画像サイズを調整します。

a img {
    max-width: 100%;
    height: auto;
}

これにより、画面サイズに応じて画像が自動で縮小され、スマートフォンやタブレットでも適切に表示されます。

画像リンクを活用することで、より魅力的で使いやすいウェブサイトを作成できます。デザインの工夫やSEO対策を行いながら、適切に実装していきましょう。

レスポンシブデザインでの画像の扱い

CSSでの画像のレスポンシブ対応

レスポンシブデザインにおいて、画像の適切な調整は不可欠です。デバイスのサイズが異なると、画像の表示方法が変わるため、CSSを活用して適切な表示を行いましょう。

max-widthを使用したレスポンシブ画像

max-width を設定すると、画像の最大幅を制限し、親要素に応じて縮小されるようになります。

img {
    max-width: 100%;
    height: auto;
}

この設定により、画像は親要素の幅を超えず、適切に縮小されるため、モバイル端末でも正しく表示されます。

object-fitプロパティでアスペクト比を維持

object-fit を使用することで、画像の比率を保ちながらトリミングすることが可能になります。

img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

この設定では、画像の幅を100%にしつつ、高さを固定し、内容をトリミングしてバランスよく表示します。

HTMLのsrcsetを活用した画像の切り替え

レスポンシブデザインでは、異なるデバイスごとに適切なサイズの画像を配信することが求められます。そのために、srcset 属性を活用しましょう。

srcsetを使った画像の切り替え

以下のように記述すると、画面幅に応じて異なるサイズの画像を表示できます。

<img src="image-small.jpg"
     srcset="image-medium.jpg 600w,
             image-large.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="レスポンシブ画像">

このコードでは、画面幅が600px以下の場合は image-medium.jpg、1200px以上の場合は image-large.jpg が表示されます。

ピクセル密度に応じた画像の切り替え

srcset はピクセル密度（1x、2x）に応じて画像を変えることもできます。

<img src="image-1x.jpg"
     srcset="image-2x.jpg 2x, image-3x.jpg 3x"
     alt="高解像度対応画像">

これにより、Retinaディスプレイなどの高解像度スクリーンでは、適切な解像度の画像が表示されます。

メディアクエリを使った画像のスタイル調整

レスポンシブデザインでは、CSSのメディアクエリを使って画像のスタイルを適用することが可能です。

異なるデバイスサイズで画像サイズを変更

メディアクエリを使用し、画面サイズごとに画像の表示方法を調整できます。

img {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    img {
        width: 80%;
    }
}

@media (min-width: 1024px) {
    img {
        width: 60%;
    }
}

この設定では、スマホでは100%、タブレットでは80%、PCでは60%の幅で画像が表示されるようになります。

背景画像の変更

background-image もメディアクエリを使って変更可能です。

.background {
    background-image: url('image-small.jpg');
}

@media (min-width: 768px) {
    .background {
        background-image: url('image-medium.jpg');
    }
}

@media (min-width: 1024px) {
    .background {
        background-image: url('image-large.jpg');
    }
}

この設定では、デバイスの幅に応じて異なる背景画像が適用されます。

レスポンシブデザインでは、画像の適切なサイズや比率、表示方法を考慮しながら、CSSやHTMLのテクニックを活用することが重要です。

まとめ

画像はウェブページのデザインを大きく向上させる重要な要素です。imgタグを正しく使いこなすことで、ページの見栄えだけでなく、ユーザー体験も向上します。次回は、リストを使った情報整理術について学びましょう！

ふくろう

「ねこ君、これでimgタグの基本はマスターできたね。」

ねこ

「はい！画像を使えば、もっと魅力的なページが作れそうです！」

ふくろう

「その意気だ！どんどん試してみよう！」

ねこ

（画像を追加して、自分のサイトをもっと素敵にするぞ！）

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

リンクの作成方法：aタグを極める

この記事を書いた人

ふくろう

福岡県在住のフロントエンジニア。独学でプログラミングを学び、現在はフリーランスとして活動中。主にWordPressを活用したサイト制作や静的サイト、LPのコーディングを手掛けています。過去には10年以上の接客業経験があり、クライアントとのコミュニケーションを大切にしています。このブログでは、プログラミング初心者やフリーランスを目指す方々に役立つ情報を発信中。趣味は新しい技術の勉強と家族との時間を楽しむこと。