画像

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

• 画像を貼り付けるには
• 画像のサイズを知るには
• 画像が表示されない!?
• 画像を隙間無く並べるには
• 画像の上に文字を乗せるには
• 画像に代替テキストを設定するには

画像を貼り付けるには

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

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

画像のサイズを知るには

Windows 10 の場合は、エクスプローラーから画像ファイルを右クリックして [プロパティ]-[詳細]-[大きさ] で調べることができます。

画像が表示されない!?

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

• ファイル名が誤っている。(意外に多いので念の為再チェック)
• フォルダ名が誤っている。フォルダの指定方法に習熟していない場合は、HTMLファイルと画像ファイルを同じフォルダに置き、src="xxx.gif" のように src 属性に画像のファイル名のみを指定するようにしてみましょう。
• GIF ファイルを作成するのに、ファイル名だけを xxx.bmp から xxx.gif に変更している。(対応ソフトで変換する必要があります。)
• 画像ファイルをアップロードするのを忘れている。
• 画像ファイルへのリンクが file: で始まる名前になっている。src="ファイル名" や、src="フォルダ名/ファイル名" など、file: で始まらない名前にしましょう。
• ファイル名の大文字と小文字を誤っている。(サーバーが UNIX 系の場合は、ファイル名の大文字と小文字は別の文字として扱われます。)

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

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

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

下記の様にコメントを用いて、改行を開けなくする方法もあります。

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

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

スタイルシートを用いて、画像の上に文字を乗せることができます。

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

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

テキストブラウザや、音声読み上げブラウザなど、画像を表示できないブラウザのために、<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>