階層についてのお話
この記事で学べること
- ファイルの階層 / 階層別のファイルアクセス

うさタブ
今回はホームページの階層について学んでいくッピよ~

ユウキ
【階層】?

うさタブ
うーん、そうッピネ・・・

うさタブ
コンピュータにはたくさんのファイルがあって、
そのファイルを管理しやすくするために、フォルダを作ってまとめるッピね?


うさタブ
あれを別な言い方をすると、
【階層】というッピ!

ユウキ
へ~ 知らなかった
同じ階層ファイルの呼び出し方


うさタブ
まず同じ【階層】のファイルの呼び出し方を教えるッピネ!

うさタブ
それは、同じ階層にあるファイルを呼び出すために
必要なもの・・・それは【 ./ 】を足して
【./ファイル名.拡張子】で呼び出すッピ!

うさタブ
例えば【C-1.html】→【C-3.jpg】の画像を表示したい場合
<img src="./C-3.jpg" />
と入力するッピよ~
サンプルコード
<html>
<head></head>
<body>
<img src="./C-3.jpg" />
</body>
</html>

ユウキ
え、わざわざ【 ./ 】をつける必要がある?
これつけなくても、今まで表示できてたじゃん・・・

うさタブ
だけどこれは、他の階層のファイルを呼び出すために、わかりやすく表示したものッピよ~

うさタブ
次は、ひとつ前の階層のファイルを呼び出す方法を教えるッピ!
それを知ったらこの【 ./ 】の意味がわかるッピネ!
ひとつ前の階層のファイルを呼び出す


うさタブ
上の画像を例に説明するッピ!

うさタブ
たとえば、
【フォルダC】に入っている『C-1』ファイルから
前の階層のファイル『A-1』を呼び出す場合

うさタブ
画像ならば
<img src="../A-1.jpg">
となるッピネ!
サンプルコード
<html>
<head></head>
<body>
<img src="./C-3.jpg" />
</body>
</html>

ユウキ
へ~! これは知らなかった!
【 ../ 画像名 . 拡張子】で 『前のフォルダにある画像を呼び出す』ことができるんだな!
ひとつ前のフォルダの中にある別ファイルを呼び出す


うさタブ
次は、『C-1』から『B-2』のファイルを呼び出す場合
【C フォルダ】を一度上がって、
【B フォルダ】にアクセスするッピ!

うさタブ
画像ならば
<img src="../B/B-2.jpg">
となるッピネ!

ユウキ
なんか色々複雑なんだな・・・
学習のまとめ
- 『 ./ ファイル名 . 拡張子』で今のフォルダと同じ場所のファイルを呼び出すことができる
- 『 ../ファイル名 . 拡張子』で一つ前の階層を呼び出すことができる
- 『 ../ フォルダ名/ファイル名. 拡張子』で一つ前の階層の別フォルダのファイル呼び出すことができる

うさタブ
上手くできたッピか?
これからも色んなホームページの基礎解説をしていくッピ!
次回も楽しみにしているッピよ~~!