この記事で学べること
- CSSファイルの作り方
- 外部のCSSファイルをHTMLに読み込む
- ファイルの階層 / 階層別のファイルアクセス
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_困2.png)
アイカ
うーん・・・
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
ユウキ
どうしたのアイカちゃん
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_汗.png)
アイカ
CSSを勉強したは良いんだけど、
HTMLファイルが長くなっちゃって・・・
なんか長くてわかりにくくなっちゃったの
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_困2.png)
アイカ
もっと短く、わかりやすくならないかなあ・・・?
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-12-23_キャラ-150x150.png)
その願い、叶えてしんぜよう・・・!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚.png)
ユウキ
うさタブ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_驚き3.png)
アイカ
ウサタブさんっ!!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
うさタブ
外部にCSSファイルをつくって、
それを呼び出すことでHTMLをスッキリさせることができるッピ!
うさタブに任せるッピ! 3分で片付けるッピよ~!
CSSファイルの呼び出しついて学ぼう
元になるコード
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<!-- 見える部分の内容 -->
<body>
<p>Hello World</p>
</body>
</html>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-25_0-1024x606.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
うさタブ
上のコードを元に学習していくッピ!
【メモ帳】にコピーして用意するッピネ!
CSSファイルを作成する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
うさタブ
ひとまず、CSSを書いたファイルを別に作成する必要があるッピネ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
うさタブ
まずはメモ帳を用意して
p {
color: blue;
font-weight: bold;
}
と入力するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-25_2.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
うさタブ
次にこれを【名前をつけて保存】→【すべてのファイル】→『sample.css』と名付けて保存するッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-25_3.jpg)
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-25_4.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_笑顔.png)
アイカ
いい感じだね♪
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-25_1-1024x606.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
うさタブ
上のようにHTMLファイルとCSSファイルが2つ並んだら、オッケーッピネ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
ユウキ
できたぜ!
サンプルコード
HTML
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<!-- 見える部分の内容 -->
<body>
<p>Hello World</p>
</body>
</html>
CSS
p {
color: blue;
font-weight: bold;
}
CSSファイルを外部から読み込む
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
うさタブ
準備ができたら、さっそくCSSファイルを呼ぶッピよ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
うさタブ
<head></head>の間に
<link rel="stylesheet" type="text/css" href="sample.css">
と入力するッピ!
サンプルコード
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<!-- 見える部分の内容 -->
<body>
<p>Hello World</p>
</body>
</html>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-25_5.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚.png)
ユウキ
おおおおおっ
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
アイカ
CSSが適応できてるわ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
うさタブ
ふふふふ、これがプログラミングの魔法ッピ!
<link rel=”stylesheet” type=”text/css” href=”ファイル名.css”>
で、外部のCSSファイルを呼び出すことに成功したッピよ~!
全体のコードの確認
HTMLファイル
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<!-- 見える部分の内容 -->
<body>
<p>Hello World</p>
</body>
</html>
CSSファイル
p {
color: blue;
font-weight: bold;
}
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
うさタブ
次のページでは、
フォルダとファイルの関係・・・【階層】について解説するッピ!
これを覚えていると、ワンランクレベルがアップするッピ。
ぜひ読んで欲しいッピよ~