HTML画像
画像は、Webページのデザインと外観を向上させることができます。
例
<img src="pic_trulli.jpg"
alt="Italian Trulli">
例
<img src="img_girl.jpg"
alt="Girl in a jacket">
例
<img src="img_chania.jpg"
alt="Flowers in Chania">
HTML画像の構文
HTML<img>タグは、Webページに画像を埋め込むために使用されます。
画像は技術的にWebページに挿入されません。画像はウェブページにリンクされています。<img>タグは、参照される画像の保持スペースを作成します。
タグは空で、<img>属性のみが含まれ、終了タグはありません。
<img>タグには2つの必須属性があります。
- src-画像へのパスを指定します
- alt-画像の代替テキストを指定します
構文
<img src="url" alt="alternatetext">
src属性
必須src属性は、画像へのパス（URL）を指定します。
注： Webページが読み込まれると、その時点でWebサーバーから画像を取得してページに挿入するのはブラウザーです。したがって、画像が実際にWebページに対して同じ場所にあることを確認してください。そうしないと、訪問者にリンク切れのアイコンが表示されます。altブラウザが画像を見つけられない場合は、リンク切れのアイコンとテキストが表示されます。
例
<img src="img_chania.jpg" alt="Flowers
in Chania">
alt属性
必要なalt属性は、ユーザーが何らかの理由で画像を表示できない場合（接続が遅い、src属性のエラー、またはユーザーがスクリーンリーダーを使用している場合）に、画像の代替テキストを提供します。
属性の値はalt画像を説明する必要があります。
例
<img src="img_chania.jpg" alt="Flowers
in Chania">
ブラウザが画像を見つけられない場合は、alt
属性の値が表示されます。
例
<img src="wrongname.gif" alt="Flowers
in Chania">
ヒント：スクリーンリーダーは、HTMLコードを読み取るソフトウェアプログラムであり、ユーザーがコンテンツを「聞く」ことができます。スクリーンリーダーは、視覚障害者や学習障害のある人に役立ちます。
画像サイズ-幅と高さ
この属性を使用してstyle、画像の幅と高さを指定できます。
例
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
widthまたは、属性とheight属性を使用することもできます。
例
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
widthand属性はheight、常に画像の幅と高さをピクセル単位で定義します。
注：画像の幅と高さは常に指定してください。幅と高さが指定されていない場合、画像の読み込み中にWebページがちらつくことがあります。
幅と高さ、それともスタイル？
、、、および属性はすべてHTMLで有効ですwidth。heightstyle
ただし、style属性を使用することをお勧めします。スタイルシートが画像のサイズを変更するのを防ぎます。
例
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
別のフォルダ内の画像
srcサブフォルダに画像がある場合は、属性にフォルダ名を含める必要があります。
例
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
別のサーバー/ Webサイト上の画像
一部のWebサイトは、別のサーバー上の画像を指しています。
別のサーバー上の画像を指すには、src属性に絶対（完全）URLを指定する必要があります。
例
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
外部画像に関する注意：外部画像は著作権で保護されている場合があります。使用許可を得ていない場合は、著作権法に違反している可能性があります。さらに、外部画像を制御することはできません。突然削除または変更される可能性があります。
アニメーション画像
HTMLではアニメーションGIFが許可されています。
例
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
リンクとしての画像
画像をリンクとして使用するには、<img>タグをタグ内に配置し<a>
ます。
例
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
画像フローティング
CSSfloatプロパティを使用して、画像をテキストの右または左にフロートさせます。
例
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
ヒント： CSS Floatの詳細については、 CSSFloatチュートリアルをご覧ください。
一般的な画像形式
すべてのブラウザ（Chrome、Edge、Firefox、Safari、Opera）でサポートされている最も一般的な画像ファイルの種類は次のとおりです。
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
章のまとめ
- HTML
<img>要素を使用して画像を定義する - HTML
src属性を使用して、画像のURLを定義します alt画像を表示できない場合は、HTML属性を使用して画像の代替テキストを定義します- HTML
widthとheight属性、またはCSSwidthとheightプロパティを使用して、画像のサイズを定義します - CSS
floatプロパティを使用して、画像を左または右にフロートさせます
注：大きな画像の読み込みには時間がかかり、ウェブページの速度が低下する可能性があります。画像は慎重に使用してください。
HTML演習
HTML画像タグ
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
使用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。