HTML・CSS独学応援 3-5「ファイル構造」

ファイル構造について解説します。
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を指定します。

© 2021 ーれおの部屋ー