画像

トップ > 逆引きリファレンス > 画像

画像を貼り付けるには

<img src="..."> を用います。src には画像ファイルのアドレス(URL)を指定します。alt は必ず、width と height は極力指定するようにしましょう。

HTML
<img src="mame.gif" alt="マメ" width=25 height=25>
表示
マメ

HTML5 では、width や height はスタイルシートで指定することが推奨されています。

HTML
<img src="mame.gif" alt="マメ" style="width:25px; height:25px;">

画像のサイズを知るには

画像の大きさ(縦横の長さ)を知るには、Internet Explorer や Netscape などのブラウザで height や width を指定しない状態の画像を表示し、画像をマウスの右クリック(Macintosh の場合はマウスをしばらくクリック)から [プロパティ] を表示することで知ることができます。

画像が表示されない!?

画像を張りつけたのにうまく表示できない。そんな時は次のような原因が考えられます。

画像を隙間無く並べるには

画像を並べる際に、画像と画像の間に隙間が空いてしまうことがあります。隙間を無くすには、<img> タグの > と < の間にスペースや空白を空けないようにします。どうしても改行するなら、img と src の間など > と < の間以外の箇所で改行しましょう。

<img src="image1.gif"><img
src="image2.gif"><img
src="image3.gif"><img
src="image4.gif">

画像の上に文字を乗せるには

画像の上に文字を乗せるには、お絵描きソフトで編集する方法もありますが、もっと簡単に背景画像の上に文字を乗せる方法があります。

HTML
<div style="background-image:url(../image/ki2.gif); width:100px; height:20px; text-align:center; color:red;">
あいうえお
</div>
表示
あいうえお

イメージツールバーを無効にするには

Internet Explorer 6.0 以降、200×200 以上の画像にマウスを乗せると保存・印刷・メール送信・My Pictures呼び出し機能を持ったイメージツールバーが表示され、鬱陶しいことがあります。これを表示しないようにするには、Internet Explorer の [ツール]→[インターネットオプション]→[詳細設定]→[イメージツールバーを有効にする] をオフにして再起動する他、次の方法があります。

<img> タグに galleryimg 属性を指定する。

<img src="xxx.jpg" galleryimg="no">

<meta> タグを使用する。

<meta http-equiv="imagetoolbar" content="no">

画像に代替テキストを設定するには

テキストブラウザや、音声読み上げブラウザなど、画像を表示できないブラウザのために、<img> タグには alt 属性を指定しましょう。HTML4.01 では <img> の alt は必須属性として定義されています。alt 属性には画像の説明ではなく、テキストブラウザで表示された時に画像の『代わりとなる』文字を指定します。

○○ページへ <a href="next.html"><img src="go.gif"
alt="Go!!" width=20 height=20 border=0></a>

デザインのためだけの画像には、alt="" と指定しておけばよいようです。これを怠るとテキストブラウザで [画像] と表示されてしまったりします。

<img src="xxx.gif" alt="" width=20 height=20>

Copyright (C) 2003 杜甫々
初版: 2003年10月12日、最終更新:2003年11月23日
http://www.tohoho-web.com/how2/image.htm