最新のWeb開発のチュートリアル

HTMLの画像

❮前 次の章❯

JPG画像

マウンテンビュー

GIF画像

PNG画像

グラフ

例

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>
</html>
»それを自分で試してみてください

常に画像の幅と高さを指定します。 幅と高さが指定されていない場合は、ページが画像のロード中に点滅します。

HTML画像構文

HTMLでは、画像がで定義されている<img>タグ。

<img> tagそれが唯一の属性が含まれ、空で、終了タグはありません。

src属性は、URLを指定する(web address)画像のを：

<img src=" url " alt=" some_text ">

alt属性

alt画像が表示できない場合、属性は、画像の代替テキストを指定します。

alt何らかの理由でユーザがそれを見ることができない場合、属性は、画像のための代替情報を提供する（なぜなら遅い接続でエラーsrc属性、またはユーザがスクリーンリーダーを使用している場合）。

ブラウザは、画像が見つからない場合は、altテキストが表示されます。

例

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
»それを自分で試してみてください

alt属性が必要です。 Webページは、それなしで正しく検証しません。

HTMLスクリーン・リーダー

スクリーンリーダーは、画面上に表示されていることを読むことができソフトウェアプログラムです。

スクリーンリーダーは、視覚障害の人、視覚障害、または無効になっ学習に便利です。

スクリーンリーダーは、読むことができるalt属性を。

画像サイズ - 幅と高さ

あなたは使用することができますstyle画像の幅と高さを指定する属性を。

値はピクセル単位で指定されている(use px after the value) 。

例

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
»それを自分で試してみてください

また、あなたが使用することができwidthとheightの属性を。 ここでは、値はデフォルトではピクセル単位で指定されています。

例

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
»それを自分で試してみてください

WidthとHeightやスタイル？

幅、高さ、およびスタイル属性の両方が最新のHTML5標準で有効です。

私たちは、あなたが使用することをお勧めstyle属性を。 これは、画像の元のサイズを変更することから、スタイルシートを防ぎます：

例

<!DOCTYPE html>
<html>
<head>
<style>
img {
    width:100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>
»それを自分で試してみてください

別のフォルダ内の画像

指定されていない場合は、ブラウザがWebページと同じフォルダに画像を見つけることを期待します。

しかし、サブフォルダ内の画像を保存するのが一般的です。 あなたは、その後にフォルダ名を含める必要がありますsrc属性：

例

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
»それを自分で試してみてください

別のサーバー上のイメージ

いくつかのウェブサイトでは、画像サーバに自分の画像を保存します。

実際に、あなたは世界のどのWebアドレスから画像にアクセスすることができます。

例

<img src="http://www.w3ii.com/images/w3ii_green.jpg" alt="w3ii.com">
»それを自分で試してみてください

アニメーション画像

GIF標準は、アニメーション画像を許可します。

例

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
»それを自分で試してみてください

アニメーション画像を挿入する構文は、非アニメーション画像と変わらないことに留意されたいです。

リンクとしてのイメージの使用

リンクとして画像を使用するには、単に巣<img>内部タグ<a>タグ：

例

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
»それを自分で試してみてください

追加"border:0;" IE9防止する(and earlier)画像の周囲に境界線を表示します。

浮動画像

画像フロートをできるようにCSSフロートプロパティを使用します。

画像は右またはテキストの左に浮くことができます。

例

<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>
»それを自分で試してみてください

イメージマップ

使用<map>イメージマップを定義するためにタグを。 画像マップは、クリック可能な領域を有する画像です。

nameの属性<map>タグが関連付けられている<img>のUSEMAP属性と画像とマップとの間の関係を作成します。

<map>タグは、多数の含有<area>画像マップ内のクリック可能な領域を定義するタグ：

例

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
»それを自分で試してみてください

章のまとめ

  • HTML使用<img>画像を定義する要素を
  • HTMLの使用src画像のURLを定義する属性を
  • HTMLの使用altそれが表示できない場合は、画像の代替テキストを定義する属性を
  • HTMLの使用widthとheight画像のサイズを定義する属性
  • CSSの使用widthとheight画像のサイズを定義するプロパティを(alternatively)
  • CSSの使用float画像フロートをできるようにプロパティを
  • HTMLを使用して<map>要素は、イメージマップを定義します
  • HTMLを使用し<area>画像マップにクリック可能な領域を定義する要素を
  • HTML使用<img>の要素usemapイメージマップを指すように属性を

画像をロードすると、時間がかかります。 大きな画像があなたのページを遅くすることができます。 慎重に画像を使用してください。

練習で自分自身をテストします！

演習1» 運動2» 運動3» 運動4» 運動5» 運動6»

HTMLイメージタグ

タグ 説明
<img> 画像を定義します
<map> イメージマップを定義します
<area> イメージマップ内のクリック可能な領域を定義します

❮前 次の章❯