15.HTML 画像について

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

HTML 画像の構文

HTML タグで定義されます。

tag は空要素です。属性のみを含み、終了タグはありません

src 属性は画像のURlを指定します。

alt属性

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

alt 属性のあたいは画像を説明します。

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

ノート:alt 属性が必要です。webページはそれなしでは正しく表示されません

画像サイズ – 幅と高さ

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

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

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

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

Width と Height　か Styleどっち使うか?

width, height, style 属性はどちらもHTMLで使えます。

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

別のフォルダー内の画像

指定しない場合、ブラウザはWebページと同じフォルダ内で画像を見つけようとします。

ですが、一般的には画像おをサブフォルダに保存するのでサブフォルダを指定する src 属性を使用します。:

別のサーバー上の画像

一部のWebサイトでは、画像を画像サーバーに保存しています。

この場合は世界中のどのWebアドレスからでも画像にアクセスできます。:

ファイルパスの詳細については、 HTMLファイルパスを参照して下さい

アニメーション画像

HTMLはアニメーションGIFに対応しています:

リンクとしての画像

画像をリンクとして使用するには タグ内に
タグをネストして記載します:

ノート:  IE9【それ以前】が画像の周囲の環境線を表示しないようにする為に追加されました（画像がリンクの場合）

画像のフローティング

CSS float　プロパティを使用して、画像ウィテキストの右にフローティングします:

ヒント: To learn more about CSS Float, read our CSS Float Tutorial.

画像マップ

以下の画像で、コンピューター、電話、またはコーヒーカップをクリックすると、リンクへ飛びますす。:

マップタグのname 属性は

タグと ‘タグで関連づけされていて
画像とマップの間に関係を指定できます。

タグは、画像タグ内のクリック可能な領域を定義する

背景画像

HTML要素に背景画像を追加するには、CSSプロパティを使用します
background-image:

Webページに背景画像を追加するには、BODY要素でbackground-imageプロパティを指定します。:

Background
Image

段落に背景画像を追加するには、P要素でbackground-imageプロパティを指定します。:

…

背景画像の詳細については、
CSS Background Tutorialをご覧ください 。

HTML 要素

HTML5 画像リリースウィ指定する際の柔軟性を高める為の要素が追加されました

要素は、それぞれ異なる画像ソースを参照すると、ソース要素の数を含んでいます。これにより、ブラウザは現在のビューやデバイスに最適な画像を選択できます。

各 要素には、記述する属性があります。

ブラウザは 一致する属性値を持つ最初の要素を使用し、後続の 要素を無視します。

ブラウザウィンドウ（ビューポート）が650ピクセル以上の場合は1つの画像を表示し、そうでない場合は465ピクセルより大きい別の画像を表示します。

ノート: 常に 要素を 要素の最後の子要素として指定します。
要素は、 要素をサポートしていないブラウザー、または タグが一致しない場合に使用されます。

HTML スクリーンリーダー

スクリーンリーダーは、HTMLコードを読み取り、テキストを変換し、ユーザーがコンテンツを”聞く”ことを可能にするソフトウェアプログラムです。スクリーンリーダーは、視覚障害者や学習障害のある人に役立ちます。

まとめ

• • HTML 要素を使用して画像を定義する
  • HTML src 属性を使用して画像のURLを定義します
  • HTML alt 表示できない場合は、HTML 属性を使用して画像の代替テキストを定義します
  • HTML width と height 属性を使用して画像のサイズを定義します
  • CSS width と height プロパティを使用して、画像のサイズを定義します
  • CSS float プロパティを使用して、画像をフロートさせます
  • HTML 要素を使用してイメージマップを定義する
  • 要素を使用して、イメージマップ内のクリック可能な領域を定義します
  • HTML ‘要素を usemap属性を使用して画像マップを指す
  • HTML 要素を使用して、デバイスごとに異なる画像を表示します

ノート: 画像の読み込みには時間がかかります。大きな画像はページの速度を低下させます。画像を慎重に使用してください。

HTML Image Tags

Tag	説明
	Defines an image
	Defines an image-map
	Defines a clickable area inside an image-map
	Defines a container for multiple image resources

さらにタグについてもっと知るには HTML Tag 辞典を参照して下さい