最初は、ウェブは単なるテキストに過ぎず、とても退屈でした。 幸運なことに、ウェブページ内に画像(および他のより興味深いタイプのコンテンツ)を埋め込む能力が追加されるまでにはあまり時間がかかりませんでした。 考慮すべき他のタイプのマルチメディアもありますが、単純な画像をウェブページに埋め込むために使用される、慎ましい <img> 要素から始めるのが理にかなっています。 この記事では、基本的な使い方を含め、 <figure> を使ったキャプションの注釈付け、 CSS 背景画像との関連付けなど、詳細な使い方を見ていきます。

前提条件:

基本的なコンピュータリテラシー、インストールされた基本ソフトウェアファイル操作の基本知識、HTML の基礎知識に精通していること(HTML の使い方を参照してください)。

目的: 単純な画像を HTML に埋め込み、キャプションで注釈を付ける方法、および HTML 画像と CSS 背景画像との関連を学ぶ。

画像をウェブページにどのように置くのですか?

単純な画像をウェブページに配置するために、 <img> 要素を使用します。 これは、少なくとも1つの属性が有用であることを必要とする空要素(テキストコンテンツまたは終了タグがないことを意味する)です — src(フルタイトルやソースと呼ばれることもあります)。 src 属性には、 <a> 要素の href 属性値と同じように、ページに埋め込む画像を指すパスが含まれ、相対 URL または絶対 URL にすることができます。

メモ: 続行する前に、相対 URL と絶対 URL であなたの記憶をリフレッシュするには、URL とパスのクイック入門をお読みください。

例えば、あなたの画像が dinosaur.jpg と呼ばれ、あなたの HTML ページと同じディレクトリにある場合、画像を次のように埋め込むことができます。

<img src="dinosaur.jpg">

画像が HTML ページ(Google が SEO/索引付けの目的で推奨するディレクトリ)内の images サブディレクトリにあった場合は、次のように埋め込みます。

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

等々。

メモ: 検索エンジンは画像ファイル名も読み込み、SEO に向けて数えます。 したがって、画像にわかりやすいファイル名を付けてください。 dinosaur.jpgimg835.png よりも優れています。

たとえば、絶対 URL を使用して画像を埋め込むことができます。

<img src="https://www.example.com/images/dinosaur.jpg">

しかし、これは無意味だけでなく、ブラウザが、DNS サーバから IP アドレスを再度検索するなどより多くの作業をすることになります。 ほとんどの場合、ウェブサイトの画像を HTML と同じサーバに保存します。

警告: ほとんどの画像は著作権で保護されています。 次の場合を除き、ウェブページに画像を表示しないでください。

1) 画像を所有している
2) 画像の所有者からの書面による明示的な許可を得ている、または
3) 画像は、実際にパブリックドメインであるという十分な証拠がある。

著作権侵害は違法で非倫理的です。 加えて、あなたがリンクする権限を持たない他の誰かのウェブサイトでホストされている画像へあなたの src 属性を向けないでください。 これは「ホットリンク」と呼ばれます。 さらに、誰かの帯域幅を盗むことは違法です。 また、ページが遅くなり、画像が削除されたり、恥ずかしいものに置き換えられたりするかどうかを制御できません。

上のコードでは、次の結果が得られます。

恐竜の基本的な画像が、ブラウザに埋め込まれ、その上に "Images in HTML" が書かれています

メモ: <img><video> のような要素は、置き換えられた要素と呼ばれることがあります。 これは、要素の内容とサイズが、要素自体の内容ではなく、外部リソース(画像ファイルや動画ファイルなど)によって定義されているためです。

メモ: 完成したサンプルは、このセクションの Github で実行するから見つけることができます(ソースコードも参照してください)。

代替テキスト

次の属性は alt です。 その値は、画像が見えない/表示されない状況で使用するためにあり、画像のテキスト記述であると考えられる。 たとえば、上記のコードは次のように変更できます。

<img src="images/dinosaur.jpg"
     alt="恐竜の骨格の頭と胴体、
          それは長い鋭い歯を持つ大きな頭を持っています">

alt テキストをテストする最も簡単な方法は、意図的にファイル名のスペルミスをすることです。 たとえば、画像名のスペルが dinosooooor.jpg の場合、ブラウザは画像を表示せず、代わりに代替テキストを表示します。

Images in HTMLというタイトルですが、今回は恐竜の画像が表示されず、代替テキストが代わりに表示されます。

それでは、なぜあなたは代替テキストを見たり、必要とするのでしょうか?   いくつかの理由から便利です。

  • ユーザーは視覚障害があり、スクリーンリーダーを使用してウェブを読むことができます。 実際、画像を記述するための代替テキストを用意することは、ほとんどのユーザーにとって有益です。
  • 上記のように、ファイル名またはパス名のスペルが間違っている可能性があります。
  • ブラウザは画像タイプをサポートしていません。 Lynx などのテキストのみのブラウザを使用している人もいますが、代わりに画像の代替テキストを表示します。
  • 検索エンジンにテキストを提供して活用することができます。 たとえば、検索エンジンは代替テキストと検索照会を一致させることができます。
  • ユーザーは画像をオフにして、データ転送量や目移りを減らしました。 これは特に、携帯電話や帯域幅が限られて高価な国では一般的です。

alt 属性の中にぴったりの何を書きますか?  それは最初の場所に画像がある理由に依存します。 言い換えれば、画像が表示されない場合に失うもの。

  • 装飾。 装飾画像に CSS 背景画像を使用する必要がありますが、HTML を使用する必要がある場合は空白の alt="" を追加してください。 画像がコンテンツの一部でない場合、スクリーンリーダーは時間を浪費してはなりません。
  • コンテンツ。 画像が重要な情報を提供している場合は、簡単な代替テキストで同じ情報を提供する。 それよりもっと良いのは、誰もが見ることができる本文の中で提供する。 冗長な代替テキストを書き込まないでください。 すべての段落がメインコンテンツに2回書かれていると、目に見えるユーザーにとってはどれほど迷惑でしょうか?  画像が主たる本文で十分に記述されている場合は、単に alt="" を使用できます。
  • リンク<a> タグ内に画像を置くと、画像をリンクに変えるためには、依然としてアクセス可能なリンクテキストを提供する必要があります。 そのような場合は、同じ <a> 要素内に、または画像の alt 属性内に書き込むことができます。
  • テキスト。 テキストを画像に入れないでください。 たとえば、メインの見出しにドロップシャドウが必要な場合は、テキストを画像に入れるのではなく、CSS を使用します。 しかし、これを避けることができない場合は、alt 属性にテキストを与える必要があります。

基本的には、画像が見えないときでも、実用的な体験を提供することが鍵です。 これにより、すべてのユーザーにコンテンツが欠落していないことが保証されます。 ブラウザの画像をオフにして、どのように見えるかを確認してください。 画像が見えない場合に、すぐに役立つ代替テキストがどれほどあるかをすぐに理解できます。

メモ: 詳細については、代替テキストのガイドを参照してください。

幅と高さ

width 属性と height 属性を使用して、画像の幅と高さを指定することができます。 画像の幅と高さはさまざまな方法で確認できます。 たとえば Mac では、Cmd + I を使用して画像ファイルの情報を表示することができます。 例に戻ると、これをこのように行うことができます。

<img src="images/dinosaur.jpg"
     alt="恐竜の骨格の頭と胴体、
          それは長い鋭い歯を持つ大きな頭を持っています"
     width="400"
     height="341">

これは、通常の状況下では表示が大きく異なるものではありません。 しかし、画像が表示されていない場合、たとえば、ユーザーがページに移動して画像がまだ読み込まれていない場合、ブラウザには画像が表示されるスペースが残ります。

恐竜の代替テキストを含む Images in HTML タイトルは、幅と高さの設定の結果として大きなボックスの内側に表示されます

これは良いことです。その結果、ページの読み込みがより迅速かつスムーズに行われます。

ただし、HTML 属性を使用して画像のサイズを変更しないでください。 画像のサイズを大きくしすぎると、ざらついて、ぼやけた画像になり、小さくしすぎると、帯域幅を無駄にしてユーザーのニーズに合わない画像をダウンロードすることになります。 正しいアスペクト比を維持しないと、画像が歪んで見えることもあります。 画像エディタを使用して画像を正しいサイズにしてから、ウェブページに配置する必要があります。

メモ: 画像のサイズを変更する必要がある場合は、代わりに CSS を使用する必要があります。

画像のタイトル

リンクと同様に、画像に title 属性を追加して、必要に応じてさらにサポート情報を提供することもできます。 この例では、これを行うことができます。

<img src="images/dinosaur.jpg"
     alt="恐竜の骨格の頭と胴体、
          それは長い鋭い歯を持つ大きな頭を持っています"
     width="400"
     height="341"
     title="マンチェスター大学博物館に展示されている T-Rex">

これは、リンクのタイトルと同様に、マウスのホバーによるツールチップを提供します。

恐竜の画像に、A T-Rex on display at the Manchester University Museumというツールチップのタイトルが表示されます

しかし、これは推奨されていません — title には多くのアクセシビリティ上の問題があります。 主に、スクリーンリーダーのサポートは予測不可能で、マウスを使用していない限り、ほとんどのブラウザーでは表示されません(例えば、キーボード ユーザー)。 このことについてもっと知りたい場合は、Scott O'Hara のタイトル属性の試行錯誤(英語)をお読みください。

画像に添付するのではなく、メインの記事のテキストにそのようなサポート情報を含める方が良いでしょう。

能動的学習: 画像の埋め込み

今度はあなたの番です!  この能動的学習セクションでは、あなたに簡単な埋め込み練習をさせていただきます。 基本的な <img> タグが提供されています。 次の URL の画像を埋め込むようにしてください。

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

以前は他のサーバー上の画像に絶対にホットリンクしないように言っていましたが、これは単なる学習目的のためのものです。

また、次のこともします。

  • 代替テキストを追加し、画像 URL のスペルを間違えて機能することを確認します。
  • 画像の正しい widthheight(ヒント: 幅200ピクセル、高さ171ピクセル)を設定し、他の値を試してその効果を確認します。
     
  • 画像に title を設定します。

間違えた場合は、[Reset] ボタンを使用してリセットすることができます。 あなたが本当に立ち往生した場合は、[Show solution] ボタンを押して答えを表示してください。

図表と図表のキャプションで画像に注釈を付ける

キャプションといえば、画像に付けるキャプションを追加する方法はいくつかあります。 たとえば、これをやめさせることは何もありません。

<div class="figure">
  <img src="images/dinosaur.jpg"
       alt="恐竜の骨格の頭と胴体、
            それは長い鋭い歯を持つ大きな頭を持っています"
       width="400"
       height="341">

  <p>マンチェスター大学博物館に展示されている T-Rex。</p>
</div>

これで結構です。 それはあなたが必要とするコンテンツを含んでおり、CSS を使って素敵に書式設定できます。 しかし、ここに問題があります。 画像をキャプションに意味的にリンクするものは何もありません。 スクリーンリーダーにとっては問題を引き起こす可能性があります。 たとえば、50個の画像とキャプションがある場合、どのキャプションにどの画像が表示されますか?

より良い解決策は、HTML5 の <figure><figcaption> 要素を使用することです。 図表のための意味的なコンテナを提供し、図表をキャプションに明確にリンクさせること。 これはまさにこの目的のために作成されたものです。 上記の例は次のように書き直すことができます。

<figure>
  <img src="images/dinosaur.jpg"
       alt="恐竜の骨格の頭と胴体、
            それは長い鋭い歯を持つ大きな頭を持っています"
       width="400"
       height="341">

  <figcaption>マンチェスター大学博物館に展示されている T-Rex。</figcaption>
</figure>

<figcaption> 要素は、キャプションが <figure> 要素の他のコンテンツを説明していることをブラウザと支援技術に伝えます。

メモ: アクセシビリティの観点から、キャプションと alt テキストには明確な役割があります。 キャプションは画像を見ることができる人にも利益をもたらしますが、代替テキストは欠けている画像と同じ機能を提供します。 したがって、キャプションと代替テキストは、画像がなくなったときに両方が表示されるため、同じことを言うべきではありません。 ブラウザで画像をオフにして見た目を確認してみてください。

図表は画像である必要はありません。 それは次のようにコンテンツの独立した単位です。

  • あなたの趣旨をコンパクトでわかりやすく表現します。
  • ページの直線的な流れのいくつかの場所に入ることができます。
  • メインテキストをサポートするための重要な情報を提供します。

図表は、いくつかの画像、コードスニペット、音声、動画、方程式、表、または何か他のものであってもよい。

能動的学習: 図表の作成

この能動的学習セクションでは、以前の能動的学習セクションで完成したコードを図表にします。

  • <figure> 要素でラップします。
  • テキストを title 属性からコピーし、title 属性を削除し、テキストを画像の下の <figcaption> 要素の中に置きます。

間違えた場合は、[Reset] ボタンを使用してリセットすることができます。 あなたが本当に立ち往生した場合は、[Show solution] ボタンを押して答えを表示してください。

CSS 背景画像

また、CSS を使用して画像をウェブページに埋め込むこともできます(JavaScriptでもできますが、それはまったく別の話です)。 CSS の background-image プロパティとその他の background-* プロパティは、背景画像の配置を制御するために使用されます。 たとえば、ページ上の各段落に背景画像を配置するには、次のようにします。

p {
  background-image: url("images/dinosaur.jpg");
}

結果として得られる埋め込み画像は、HTML 画像よりも位置付けと制御が容易であることは間違いありません。 それでは、なぜ HTML 画像を気にするのですか?  上記のとおり、CSS 背景画像は装飾用です。 ビジュアルを向上させるためにページに何かを追加したいだけなら、これは問題ありません。 しかし、そのような画像には意味論的な意味は全くありません。 同等のテキストを持つことはできず、スクリーンリーダーには見えません。 これは HTML 画像の輝く時です!

要約: 画像に意味がある場合は、コンテンツに関して、HTML 画像を使用する必要があります。 画像が純粋に装飾である場合は、CSS 背景画像を使用する必要があります。

メモ: CSS 背景画像については、CSS のトピックで詳しく説明します。

それは今のところすべてです。 画像とキャプションを詳細にカバーしています。 次の記事では、HTML を使用してウェブページに動画と音声を埋め込む方法を見ていきます。

このモジュール内の文書

ドキュメントのタグと貢献者

このページの貢献者: Wind1808
最終更新者: Wind1808,