画像の取り扱い

画像の準備

• ペイントブラシで描く。
• Photoshop ElementsやPhotoshop LEで描く。
• CD-ROMやインターネットのフリー素材を利用する。
• 写真や紙に描いた絵を、スキャナーでパソコンに取り込む。

画像を挿入する

<IMG SRC="[ファイルの場所・ファイル名]">

• ページの内部に画像を表示するときに用いる。
• 画像を表示したい箇所にタグを書き入れる(終了タグは不要)。
• [ファイルの場所]の指定の仕方は、ここを参照。

【例】

<IMG SRC="sample.gif" >

画像の代替テキストを指定する

ALT="X"

• 何らかの事情で画像が表示されなかった場合に、画像の位置に代わりのテキストを表示させる。
• 特に、リンク・ボタンとして画像を使用している場合には、かならず指定しておく。
• また、読み上げソフトを利用しているユーザーが、内容を把握しやすいように、できるだけ指定しておく方がよい。
• <IMG SRC="[ファイルの場所・ファイル名]">のアトリビュート。

【例】

<IMG SRC="sample.gif" ALT="猫のイラスト">

画像が正しく表示されているときには、代替テキストは表示されない。

画像が表示されないときには、代替テキストが表示される。

画像に境界線（縁取り）をつける

BORDER="X"

• 画像ファイルに縁取りをつける。
• <IMG SRC="[ファイルの場所・ファイル名]">のアトリビュート。
• Xには、境界線の幅（単位・ピクセル）を数値で指定できる。

【例】

境界線がない場合		2ピクセルの境界線をつけた場合
<IMG SRC="sample.gif" BORDER="0" >		<IMG SRC="sample.gif" BORDER="2" >

テキストと画像との並び方を決める

ALIGN="X"

• 画像ファイルの横に、テキストを並べて表示したいとき、画像とテキストとをどのような位置関係で表示するかを指定する。
• <IMG SRC="[ファイルの場所・ファイル名]">のアトリビュート。
• Xには、top、middle、bottom、left、rightのうちのいずれかを指定できる。

【例1】ALIGN="top"の場合

<IMG SRC="sample.gif" ALIGN=top>テキストは画像の上にそろいます。

テキストは画像の上にそろいます。

【例2】ALIGN="middle"の場合

<IMG SRC="sample.gif" ALIGN=middle>テキストは画像の中央にそろいます。

テキストは画像の中央にそろいます。

【例3】ALIGN="bottom"の場合

<IMG SRC="sample.gif" ALIGN=bottom>テキストは画像の下にそろいます。

テキストは画像の下にそろいます。

【例4】ALIGN="left"の場合

<IMG SRC="sample.gif" ALIGN=left>画像が左に置かれ、テキストは画像の右に回りこみます。<BR> テキストは画像の右に回りこみます。<BR> テキストは画像の右に回りこみます。

画像が左に置かれ、テキストは画像の右に回りこみます。 テキストは画像の右に回りこみます。 テキストは画像の右に回りこみます。

【例5】ALIGN="right"の場合

<IMG SRC="sample.gif" ALIGN=right>画像が右に置かれ、テキストは画像の左に回りこみます。<BR> テキストは画像の左に回りこみます。<BR> テキストは画像の左に回りこみます。

画像が右に置かれ、テキストは画像の左に回りこみます。 テキストは画像の左に回りこみます。 テキストは画像の左に回りこみます。

Home >> Manual >> HTMLの使い方 >> 画像の取り扱い