HTML | 画像を挿入する方法：初心者向け完全ガイド

ウェブページに画像を追加したいけど、どうやってHTMLで画像を挿入すればいいのか分からない…そんな悩みを抱えていませんか？

画像の挿入方法は、HTMLを学び始めたばかりの初心者にとって、最初の関門とも言えます。

でも心配しないでください！このガイドでは、基本から応用まで、わかりやすく解説していきます。

セクション１：HTMLで画像を挿入する基本の方法

HTMLで画像を挿入する方法は非常にシンプルで、主に<img>タグを使用します。
このタグは画像ファイルを指定し、ウェブページ上に表示するために使われます。
以下に、基本的な使い方を詳しく説明します。

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

• 役割：src 属性は、表示する画像ファイルパスを指定します。ファイルパスには絶対パスと相対パスがあります。

• 役割：alt 属性は、画像が表示されない場合に代替テキストとして表示されるもので、視覚障害者のためのスクリーンリーダーにも対応しています。また、SEO（検索エンジン最適化）の観点からも重要です。

セクション2：絶対パスで画像を挿入

絶対パスは、システム内のファイルの完全なパスです。

例えば以下は、デスクトップにある画像を使う場合の例です。

<img src="C:/Users/・・・/Desktop/example.jpg" alt="デスクトップの画像">

セクション3：相対パスで画像を挿入

相対パスは、HTMLファイルの位置を基準にしたパスです。

以下はHTMLファイルがデスクトップにあると仮定して、デスクトップにある画像を使う例です。

<img src="example.jpg" alt="デスクトップの画像">

セクション4：絶対パスと相対パスの使い分け

HTMLで画像を挿入する際の絶対パスと相対パスの使い分けは、画像のホスティング場所、プロジェクトの構造、使用する環境に依存します。

絶対パスは一意性と外部リソースへのアクセスに優れ、相対パスは簡潔さと柔軟性に優れています。

• 画像が他のウェブサイトにホストされている場合
  • 絶対パスを使用
    • 例：https://cdn.example.com/images/photo.jpg
    • 理由：他のドメインにホストされている画像にアクセスするためには絶対パスが必要です。
• 画像が同じウェブサイト内にある場合
  • 相対パスを使用
    • 例：images/photo.jpg や ../images/photo.jpg
    • 理由：サイト内のディレクトリ構造に基づいてファイルを管理する場合、相対パスが便利です。
• サイト全体で共通の画像を使用する場合
  • 絶対パスを使用することもある
    • 例：サイト全体で共通して使われるロゴなどの画像。
    • 理由：どのページからも同じ画像を確実に参照できるようにするため。
• 開発中のプロジェクトやローカル環境で作業する場合
  • 相対パスを使用
    • 例：assets/images/photo.jpg
    • 理由：プロジェクトのディレクトリ構造が変更されても、相対パスを使うことでリンクの修正が最小限で済むからです。

1. 画像が外部ドメインにあるか？
   • はい：絶対パスを使用
   • いいえ：次へ
2. 画像が同じサイト内の別のディレクトリにあるか？
   • はい：相対パスを使用
   • いいえ： 次へ
3. プロジェクトのディレクトリ構造が変更される可能性があるか？
   • はい： 相対パスを使用
   • いいえ： 絶対パスも検討

まとめ

• 基本的な画像挿入方法
  • <img> タグを使用
  • src 属性で画像のパスを指定
  • alt 属性で代替テキストを指定
• 絶対パスの使用方法
  • 完全なURLを使用
  • 例： https://www.example.com/images/photo.jpg
  • 外部リソースやCDNの画像に適用
• 相対パスの使用方法
  • 現在のHTMLファイルからの相対的なパスを使用
  • 例： images/photo.jpg や ../images/photo.jpg
  • 同じサイト内の画像に適用
• 絶対パスと相対パスの違い
  • 絶対パス： どこからでも同じリソースにアクセス可能
  • 相対パス： 現在のファイル位置に依存
• 使い分けのポイント
  • 外部ドメインの画像は絶対パスを使用
  • サイト内の画像は相対パスを使用

Follow me!