画像は、Webページのデザインと外観を向上させることができます。

HTML画像の構文

HTML<img>タグは、Webページに画像を埋め込むために使用されます。

技術的には、画像はWebページに挿入されません。画像はウェブページにリンクされています。<img>タグは、参照イメージの保持スペースを作成します。

・src - 画像へのパスを指定します
・alt - 画像の代替テキストを指定します

src属性

必須のsrc属性は、画像へのパス(URL)を指定します。

注：Webページが読み込まれると、その時点でWebサーバーから画像を取得してページに挿入するのはブラウザです。したがって、画像がWebページに対して実際に同じ場所にあることを確認してください。画像がなければ、訪問者に壊れたリンクアイコンが表示されます。ブラウザが画像を見つけられない場合、リンク切れアイコンとaltテキストが表示されます。

alt属性

必須のalt属性は、何らかの理由でユーザーが画像を表示できない場合(接続が遅い、src属性のエラー、またはユーザーがスクリーンリーダーを使用している場合)、画像の代替テキストを提供します。

ブラウザが画像を見つけられない場合、alt属性の値が表示されます。

画像サイズ - WidthとHeight

またはwidthとheightの属性を使用できます

widthとheight、それともstyle?

ただし、style属性を使用することをおすすめします。スタイルシートが画像のサイズを変更するのを防ぎます。

別のフォルダ内の画像

サブフォルダーに画像がある場合は、フォルダー名をsrc属性に含める必要があります

別のサーバー/ウェブサイト上の画像

一部のWebサイトは、別のサーバー上の画像を参照しています。

別のサーバー上の画像を指すには、src属性に絶対(完全)URLを指定する必要があります。

外部画像に関する注意事項:外部画像は著作権で保護されている場合があります。無断で使用した場合、著作権法に違反する可能性があります。さらに、外部イメージを制御することはできません。それらは突然削除または変更される可能性があります。

アニメーション画像

HTMLではアニメーションGIFを使用できます。

リンクとしての画像

画像を使用するには、<img>タグ内に<a>タグを含めます。

フローティングしている画像

CSSのfloatプロパティを使用して、画像をテキストの右または左にフロートさせます。

一般的な画像フォーマット

以下は、すべてのブラウザー(Chrome、Edge、Firefox、Safari、Opera)でサポートされている最も一般的な画像ファイルの種類です。

この章のまとめ

・HTML<img>要素を使用して画像を定義する
・HTMLsrc属性を使用して、画像の URL を定義します
・HTML のalt属性を使用して、画像を表示できない場合の代替テキストを定義します。
・HTMLのwidthとheightの属性またはCSSのwidthとheightのプロパティを使用して、画像のサイズを定義します。
・CSS のfloatプロパティを使用して、画像を左または右にフロートさせます。

HTML画像タグ

タグ	説明
<img>	画像を定義します
<map>	イメージマップを定義します
<area>	イメージマップ内のクリック可能な領域を定義します
<picture>	複数の画像リソースのコンテナを定義します

利用可能なHTMLタグの完全なリストについては、HTMLタグリファレンスを参照してください。