画像その他のファイルを読み込んで使う場合にはパスを通さないと使えません。
TerapadのインストールでもC:ドライブからchromeエグゼファイルまでパスを通しましたね。
パスには絶対パスと相対パスの、2通りの指定の仕方があります。
では、相対パスから見てみましょう。
相対パス
この図はExcelで作りました
図を見てください。
拡張子が付いているのはファイルで、付いていないのはフォルダーです。
ファイルからフォルダーに向かって進むことを階層を上がるといい、フォルダーからファイルに向かうことを階層を下がると言う、とします。
では、style.cssで画像を使用する例を見てみましょう。
style.cssからcssフォルダーへ1階層あがります、1階層上がることを../ (てんてんスラッシュ)と書きます。
もし、2階層上がるのであれば../../になり、3階層上がるのであれば../../../になります。
cssフォルダーの横のimagesフォルダーへいきます、横移動はそのままフォルダーを書きます、続けると../imagesとなります。
imagesフォルダーから1階層下がります、1階層下がることを/（スラッシュ）と書きます、続けると../images/となります。
さあ、abc_1.jpgへ着きました、続けて書くと、../images/abc_1.jpgとなります。
この様に、道を通じることをパスといい、ファイルからファイルへ通じることを「相対パス」といいます。
backgroundで画像を指定するとbackground: url(“”);でダブルクォーテーションの間にパスが入って、
background: url(“../images/abc_1.jpg”);
となります。
では次に例としてindex.htmlで外部ファイルのstyle.cssをリンクしてみましょう。
index.htmlから横のcssフォルダーへ行きます、そのままcssでいいのですが、横へ行くときに./を付けて./cssでもいいです。
私は付けています、その理由は…..？ 書き方がカッコイイと思っているのかも。
1階層下がってstyle.cssへ行きます、続けると./css/style.cssというパスになります。
link要素に書くときはこういう書き方になります。
<link rel=”stylesheet” href=”./css/style.css”>
この様にホームページファイルでは、ファイルからファイルを呼び出す場合に相対パスが使われます。
次に絶対パスを見てみましょう。
絶対パス
あなたは制作中のホームページで画像を使いたいのですが、公開したホームページの画像を使うことができます。
その場合、URLから絶対パスで画像を指定することができます。
例えば、あるホームページのgazouフォルダーに入っているmemorable.png画像を使うことができます。
その指定方法は絶対パスで
https://www.dsaiya.com/gazou/memorable.pngとなります。
URLからファイルを指定するのが絶対パスです。