前回CSSの使い方は学んだけどこれってどこに書いたらいいの？
CSSを適用させるには
- タグ内に記入
- headタグ内に記入
- 別ファイルを作成する
と三種類の方法があるんだ
じゃあどれで書けば良いの？
それぞれ特徴があるから順にみていこう！
1.タグ内に記入
タグの中にstyle属性を書いて、プロパティとその値を書く事でCSSを反映させる事ができます。
<タグ style="プロパティ: プロパティの値;"> </タグ><p style="color: skyblue;">おはよう</p>
<p style="color: red;">こんにちは</p>
<p style="color: green;">こんばんは</p>おはよう
こんにちは
こんばんは
それぞれスタイルが適用されている事がわかります。
2.headタグ内に記入
二つ目はheadタグ内にstyleタグを入れて、その中に通常通りセレクターを指定して、プロパティと値を入れるやり方です。
<head>
<style>
セレクター{
プロパティ: 値;
}
</style>
</head><head>
<meta charset="UTF-8">
<meta name="description" content="練習用サイトです">
<title>sample-site</title>
<style>
p{
color: blue;
}
span{
color: orange;
}
</style>
</head>
<body>
<span>おはよう</span>
<p>こんにちは</p>
<span>こんばんは</span>
</body>おはよう
こんにちは
こんばんは
こちらもそれぞれスタイルが適用されています。
3.CSSファイルを作成して読み込む
三つ目は別のCSSファイルを作成し、head内でlinkタグを使用して読み込む方法です。
この方法がキレイに書けて一番ポピュラーです。
- CSSファイルを作成する
- headタグにコードを記入する
<link rel="stylesheet" href="スタイルシートの名前.css">rel属性にはstylesheetを読み込むということを書き、href属性には読み込むスタイルシートの名前を書きます。
これをheadタグ内に記入します。
<head>
<meta charset="UTF-8">
<meta name="description" content="練習用サイトです">
<title>sample-site</title>
<link rel="stylesheet" href="スタイルシートの名前.css">
</head>
<body>
<span>おはよう</span>
<p>こんにちは</p>
<span>こんばんは</span>
</body>@charset "UTF-8";
p{
color: pink;
}
span{
color: tomato;
}おはよう
こんにちは
こんばんは
ちゃんと指定できていれば例の様に反映されます。
@charset “UTF-8”;って何？
headタグ内に書いたmetaタグと同じで、これをcssの先頭に書くことでコードの文字化けを防ぐことができるんだよ
忘れない様にね！
3-1. VS CodeでのCSSファイルの作り方
VS Codeの場合はこの方法が一番楽かなと思います。
- STEP1HTMLファイルを読み込む
- STEP2linkタグをheadタグ内に記入する先ほどのlinkタグを記入します。
今回は”stylesheet.css”という名前で作成しました。 - STEP3CSSファイルを作成する
- STEP4開いたら「ファイルの作成」をクリック
- STEP5@charsetを忘れずに書いてCSSを書き始める
あとは前回見た様に書いていくだけです！
もちろん普通にCSSファイルを作成してlinkタグで呼び出す方法でもOKだと思います。
4.優先度
ここまで三種類の書き方を聞いたけど三箇所全ての場所にCSSを書くとどうなるの？
その場合はタグ内＞headタグ内＞別のスタイルシートの順で優先されます
参考までに覚えておきましょう
5.まとめ
- CSSファイルの作成には三種類ある
1.タグ内に記入
<タグ style="プロパティ: プロパティの値;"> </タグ>2.headタグ内にstyleタグを書いてその中に記入
<head>
<style>
セレクター{
プロパティ: 値;
}
</style>
</head>3.別にCSSファイルを作成し、headタグ内で読み込む
<head>
<link rel="stylesheet" href="css/スタイルシートの名前.css">
</head>- 「3.別にCSSファイルを作成し、headタグ内で読み込む」のが一般的
- 優先順位はタグ内＞headタグ内＞別のスタイルシート
コメント