CSS入門講座|外部からCSSを呼び出してみよう

CSS

階層についてのお話

うさタブ
うさタブ

ファイルの呼び出しについて勉強するなら、

【階層】のお話もやっていかなければいけないッピな~

アイカ
アイカ

【階層】?

ユウキ
ユウキ

オレは前に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ファイルを呼び出すことができる
  • 『./』で今の場所・『../』で一つ前の階層にアクセスすることができる

うさタブ
うさタブ

上手くできたッピか?

これからも色んなホームページの基礎解説をしていくッピ!

次回も楽しみにしているッピよ~~!

タイトルとURLをコピーしました