8〜11 　イメージ ▼もくじ


※架空のアドレスを使用しています。これらで使われているアドレスは存在しません。
青色であらわした部分『http://www.○△□.ne.jp/』と、赤色であらわした部分『ichigo.gif』の両方を表示させたい画像のアドレスに書きかえてください。
青色の部分は省略できるよ（ＨＴＭＬファイルと表示させたい画像が同じフォルダの中に置いてある場合）最後の『.gif』（その画像の種類。写真などは『.jpg』）は忘れずに！
８画像を表示させる
 <IMG SRC="http://www.○△□.ne.jp/ichigo.gif">

【　こうなる　】


表示されている画像のインターネット上のアドレスはhttp://serv4.nyanta.jp/blp/tegetag/ichigo.gifです。

■関連項目　９．画像の説明　１０．画像の大きさの指定（拡大・縮小）　１１．画像にリンク
『画像のアドレス』の部分を表示させたい画像のアドレスに（http://???……又は省略形）、『これはいちごだよ』の部分には、その画像の説明に書き換えます。
画像が表示出来ない時にも、何の画像なのかが分かるように代替テキストとして、この説明で入力した文字が表示されます。
９ 画像の説明 <IMG SRC="画像のアドレス" ALT="これはいちごだよ">

【　こうなる　】

これはいちごだよ
Windowsの場合、いちごの画像にマウスカーソルを置くと、説明文字が出ます。

■関連項目　８．画像を表示させる
『画像のアドレス』の部分を表示させたい画像のアドレスに書きかえてね。
「WIDTH="40"」の、『40』の部分は、画像の横幅を数字で、「HEIGHT="40"」の、『40』の部分には、画像の高さを数字で入れてね。原寸サイズを入力するメリットは下のポイントをご覧ください。
１０ 画像の大きさの指定（拡大・縮小） <IMG SRC="画像のアドレス" WIDTH="40" HEIGHT="40">

【　こうなる　】
横幅：40　高さ：40
（元の大きさ）		 横幅：80　高さ：80
（２倍に拡大）		 横幅：120　高さ：40
（横幅だけを３倍に拡大）		 横幅：40　高さ：160
（高さだけを４倍に拡大）

［ポイント］
この方法で、元の画像の大きさと同じ大きさを指定すると、ページを読み込む時に配置が崩れなかったり、速く読み込む事が出来るので複雑なページ製作に有用です。
また、インターネットで公開する時の注意点として、この方法で大きい画像を縮小して表示しても画像のデータ量はそのままです。画像を表示するには、画像のデータを全て取り込む必要があり、ページを見てくれる人に縮小された画像を時間をかけて読み込ませるといった事にもなります。（2006/06追記　高速回線が使われるようになりそれほど問題にはならなくなりましたがブロードバンドが来ていない所もあります）この方法で縮小するより、画像を小さく編集して使うことをおすすめします。
（参考に、主な回線速度の目安）ダイヤルアップ(56K)　100KBを約25秒／ISDN回線　100KBを約15秒

■関連項目　８．画像を表示させる
●画像にリンクを付けると、画像に枠がついて困る。こうやって枠を取ってしまいましょう！
『BORDER="0"』を付けると枠は無くなります。反対にこれが無いと、枠が現れます。
『http://www.○△□.ne.jp/』は、実在しない架空のアドレスです。この部分はリンク先のホームページのアドレスに書き換えてください。　　『画像のアドレス』の部分を表示させたい画像のアドレスに書きかえてね。
１１ 画像にリンク <A HREF="http://www.○△□.ne.jp/">
<IMG SRC="画像のアドレス" BORDER="0">
</A>

【　こうなる　】（リンクを設定していませんので、クリックしても変わりありません）

枠がないリンク
 枠があるリンク
１１．「画像にリンク」の詳細 （3行に分けて書いていますが、1行にまとめてもＯＫです。）
<A HREF="http://www.○△□.ne.jp/">
<IMG SRC="画像のアドレス" BORDER="0">
</A>

１行目（<A HREF="http://www.○△□.ne.jp/">）は、ここからリンク開始のタグです。
２行目（<IMG SRC="画像のアドレス" BORDER="0">）これは、画像を表示するタグです。
最終行（</A>）は、リンクの終了のタグです。
■関連項目　８．画像を表示させる　　１２．リンクを作る


文字の大きさ、着色、意外と困る改行について 1.改行と修飾
リンクを作らないとどこにも行けないよ〜。 3.リンク
隅々まで色や背景を変えたりする 4.全体に反映
文字を動かしてみよう 5.流れる文字
音楽を聞かせてあげよう 6.BGM
スクロールバーの色を変えられる 7.スタイルシート
WEB用ページ（HTML）の作成方法、色コード 8.ＨＰ作成・色
入力してみたが、なにかおかしい 9.Ｑ＆Ａ

←TOPページへ戻る