階層についてのお話
うさタブ
ファイルの呼び出しについて勉強するなら、
【階層】のお話もやっていかなければいけないッピな～
アイカ
【階層】？
ユウキ
オレは前にHTMLで勉強したな～
うさタブ
アイカちゃんに説明するッピとね～
うさタブ
コンピュータにはたくさんのファイルがあって、
そのファイルを管理しやすくするために、フォルダを作ってまとめるッピね？
アイカ
知ってるわ！ マイドキュメントとか、マイピクチャとか
うさタブ
あれを別な言い方をすると、
【階層】というッピ！
アイカ
そうなんだ～！
同じ階層ファイルの呼び出し方
うさタブ
まず同じ【階層】のファイルの呼び出し方を教えるッピネ！
アイカ
？？
同じファイルに入っているものは、さっき呼び出したような・・・？
うさタブ
あれもひとつのやり方ッピね～
でも別のやり方もッピある！
うさタブ
それは、同じ階層にあるファイルを呼び出すために
【 ./ 】を足すもの・・・
【./ファイル名.拡張子】で呼び出すッピ！
うさタブ
先程のCSSファイルでいうなら、
<link rel="stylesheet" type="text/css" href="./sample.css">でCSSファイルを呼び出すッピよ～
ユウキ
どうみても手間が増えただけだよな～コレ
アイカ
？ ただ『 ./ 』が増えただけな気がするのだけど・・・
うさタブ
その通りッピ・・・
だけどこれは、他の階層のファイルを呼び出すために、わかりやすく表示したものッピよ～
ひとつ前の階層のファイルを呼び出す
うさタブ
上の画像を例に説明するッピ！
うさタブ
たとえば、
【フォルダC】に入っている『C-1』ファイルから
前の階層のファイル『A-1』を呼び出す場合
うさタブ
CSSならば、
<link rel="stylesheet" type="text/css" href="../A-1.css">画像ならば
<img src="../A-1.jpg">となるッピネ！
ひとつ前のフォルダの中にあるファイルを呼び出す
うさタブ
次は、『C-1』から『B-2』のファイルを呼び出す場合
【C フォルダ】を一度上がって、
【B フォルダ】にアクセスするッピ！
うさタブ
CSSならば、
<link rel="stylesheet" type="text/css" href="../B/B-2.css">画像ならば
<img src="../B/B-2.jpg">となるッピネ！
アイカ
【 ../ フォルダ名 / ファイル名.拡張子】でアクセスできるのね！
うさタブ
その通りッピ！
アイカちゃん才能あるッピよ～！
学習のまとめ
- 【ファイル】→【名前をつけて保存】→【ファイルの種類】→【すべてのファイル】で『ファイル名.css』とすることで『CSS』ファイルを作ることができる
- CSSファイルの記述する方法は、 セレクタ { プロパティ: 値;}
- <link rel=”stylesheet” type=”text/css” href=”ファイル名.css”>で、外部からのCSSファイルを呼び出すことができる
- 『./』で今の場所・『../』で一つ前の階層にアクセスすることができる
うさタブ
上手くできたッピか？
これからも色んなホームページの基礎解説をしていくッピ！
次回も楽しみにしているッピよ～～！
