TECH I.S.

HTML画像

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

例

<img src="pic_trulli.jpg" alt="イタリアのトゥルーリ">

例

<img src="img_girl.jpg" alt="ジャケットを着た女の子">

例

<img src="img_chania.jpg" alt="ハニアの花">

HTML画像の構文

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

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

<img>タグは空のタグで、属性のみが含まれ、終了タグはありません。 <img>タグには2つの必須属性があります。

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

構文

<img src="url" alt="代替テキスト">

src属性

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

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

例

<img src="img_chania.jpg" alt="ハニアの花">

alt属性

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

alt属性の値は画像を説明するテキストでなければなりません:

例

<img src="img_chania.jpg" alt="ハニアの花">

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

例

<img src="wrongname.gif" alt="ハニアの花">

ヒント：スクリーンリーダーは、HTMLコードを読み取り、ユーザーがコンテンツを「聞く」ことができるようにするソフトウェアプログラムです。スクリーンリーダーは、視覚障害や学習障害のあるユーザーに役立ちます。

画像サイズ - WidthとHeight

style属性を使用して、画像の幅と高さを指定できます。

例

<img src="img_girl.jpg" alt="ジャケットを着た女の子" style="width:500px;height:600px;">

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

例

<img src="img_girl.jpg" alt="ジャケットのを着た女の子" width="500" height="600">

widthおよびheight属性は、常に画像の幅と高さをピクセル単位で定義します。

注：常に画像の幅と高さを指定してください。幅と高さが指定されていない場合、画像の読み込み中にWebページがちらつくことがあります。

widthとheight、それともstyle?

width、height、およびstyle属性はすべてHTMLで有効です。

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

例

<!DOCTYPE html> <html> <head> <style> img {   width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5アイコン" width="128" height="128"> <img src="html5.gif" alt="HTML5アイコン" style="width:128px;height:128px;"> </body> </html>

別のフォルダ内の画像

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

例

<img src="/images/html5.gif" alt="HTML5アイコン" style="width:128px;height:128px;">

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

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

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

例

<img src="https://techis.jp/wp-content/themes/techis/assets/img/techis-logo.svg" alt="TECH I.S.">

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

アニメーション画像

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

例

<img src="programming.gif" alt="コンピューター男" style="width:48px;height:48px;">

リンクとしての画像

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

例

<a href="default">   <img src="smiley.gif" alt="HTMLチュートリアル" style="width:42px;height:42px;"> </a>

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

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

例

<p><img src="smiley.gif" alt="Smiley face"style="float:right;width:42px;height:42px;"> 画像はテキストの右側にフロートします</p> <p><img src="smiley.gif" alt="Smiley face"style="float:left;width:42px;height:42px;"> 画像はテキストの左側にフロートします</p>

ヒント：CSS Floatの詳細については、CSS Float チュートリアルをお読みください。

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

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


略語 ファイル形式 ファイル拡張子
APNG アニメーションポータブルネットワークグラフィックス .apng
GIF グラフィック交換フォーマット .gif
ICO マイクロソフトのアイコン .ico、.cur
JPEG 共同写真専門家グループのイメージ .jpg、.jpeg、.jfif、.pjpeg、.pjp
PNG ポータブルネットワークグラフィックス .png
SVG スケーラブルなベクターグラフィックス .svg

この章のまとめ

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


注：大きな画像の読み込みには時間がかかり、Web ページの速度が低下する可能性があります。画像は慎重に使用してください。




HTML画像タグ

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

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



チュートリアル