<img src="画像の場所(パス)/画像のファイル名" width="幅" height="高さ" border="枠の幅" alt="文字">
|
上記が画像を貼り付けるタグですが、、、。
まず、 |
■IMG SRC=” ”の” ”にいれる「画像の場所(パス)/画像のファイル名」について
|
一言では説明し難いので、実際の例を見てみましょう。
下のような画像を作って、このページに貼り付けたい場合・・・。
1．画像の作成
今回はWindows標準でついているのペイントで作りました。
画像作成に関する作業内容については省略します。各ソフトの使い方を覚えましょう。
２．画像を保存
今回はファイル名「EX-gazou.JPEG」で保存しました。拡張子はJPEGです。(BMPだとデータ容量が大きくなります。)
画像の種類に関しては後々説明したいと思います。
※ファイル名は半角数字、英字で保存しましょう。日本語のファイルはうまく読込まない場合があります。
また、保存する場所ですが、、、
今回は画像を貼り付けたいページがあるフォルダ内に保存しました。
コラム７ですので、「C7」というフォルダ内にこのページのデータが保存してあります。
また、このページは「C7_5_5.ｈｔｍｌ」という名前で作成、保存してあります。
３．画像の貼付け
上記の例のように、貼り付ける画像とページが同じフォルダ内にある場合、
場所の指定を省略してファイル名のみの指定で画像を貼り付けることができます。
今回の場合、HTMLは下記のようになります。(width〜以下は後から説明。)
<IMG src="EX-gazou.JPG" width="164" height="94" border="1">
ちなみに、画像とページが違う場所にある場合の例は、、、、
「C7」のフォルダ内に「TEST」というフォルダを作り、その中に「EX-gazou.JPEG」のファイルを保存した場合です。
画像自体は同じですが、保存してある場所が違っている、、ということですね。
HTMLは下記のようになります。
<IMG src="TEST/EX-gazou.JPG" width="164" height="94" border="1">
|
| ■続いてWIDTH="幅" HEIGHT="高さ"について |
"幅""高さ"には数字をいれます。
単純に言うと画像の大きさを指定する数字です。
今回の画像は、大きさが 幅="164" 高さ="94" で作ったので、この大きさが入っています。
ちなみに単位は"ピクセル"という単位です。
「ペイント」の場合、 変形 → キャンパスの色とサイズ で確認ができます。
↓
はい、幅 164 高さ 94 で合ってますね。
それでは、違う値で入力した場合どうなるのでしょうか？
幅、高さそれぞれ半分の値で入力してみます。
<IMG src="TEST/EX-gazou.JPG" width="82" height="47" border="1">
実際の表示はこのようになります。 →
表示される画像が半分の大きさになります。
ということで、作った大きさそのままで表示したい場合、作った時の値で指定する必要があります。
逆に、ページのレイアウトを優先する場合は、作成時の大きさは特に気にせずOKです。
貼付けする画像は自動的に拡大・縮小されます。
が、、
JPEGやGIFの画像などはスムーズに拡大・縮小がされない場合があります。
激しい拡大・縮小はしない方が良いかと思います。
ちなみにwidth=" "と height=" "は指定しなくても表示されますが、ブラウザーは画像領域を確保してからファイルをダウンロード
するので、予め領域を確保することで表示速度が速くなります。
|
| ■続いてborder=" "について |
border=" "の” ”には数字が入ります。
画像の枠の幅になります。
上記の場合、画像のまわりに幅"1"の枠を表示していることになります。
HTMLは下記になります。
<IMG src="TEST/EX-gazou.JPG" width="82" height="47" border="1">
それでは、枠を表示しない場合はどうでしょう。
border="1" を消してみます。
はい、こうなりました。HTMLは下記になります。
<IMG src="TEST/EX-gazou.JPG" width="82" height="47">
ちなみに、枠を太くすると、こんな感じです。
<IMG src="TEST/EX-gazou.JPG" width="82" height="47" border="5">
border=" "については以上です。
|
| ■alt="文字"について |
