【メモ】 絶対パスと相対パス（修正済）

まずスタイルシートの指定方法には、これまで授業でやってきたHTMLファイルの中にいっしょに書く方法と、HTMLと分けて別ファイルに書く方法とがあります。

これまでの授業では、CSSもHTMLもまだ行数が少なかったので、HTMLファイルの中にいっしょに書く初心者向けの方法でしたが、これからは行数が多くなっていくのでHTMLファイルとCSSファイルを分けて書く、より実践向けの方法になります。

HTMLの中で別ファイルであるCSSファイルのある場所を指定する場合、指定方法は【絶対パス】と【相対パス】の2種類がある。

WEB上での【絶対パス】とは、「http://から始まるURL」でファイルの場所を指定することで、基本的に外部リンクに使う。（PC内での絶対パスは、c:\…から始まるファイルまでのアドレス）
【相対パス】とは、そのファイルの場所から指定のファイルの場所までの位置関係の情報で、内部リンクとして使う。

【絶対パス】 完璧に場所を指定できるが、全部書くので長くなる。
→ 東京都千代田区千代田１番地１号
【相対パス】 指定元から対象までの位置関係。近ければ近いほど短くなる。
→ 町内の小学校、ふたつ隣町の小学校

【絶対パス】が確実で簡単だけど内部を指定するとSEO評価が下がるので、サイト内でのリンクやファイルの指定は全て【相対パス】で行います。

もし、HTMLファイルと同じフォルダ内にCSSファイル（aaa.css）があるなら
【 href="./aaa.css"】
ドットスラッシュ[./]は、自分（HTMLファイル）と同じフォルダ内という意味なので【同じフォルダ内にある aaa.cssファイルを読む】という意味になります。

[./]は省略できるので【href="aaa.css"】

もし、HTMLファイルと同じフォルダ内にある bbbフォルダの中にあるCSSファイル（aaa.css）なら
【href="./bbb/aaa.css"】
【同じフォルダ内の bbbフォルダ内の aaa.cssファイルを読む】という意味になります。

[./]は省略できるので【href="bbb/aaa.css"】

もし、HTMLファイルと同じフォルダ内にある cccフォルダの中の bbbフォルダの中にあるCSSファイル（aaa.css）なら【href="./ccc/bbb/aaa.css"】
【同じフォルダ内の cccフォルダ内の bbbフォルダ内の aaa.cssファイルを読む】という意味になります。

[./]は省略できるので【href="ccc/bbb/aaa.css"】

地名に例えると、東京フォルダ内の新宿フォルダの中にあるスタジオアルタ.css なら
【href="東京/新宿/スタジオアルタ.css"】

東京は省略して【href="新宿/スタジオアルタ.css"】
みたいな感じでファイルの場所を指定して読み込みます。

フォルダ名もCSSファイル名も、好きな名前を指定できます。（最終的にサーバーにアップするので半角英数字）

今日の授業では index.htmlと同じフォルダ内にあるCSSフォルダの中にあるCSSファイル（style.css）だったので【href="css/style.css"】

次に外部にあるCSSファイルから画像を指定する場合。
基本的にやり方は同じですが、今度はCSSファイルからの読み込みなので、HTMLファイルの場所からの指定ではなく、CSSファイルの場所からの指定になります。

ほとんどの場合画像ファイルはCSSとは別フォルダ（例えばimagesフォルダ）に入っているはずなので
【css/style.css】から【images/gazou.jpg】地名で言うと【新宿/スタジオアルタ.css】から【池袋/ホウライビル.jpg】というように全く別フォルダの場所を指定することになります。

※東京＝index.html ではなくて、東京=現在のフォルダの外のフォルダ名です。

同じフォルダ内にあるフォルダの階層が深くなっていく分なら、単純にフォルダ名を付け足していけばよかったのですが　【フォルダ名/フォルダ名/フォルダ名/gazou.jpg】
今度はフォルダの外にある別のフォルダの中にあるファイルを指定する事になります。

index.htmlからimagesフォルダ内のgazou.jpgを指定する場合は単純に【href="images/gazou.jpg"】で指定できますが

style.cssからgazou.jpgを指定するには、まずcssフォルダから出て、共通のフォルダの階層まで戻ってからimagesフォルダ内のgazou.jpgを指定します。

地名で言うと、池袋フォルダは新宿フォルダとは完全に別ですが、両方とも東京という括り（フォルダ内）にあるので、新宿フォルダから出て東京フォルダまで戻ってから池袋フォルダを指定する必要があります。

【東京/新宿/スタジオアルタ】から【東京/池袋/ホウライビル】なら、【新宿フォルダを出て東京フォルダに戻ってから、池袋フォルダ内のホウライビルを読む】となるので
【href="../池袋/ホウライビル"】

ドットドットスラッシュ[../]は、現在のフォルダから出て、ひとつ上のフォルダへ戻るという意味です。
ドットドットドットスラッシュ[.../]なら二つ上のフォルダへ戻る、[..../]なら三つ上のフォルダへ戻る。　間違い
[../../]なら二つ上のフォルダへ戻る、[../../../]なら三つ上のフォルダへ戻る。

よって【css/style.css】から【images/gazou.jpg】を読み込む場合なら
【href="../images/gazou.jpg"】