HTML4.0の基本

画像の使い方

2009年8月6日

画像の使い方

基本の画像タグ

<IMG src="">

<IMG>はHTMLに画像を表示するためのタグです。画像を表示するには<IMG>タグのみでは不十分で、src属性を必ず使います。src属性はソースを表し、ダブルコーテーションマーク""の中にGIF、またはJPGファイルの名前を入れます。このタグはエンプティタグで、終了タグはありません。
各画像は処理に時間がかかり、ドキュメント全体を表示するまでの速度を遅くします。
一つの画像を複数回使用するようにすることで、この問題は多少回避できます。

文章中に画像を表示するには下記のようにします。

<IMG src="画像ファイル名" />

明示的な指定がない場合、画像の底辺とテキストの行があうよう表示されます。

SPIDER

<IMG src="monkey.gif" />SPIDER

画像の代わりに文字列を表示:alt="文字列"

alternatibe:ブラウザが画像を読み込まれないときに、画像の代わりに表示されるテキストを指定するための属性です。

<IMG src="image.gif" alt="ようこそ!" />

画像の大きさを変更:width,height="値"

画像の表示サイズを変更できます。

<IMG src="image.gif" width="x" height="y"/>

値x.yには、パーセント( % )またはピクセル数を入れます(1pixel=0.339mm)。

パーセントで指定する場合は、オリジナルの画像に対するパーセンテージではなく、ウインドウの大きさに対するパーセンテージです。表示される画像の大きさはウインドウサイズに左右される相対的な大きさとなります。

ピクセル

<IMG src="spider.gif" width="100" height="100" />

<IMG src="spider.gif" width="50" height="50" />

<IMG src="spider.gif" width="50" height="100" />

縦横の比率を大幅に変更することもできます。

パーセント

<IMG src="spider.gif" width="20%" />

注)ブラウザのウインドウの大きさを変更してみてください。画像の大きさも変わります。


高度な画像処理

インターレース処理をする

インターレースとは、gifファイル処理のオプションの一つで、これを利用したイメージは、決めの粗いものから細かいものへと4段階の変化をへて表示されます。

透過GIFファイル

模様や色のある背景に画像を張り付けるとき、画像の背景が邪魔なときがよくあります。このようなときは、イメージの背景を透明にしましょう。この手法はPhotoshopなどの画像ツールを使います。

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!