HTML から CSS を読み込む
この章のゴールは「HTML から CSS ファイルを読み込む方法を理解する」ことです。
前回の「CSS の書き方」の中の「1.CSS ファイルにスタイルを定義して HTML から CSS ファイルを読み込む」でも話した、以下の流れに沿って CSS ファイルを HTML から読み込んでいきます。
- 任意のフォルダに拡張子が「.css」で終わる CSS ファイルを作る
- CSS ファイル内に「スタイル定義の書き方（文法）」のルールでスタイル定義を行う
- HTML の「link 要素」を使って、１で作成した CSS ファイルを読み込む
動画解説
サンプルコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>HTMLからCSSを読み込む</title>
</head>
<body>
<div class="container">
<h1>HTMLからCSSを読み込む流れ</h1>
<ol id="flow">
<li class="item">「.css」で終わる CSS ファイルを作る</li>
<li class="item">CSSファイル内でスタイルを定義する</li>
<li class="item">HTMLから作成したCSSファイルを読み込む</li>
</ol>
</div>
</body>
</html>
css/style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/*
「*」は「全称セレクター」と呼び、全ての種類の要素にマッチするセレクターです。
つまり「body,p,div,h1」などなどありとあらゆる要素のスタイルを一括で定義する事ができます。
「全称セレクター」の詳細は以下のドキュメントからも確認できます。
↓
MDN: https://developer.mozilla.org/ja/docs/Web/CSS/Universal_selectors
*/
* {
margin: 0;
padding: 0;
}
body {
background-color: #ccc;
padding: 20px 0;
}
.container {
background-color: #fff;
width: 80%;
max-width: 1280px;
margin: 0 auto;
padding: 16px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: red;
}
#flow {
display: flex;
flex-direction: column;
width: 80%;
margin: 0 auto;
}
.item {
border: 1px solid #000;
border-radius: 8px;
min-height: 100px;
list-style: none;
font-size: 1.2rem;
color: #555;
display: flex;
justify-content: center;
align-items: center;
}
/*
「:not()」や「:first-child」など「:〇〇」のようなものを「擬似クラス」と呼びます。
「擬似クラス」の詳細は以下のドキュメントからも確認できます。
↓
MDN: https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes
上記ドキュメントだけでイメージが掴めない場合は、
「CSS 擬似クラス 使い方」などと検索することで、
「擬似クラス」についての記事がたくさん見つかるため、
それらの記事を参考に独学スキルを高めていきましょう！
*/
.item:not(:first-child) {
margin-top: 10px;
}
.item:hover {
cursor: pointer;
background-color: rgba(0, 200, 255, 0.1);
color: #ff0000;
}
まとめ
今回はあらかじめ用意したコードを元に、以下の手順で HTML から CSS ファイルを読み込んで、スタイルが反映されるところまでを確認しました。
- 任意のフォルダに拡張子が「.css」で終わる CSS ファイルを作る
- CSS ファイル内に「スタイル定義の書き方（文法）」のルールでスタイル定義を行う
- HTML の「link 要素」を使って、１で作成した CSS ファイルを読み込む
今回のサンプルコードの中でも、これまでに取り上げていない CSS のプロパティがたくさん出てきたことに気付けたかなと思います。
「よくわからないプロパティ」「このプロパティもう詳しく知りたいな」などがあれば、都度調べるクセをつけておきましょう。
また、今回はあらかじめ用意したコードを使って話を進めましたが、もしご自身で「こういうページを作ってみたい」というのがあれば、ぜひページ作りにチャレンジしてみましょう！
現役エンジニアも、基本的には以下のような流れで、調べながら実装をしています。
- 実装したいことを考える
- イメージを実現できそうな機能が何かを調べる（これまでに身につけた知識や覚えているキーワードで検索をする）
- 解決に繋がりそうな記事を見つけたら、実際に手を動かして実装してみる
- うまく行くまで１〜３の手順を繰り返す
つまり、開発に関することを全てを覚えているわけではないということです。
「検索力」「ググり力」は地道ですが「わからないことを少しずつ自分で解決」することで鍛えられます。
ぜひ、今回のサンプルコードでわからなかった部分も学習機会の１つとして取り組んでもらえたら幸いです^^