HTMLを使用してWebページに画像を追加する方法

getdocs

2年前

このチュートリアルでは、HTMLを使用してWebサイトに画像を追加する方法を学習します。また、スクリーンリーダーを使用するサイト訪問者のアクセシビリティを向上させるために、画像に代替テキストを追加する方法についても学習します。

HTMLで画像を追加する

画像は、を使用してHTMLドキュメントに追加されます <img> エレメント。 The <img> 要素には属性が必要です src これにより、画像が保存されるファイルの場所を設定できます。画像要素は次のように記述されます。

<img src="Image_Location">

に注意してください <img> 要素はではなくはクロージングを使用します </img> 鬼ごっこ。を使用してみるには <img> 要素、サメのサメの画像をダウンロードして、プロジェクトディレクトリに配置します html-practice.

注：サメのサメの画像をダウンロードするには、リンクにアクセスしてください。 CTRL + Left Click （Macの場合）または Right Click （Windowsの場合）画像上で[名前を付けて画像を保存]を選択し、名前を付けて保存します small-profile.jpeg プロジェクトディレクトリに移動します。

次に、コンテンツを消去します index.html ファイルと貼り付け <img src="Image_Location"> ファイルに。（チュートリアルシリーズに従わなかった場合は、セットアップ手順を確認できます。 index.html チュートリアルHTMLプロジェクトの設定のファイル。

次に、画像のファイルパスをコピーして置き換えます Image_Location 保存した画像の場所を指定します。 Visual Studio Codeテキストエディターを使用している場合は、次を使用してファイルパスをコピーできます。 CTRL + Left Click （Macの場合）または Right Click （Windowsの場合）画像ファイル small-profile.jpeg 左側のパネルで[パスのコピー]を選択します。プロセスの説明については、以下のgifを参照してください。

注：イメージの絶対またはフルファイルパスではなく、イメージの相対またはプロジェクトファイルパスをコピーしてください。相対パスは、現在の作業ディレクトリを基準にしたファイルの場所を指します（ルートディレクトリを基準にしたファイルの場所を指す abstract パスとは対照的です）。この場合、両方のパスが機能しますが、 Webサイトをオンラインで公開することにした場合、相対パスのみが機能します。最終目標は公開可能なWebサイトを作成することなので、追加するときに相対パスの使用を開始します <img> ドキュメントの要素。

あなたの index.html ファイルを作成し、ブラウザにリロードします。次のようなものを受け取るはずです。

技術的には、オンラインでホストされている画像へのリンクをファイルパスとして使用することもできます。これがどのように機能するかを理解するには、画像の場所を次のようにサメのサメの画像へのリンクに置き換えてみてください。

<img src="https://html.sammy-codes.com/images/small-profile.jpeg">

ファイルを保存して、ブラウザにリロードします。画像は引き続きWebドキュメントに読み込まれますが、今回は画像がローカルプロジェクトディレクトリではなくオンラインの場所から取得されています。場所のリンクを次のように使用して、他のオンライン画像を追加してみることができます。 src の属性 <img> 鬼ごっこ。

ただし、Webサイトを構築するときは、サイトの持続可能性を確保するために、プロジェクトディレクトリで画像をホストすることをお勧めします。画像がホストによって削除された場合、またはアドレスが変更された場合、画像はサイトに表示されなくなります。

アクセシビリティの代替テキスト

画像を追加するときは、常に、画像を使用してそのコンテンツを説明する代替テキストを含める必要があります alt 属性。このテキストは通常、Webページには表示されませんが、視覚障害のあるサイト訪問者にコンテンツを伝達するためにスクリーンリーダーによって使用されます。

<img src="https://html.sammy-codes.com/images/small-profile.jpeg" alt="Digital Ocean’s mascot, a blue smiling shark." >

代替テキストを追加するときは、次のベストプラクティスに留意してください。

有益な画像の場合、代替テキストは、画像自体を参照せずに、画像の主題を明確かつ簡潔に説明する必要があります。たとえば、「DigitalOceanのマスコットであるSammy the Sharkの画像」ではなく、「DigitalOceanのマスコットであるSammytheShark」と記述します。
装飾画像の場合、 alt 属性は引き続き使用する必要がありますが、値はnullです。これにより、スクリーンリーダーのエクスペリエンスが向上します。 <img src="images/decorative_image.jpeg" alt="">.
画像が有益であるか装飾的であるかを判断するための便利なガイドについては、https://www.w3.org/WAI/tutorials/images/decision-tree/にアクセスしてください。

これで、HTMLドキュメントに画像を追加する方法と、アクセシビリティを支援するための代替テキストを追加する方法に精通しているはずです。画像のサイズとスタイルを変更する方法については、このシリーズの後半のチュートリアルWebページにプロファイル画像を追加する方法で学習します。次のチュートリアルでは、HTMLドキュメントにリンクを追加する方法を学習します。