【保存版】HTMLで画像を扱う際の基本をわかりやすく解説

（最終更新日：2023年6月）

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLで画像をどのように表示するのだろうか？」
「HTMLの画像表示の書き方を学びたい」
「HTMLの画像表示の具体的な使用例を見て理解したい」

✔この記事を読むことで得られる知識

• HTMLでの画像表示の基本的な書き方
• 画像表示の応用法
• HTMLでの画像表示を用いた具体的な使用例

この記事では、HTMLでの画像表示の基本的な使い方から、その応用法まで、具体的な例を交えて詳細に説明します。

画像のサイズ調整や代替テキストの設定など、より実践的な内容も含めて紹介します。

ぜひ最後までお読みください。

HTMLでの画像の基本

ここでは、HTMLで画像を表示するための基本について学んでいきます。

以下の項目について解説していきます。

• <img>タグとは
• “src”属性の役割と設定方法
• “alt”属性と画像のアクセシビリティ
• “title”属性とツールチップテキスト

<img>タグとは

HTMLにおける画像の表示は主に<img>タグによって設定されます。

このタグを使うことで、ウェブページ上に画像を表示することが可能になるのです。

<img src="image.jpg">

同じディレクトリにある”image.jpg”という画像ファイルを表示します。

“src”属性の役割と設定方法

“src”属性は、画像ファイルへのパスを指定します。

パスは相対パスまたは絶対パスのいずれかで指定可能です。

以下のファイルツリーにおける例をそれぞれ見ていきましょう。

- index.html
- images
  - photo.jpg
  - icons
    - icon1.png
    - icon2.png

それぞれの絶対パス・相対パスをご覧ください。

<!-- 相対パスを使用した場合 -->
<!-- index.htmlファイルからphoto.jpgを指定する場合 -->
<img src="images/photo.jpg" alt="Photo">

<!-- index.htmlファイルからicon1.pngを指定する場合 -->
<img src="images/icons/icon1.png" alt="Icon 1">

<!-- index.htmlファイルからicon2.pngを指定する場合 -->
<img src="images/icons/icon2.png" alt="Icon 2">

<!-- 絶対パスを使用した場合 -->
<!-- ウェブサイトのルートからphoto.jpgを指定する場合 -->
<img src="/images/photo.jpg" alt="Photo">

<!-- ウェブサイトのルートからicon1.pngを指定する場合 -->
<img src="/images/icons/icon1.png" alt="Icon 1">

<!-- ウェブサイトのルートからicon2.pngを指定する場合 -->
<img src="/images/icons/icon2.png" alt="Icon 2">

“alt”属性と画像のアクセシビリティ

“alt”属性は、画像が表示されない場合や、視覚障害のあるユーザーが利用するスクリーンリーダー向けに、画像の説明を提供します。

<img src="image.jpg" alt="A beautiful sunset">

画像が表示できない場合やスクリーンリーダーに”A beautiful sunset”と読み上げさせることが可能です。

“title”属性とツールチップテキスト

“title”属性は、マウスを画像上に置くと表示されるツールチップテキストを設定します。

<img src="image.jpg" title="A beautiful sunset">

マウスカーソルを画像上に置くと”A beautiful sunset”というテキストが表示。

ただしアクセシビリティの観点からは、”title”属性よりも”alt”属性の利用をおすすめします。

画像のパス指定：絶対パスと相対パス

画像のパス指定について詳しく説明します。

以下の項目で絶対パスと相対パスの違いを理解し、どの場面でどちらを使うべきかを学んでいきます。

• 絶対パスとは
• 相対パスとは
• 絶対パスと相対パスの違いと使用場面

絶対パスとは

絶対パスは、ルートディレクトリからの完全なパスを指します。

このパスは、サイト内のどのページからでも同じファイルを指し示すため、パスが変わることなく画像を表示できます。

<img src="/images/image.jpg">

ルートディレクトリの”images”フォルダ内の”image.jpg”という画像を表示します。

相対パスとは

相対パスは、現在のファイルからの相対的なパスを指します。

このパスは、同じディレクトリ構造を持つ別の場所からファイルが見られる場合に便利です。

<img src="image.jpg">

同じディレクトリにある”image.jpg”という画像を表示します。

絶対パスと相対パスの違いと使用場面

• 絶対パスはファイルの場所を明示的に指し示す
• 相対パスは現在のファイルからの距離を示す

どちらを使用するかは、サイトの構造や開発のニーズによります。

例えば、大規模なウェブサイトでは絶対パスの方が管理が容易になるかもしれませんが、小規模なプロジェクトや特定のディレクトリ構造内で動作するコードでは相対パスが便利かもしれません。

画像のサイズ調整と配置

次に、HTMLでの画像サイズ調整と配置について、基本的な方法を説明します。

以下の項目を通じて学んでいきます。

• 画像の幅と高さの設定方法
• 画像の配置調整の基本

画像の幅と高さの設定方法

画像のサイズは、HTMLの<img>タグ内で”width”と”height”属性を用いて調整できます。

<img src="image.jpg" width="500" height="300">

“image.jpg”という画像を幅500ピクセル、高さ300ピクセルで表示します。

ただし、この方法では元の画像比率と異なる幅と高さを指定した場合、画像が歪む可能性があるため注意が必要です。

縦横比を固定しつつサイズを調整するのであれば、widthだけ指定するのも方法でしょう。

<img src="image.jpg" width="500">

画像の配置調整の基本

画像の配置は、HTMLの<img>タグを含む要素に対するCSSのプロパティを用いて調整します。

<div style="text-align: center;"><img src="image.jpg"></div>

“image.jpg”という画像を中央に配置します。

また、画像自体にCSSを適用して配置を調整することも可能です。

CSSを用いた画像の操作

次に、CSSを用いて画像に対するより高度な操作を学んでいきます。

以下の項目で、CSSの基本的な利用方法と特性を理解しましょう。

• CSSを使った画像サイズの調整
• CSS背景画像の設定方法

CSSを使った画像サイズの調整

CSSを使って画像サイズを調整できます。

“width”と”height”プロパティで、ピクセル単位による指定だけでなく、パーセンテージを使い、親要素に対する相対的なサイズで指定も可能です。

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

画像の幅が親要素の幅の50%になり、高さは自動的にアスペクト比を保ったまま調整されます。

CSS背景画像の設定方法

CSSを用いると、要素の背景として、画像を設定することが可能。

これには、”background-image”プロパティを用います。

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

対象のdiv要素の背景に、’image.jpg’が設定されます。

さらに”background-size”プロパティを用いると、背景画像のサイズ調整が可能です。

画像とWebデザイン

画像を効果的に用いたウェブページのデザインについて、学んでいきます。

以下の項目で、画像の配置やレイアウト、さらにはレスポンシブデザインについて理解を深めましょう。

• 画像とレイアウト
• 画像とレスポンシブデザイン

画像とレイアウト

ウェブページのデザインにおいて、画像は非常に重要な要素となります。

レイアウトの一部として適切に配置された画像は、サイトのビジュアルエフェクトを強化し、ユーザーエンゲージメントを高められるからです。

• テキストコンテンツの間に適切な画像を挿入：ユーザーの注意を引きつける
• ヘッダーやフッター、サイドバーなどの領域に画像を配置：サイトの全体的な雰囲気やブランドイメージを形成

画像とレスポンシブデザイン

レスポンシブデザインとは、ウェブページがさまざまなデバイスや画面サイズに適応するデザイン手法を指します。

画像をレスポンシブにするためには、CSSのメディアクエリを用いて、画像のサイズや表示方法を動的に調整しましょう。

以下の例で、こちらを実現します。

• 画面サイズが一定の閾値を下回った場合：画像のサイズを小さくする
• 大きな画面：複数の画像を並べて表示する
• 小さな画面：一つの画像だけを表示する

<style>
  /* 画面幅が 600px 以下の場合に適用するスタイル */
  @media (max-width: 600px) {
    .responsive-image {
      width: 100%;
      height: auto;
    }
  }

  /* 画面幅が 601px 以上の場合に適用するスタイル */
  @media (min-width: 601px) {
    .responsive-image {
      width: 50%;
      float: left;
      margin: 10px;
    }
  }
</style>

<!-- 画像をレスポンシブに表示する -->
<div class="responsive-image">
  <img src="path/to/image.jpg" alt="Image">
</div>

レスポンシブデザインの適用は、ユーザーエクスペリエンスの向上に大きく寄与し、SEOにも有効です。

実践：HTMLでの画像表示

ここまでのセクションでは、HTMLでの画像表示の基本やCSSを用いた画像操作について学んできました。

ここではそれらの知識を活用して、実際にHTMLで画像を表示し、それに関する実践的な課題に取り組んでみましょう。

• 実践課題：基本的な画像表示
• 実践課題：CSSを用いた画像操作

実践課題：基本的な画像表示

最初の課題は、HTMLの基本的な画像表示です。

まずは、選んだ画像をWebページに表示してみましょう。

具体的には、<img>タグを用いて、”src”属性に画像のパスを指定し、”alt”属性に画像の説明を記述します。

また、適切なタイトルを”title”属性で設定し、ユーザーが画像にマウスを置いた時に表示されるツールチップテキストを提供します。

参考例

<img src="path/to/image.jpg" alt="画像の説明" title="画像のタイトル">

実践課題：CSSを用いた画像操作

次の課題は、CSSを用いた画像操作です。

ここでは、画像のサイズをCSSで調整し、背景画像を設定してみましょう。

• 具画像の幅と高さをCSSのwidthおよびheightプロパティを使用して設定
• 背景画像は、CSSのbackground-imageプロパティを用いて設定

<style>
  .image {
    width: 300px;
    height: 200px;
  }

  .background-image {
    background-image: url("path/to/background-image.jpg");
    background-size: cover;
    background-position: center;
    width: 400px;
    height: 300px;
  }
</style>

<!-- 画像のサイズ調整 -->
<img src="path/to/image.jpg" alt="画像の説明" class="image">

<!-- 背景画像の設定 -->
<div class="background-image"></div>

まとめ

当記事では、HTMLでの画像の基本から、CSSを用いた高度な画像操作まで、幅広くカバーしました。

この記事で学んだ知識をさらに深めるためには、実際にHTMLとCSSを使ってウェブページを作成し、画像の表示と操作を実践することが重要です。

これにより、より洗練されたウェブページを作成する能力を身につけることができるでしょう。