HTMLでの画像の追加

画像はウェブページをより魅力的にします。<img>タグを使用して画像を挿入できます。

主な属性:

• src: 必須。画像ファイルへのパス（絶対パスまたは相対パス）；
• alt: 必須。画像が読み込めない場合に表示されるテキスト、スクリーンリーダーでも使用；
• width / height: ピクセル単位のサイズ。指定しない場合、画像は元のサイズで表示されます。

alt属性

altテキストは画像を明確に説明し、有用なコンテキストを提供する必要があります。

次の例を想像してください。競馬に関する情報源があり、競技者がレースの準備をする様子を表示したい場合です。

不適切なaltテキスト：

より適切な alt テキスト：

改良版は実際のコンテキストを提供し、視覚障害のあるユーザーが画像の内容を理解できるようにする。

src属性

src属性は、画像ファイルの場所を指定するために絶対パスと相対パスの両方を使用できる。

絶対パス

オンライン画像を指す完全なURL。

誰でもこの完全なリンクを通じて画像にアクセス可能。

以下のコードサンドボックスで、実際の例を確認。

相対パス

プロジェクトフォルダ内の画像を指す。

これは、image.jpg がHTMLファイルの近くにある images ディレクトリに保存されていることを意味します。

下記のコードサンドボックスで提供されている実際の例を確認してください。images フォルダー内に sun.png ファイルが含まれています。