１.イメージの挿入
HTML writer を起動します。タイトルタグに「画像表示について」と入力します。
BODY にタグ挿入メニューから「イメージ」を選択します。
「イメージの挿入」ダ イアログボックスが表 示されます。参照ボタ ンをクリックします。
①
②
③
①
②
③ 前章で作成した「wide.jpg」
を開きます。
①ファイル名を確認しま す。
②設定する項目の「画像の 説明」にチェックが入って いることを確認します。チ ェックをはずすと画像の 説明が編集できなくなります。
③「画像の説明」に「睡蓮の全景写真」と入力します。
★画像を表示するときは必ず説明をつけます。
①設定する項目の「幅、
高さ」にチェックを入れ ます。
②3-7 で設定した通り、
幅「250」高さ「188」と 入力します。
③OK ボタンをクリック します。
イ メ ー ジ タ グ が 挿 入 さ れました。画像のソース、
画像の説明、横のサイズ、
縦 の サ イ ズ が 設 定 さ れ ています。イメージタグ に は 終 了 タ グ は あ り ま せん。
２.ブラウザで表示
名前を付けて保存します。場所はデスクトップの「html」フォルダの直下、ファイ ル名は「image.html」とします。
ブラウザで表示します。
画像が表示されず、代わりに画像の 説明「睡蓮の全景写真」が表示され ました。
３.パスの修正
指定先が違っているので修正します。wide.jpg の前に「images/」と入力します。
４.上書き保存
上書き保存し、ブラウザで表示します。
今度は画像が正しく表示されました。
確認したらブラウザを閉じます。
フォルダ
wide.jpg
image.html
image.html wide.jpg フォルダ
■イメージタグ <IMG>
IMG タグのソース属性の値には、画像のパス（URL）を指定します。
【表記例】
＜IMG SRC= " images/wide.jpg " ALT= " 睡蓮の全景写真 " ＞
■絶対パスと相対パス
パス（URL）の指定方法は２種類あります。
絶対パス 「http://」からアドレスを全て記述する方法
主に他のサイトのページや画像にリンクを張るときなどに使用します。
相対パス ファイルどうしの位置を、現在のファイルを基準として相対的に記述する 方法。主にサイト内で、画像の指定やリンクを張るときに使用します。
■相対パスの例
①同じフォルダ内にあるファイルを指定するときは、
そのままファイル名を指定する。
【例】現在のファイルを images.html とします。
同じフォルダの中にある wide.jpg を指定
<IMG SRC="wide.jpg">
②一つ上位のフォルダにあるファイルを指定するときは、
「../」を前につけて指定します。
【例】現在のファイルを images.html とします。
一つ上のフォルダの中にある wide.jpg を指定
<IMG SRC="../wide.jpg">
html ファイルから画像までのパスを指定します。
この場合は、image フォルダの下にある、wide.jpg という画像を指定しています。
wide.jpg
image.htm
wide.jpg images
image.html
image.html sample
images wide.jpg
③二つ上位のフォルダにあるファイルを指定するとき は「../../」を前につけて指定します。
【例】現在のファイルを images.html とします。
二つ上のフォルダの中にある wide.jpg を指定
<IMG SRC="../../wide.jpg">
一つ階層を上がるごとに「../」を増やします。
例えば三つ上位のフォルダのときは「../../../」です。
④一つ下位のフォルダにあるファイルを指定するとき
【例】現在のファイルを images.html とします。
フォルダ「images」の中にある wide.jpg を指定
<IMG SRC="images/wide.jpg">
⑤二つ下位のフォルダにあるファイルを指定するとき
【例】現在のファイルを images.html とします。
フォルダ「sample」の中、さらに「images」の 中にある wide.jpg
<IMG SRC="sample/images/wide.jpg">
三つ目以降もこのようにフォルダ名から指定します。
■インターネット上で表示できる画像（圧縮方式）の種類
GIF(ジフ) 拡張子「.gif」、白黒の書類や、色数が少ない画像などに向く JPEG（ジェイペグ） 拡張子「.jpg」、写真など色数の多い画像に向く
５.イメージの挿入 2
先程挿入したイメージタグの次の行にカーソルを移動します。
タグの挿入メニューから「イメージ」を選択します。
「イメージの挿入」ダイアログボックスが表示されます。
先程と同じ手順で画像を設定します。
イメージタグが入ったことを確認します。
先程の画像と同じようにパスに「images/」を追記します。
「SRC="images/closeup.jpg"」
①参照ボタンから「closeup.jpg」を選択 します。（デスクトップに作った html フォ ルダの中、images フォルダにあります）
②画像の説明には
「睡蓮の花、クロ ーズアップ」と入 力します。
③「設定する項目」の「幅、高さ」にチェックを入れ、
3-11 で確認した通り、幅「250」高さ「220」と入力 します。
上書き保存し、ブラウザで表示します。
横に並んで画像が二つ表示されました。
ブラウザを閉じます。
６.改行
画像を縦に並べたいので一つ目の画像の後に改行タグを入れます。
一度クリックしてカーソルを入れ、タグ挿入メニューから「改行」を選択します。
再び上書き保存して、ブラウザで表示します。
1 つ目の画像のすぐ後で改行され、２つの写真が縦 に表示されました。
★推奨される方法ではないですが、<BR>の代わりに
<P>タグを使用すると、画像と画像の間に 1 行挿入さ れます。詳しくは第６章 段落の設定を参照してく ださい。
1行目
2行目
７.画像と文字の表示
1 枚目の写真のあとに、文字を入れます。「睡蓮の写真です。たくさん花が咲いたの で見てください。」と入力します。
上書き保存し、ブラウザで表示します。
1 行目：一枚目の写真の後で改行して います。
2 行目：文字に続けて（改行されずに）
写真が表示されました。
また、ブラウザのサイズを変更する と、表示がどのように変わるか試し てみましょう。
写真と文字の位置を確認したらブラ ウザを閉じます。
入力した文章の後に改行タグを入れます。
1行目
3行目
2行目
上書き保存し、ブラウザで表示します。
1 行目：写真の後で改行しています。
2 行目：文字が入り改行しています。
3 行目：2 枚目の写真が表示されています。
ブラウザのサイズを変更すると、表示がど のように変わるか試してみましょう。
写真と文字の位置を確認したらブラウザ を閉じます。
一つ目の画像のすぐ後にある、改行タグを削除します。
上書き保存し、ブラウザで表示します。
写真と文字の位置を確認します。
1 行目：写真に続けて文字を表示。
2 行目：2 枚目の写真を表示。
ブラウザのサイズを変更すると、
表示がどのように変わるか試し てみましょう。
確認したらブラウザを閉じます。