絶対パス・相対パスの記述と使い所を理解することが目的です。
リンク切れや、画像が表示されない原因にもつながる、ファイルの指定に関する内容です。
ファイルをダウンロード
下のダウンロードボタンから圧縮ファイル（2-1.zipファイル）をダウンロードしてください。
ダウンロードしたファイルを解凍したら、「2-1」フォルダを「chap06」フォルダへ保存してください。
ファイルを個別でダウンロードする場合は…
ファイルを個別でダウンロードする場合、「2-1」フォルダを作成し、下図のようにファイルを保存してください。
ファイル名をクリックしてダウンロードしてください。
Web制作
chap06
絶対パスで画像を表示
2-1フォルダ ＞ Aフォルダにある2-1.htmlに、絶対パスを使って画像を表示します。
28行目の<p>を削除し、<img>を記述しましょう。代替テキストは「絶対パスで表示した猫」です。
絶対パスのURLは「https://rayout.biz/tou/chap06/neko_1.jpg」
<h3>絶対パスの記述例</h3>
<p>webサーバの画像ファイルを表示<br>
URLは、https://rayout.biz/tou/chap06/neko_1.jpg</p>
<img src="https://rayout.biz/tou/chap06/neko_1.jpg" alt="絶対パスで表示した猫">上記のURLが間違っているので、画像は表示されません。
画像が表示されないときは、代替テキストが表示されます。（safariでは画像の幅と高さが必要）
Safariでも代替テキストを表示できるようにする
画像の幅300px、高さ450pxを指定してみましょう。
<h3>絶対パスの記述例</h3>
<p>webサーバの画像ファイルを表示<br>
URLは、https://rayout.biz/tou/chap06/neko_1.jpg</p>
<img src="https://rayout.biz/tou/chap06/neko_1.jpg" alt="絶対パスで表示した猫" width="300px" height="450px">正しいURLで画像を表示する
<h3>絶対パスの記述例</h3>
<p>webサーバの画像ファイルを表示<br>
URLは、https://rayout.biz/tou/chap06/neko_1.jpg</p>
<img src="https://rayout.biz/tou/chap6/neko_1.jpg" alt="絶対パスで表示した猫" width="300px" height="450px">相対パスで画像を表示
「2-1.html」の46,49,52行目に画像を表示してみましょう。
<h3>相対パスの記述例</h3>
<p>同じフォルダにある画像を表示</p>
<p><img src="neko_2.jpg" alt="同じフォルダの猫" width="300px" height="200px"></p>
<p>一つ下のフォルダにある画像を表示</p>
<p><img src="B/neko_3.jpg" alt="1つ下のフォルダの猫" width="300px" height="200px"></p>
<p>一つ上のフォルダにある画像を表示</p>
<p><img src="../neko_4.jpg" alt="1つ上のフォルダの猫" width="300px" height="450px"></p>
画像が表示されない場合は、相対パスやタグの記述をチェックしましょう