画像やCSSの読み込み、リンク先の指定に使うパスの考え方

画像等のパスを通す際に、読み込むファイル側からみて、読み込みたいファイルがどこにあるかを指定する方法を相対パスと言う。

下記のリンクより、練習ファイルと完成ファイルがダウンロードできます。

練習ファイル
完成ファイル

practice1
htmlファイルと画像ファイルが同じフォルダーにある場合。

WS000005

 

practice2
画像ファイルがhtmlから見て、一つ下のフォルダーにある場合。

WS000000

 

practice3
画像ファイルがhtmlから見て、二つ下のフォルダーにある場合。

WS000001

practice4
画像ファイルがhtmlから見て、一つ上のフォルダーにある場合。

WS000002

 

practice5
画像ファイルがhtmlから見て、二つ上のフォルダーにある場合。

WS000003

 

practice6
画像ファイルがhtmlから見て、一つ上のフォルダーにあるフォルダーに場合。

WS000004

 

まとめ

少し複雑に感じるかもしれませんが、何回か練習すれば慣れると思います。
パスの基本的な考え方は、「ファイルの場所を指定する」ことです。
今回は、画像のタグで説明しましたが、CSSの読み込みや、リンク先の指定など、webサイト制作をしていると、あらゆる場面でパスの考え方が出てくるので、しっかり習得していきましょう。