ファイル構造について解説します。
HTMLにCSSを適応するときに必要な知識になります。
ぼくが、はじめて学習するときは
この「ファイル構造」でつまずいた苦い経験があります。
なるべく丁寧に解説していきます。
ファイル構造とは
ファイルの中に収められている、データの構造のことを言います。
下記の「testフォルダー」をもとに、解説していきます。
実際に確認したい方はダウンロードして確認してみてください。
testフォルダーの構成
この構造がイメージできると、
重要なポイントである、「ファイルパス」を理解しやすくなります。
testフォルダーは、上記のような構造をしています。
「test」っというフォルダーの中に
「gabu 」っというフォルダーと、「reo」っという画像ファイルがあります。
「gabu」フォルダーの中には、「gabu-1」「gabu-2」っという
画像ファイルが入っています。
階層構造と呼ばれる構造で、PCのデータはこういった形で管理されています。
リンク！！！！！！！！！！
HTMLのドキュメントツリー構造と同じような考え方でOKです。
ファイルパス
HTML・CSSでは、「ファイルパス」というものを使います。
「ファイルパス」とは、画像などのファイルを呼び出す時
そのファイルがどこにあるのかを示したもののことです。
- 相対パス
- 絶対パス
という2種類の「ファイルパス」があります。
相対パス
HTML・CSSでは、「相対パス」を一般的に使用します。
呼び出し元のファイルから見て、
呼び出したいファイルがどこにあるのかを示します。
同じ階層にあるファイル
「testフォルダー」では、「gabuフォルダー」の中に
「gabu-1」っというファイルと「gabu-2」っというファイルがあります。
「gabu-1」から、「gabu-2」を呼びだす時は、
相対パスは、単純に「gabu-2」っと書けばOKです。
別の階層にあるファイル（上の階層を指定）
1つ上の階層を表す時は、
「../」（ドットドットスラッシュ）を使用します。
上記の場合「gabu-1」から、「reo」にリンクしたい場合は
1つ上の階層に上って、「reo」を指定します。
そのため、表記としては「../reo」っとなります。
別の階層にあるファイル（下の階層を指定）
では、反対に「reo」から見た「gabu-1」について見てみましょう。
下の階層を示すのは「/」（スラッシュ）です。
「reo」から「gabu-1」を指定したい場合
同じ階層にある「gabu」を指定し、その下の階層にある「gabu-1」を指定します。
つまり、「gabu/gabu-1」という表記になります。
絶対パス
これはURLのことだと思っていただいてOKです。
この方法もHTML・CSSでは、使用します。
例えば、外部で公開されているwebサイトへのリンクなどは、
そのままURLを指定します。