CSS書き方
-
CSSファイルを作成
テキストエディターで新しいファイルを作成し、拡張子を.cssに設定 -
HTMLファイルにCSSをリンク
HTMLファイルのheadタグ内に、linkタグを追加してCSSファイルをリンク
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
- CSSルールを作成
CSSルールは、セレクター、プロパティ、値から構成される
セレクター {
プロパティ: 値;
}
セレクター：CSSスタイルを適用する要素を指定
EX) h1はすべてのh1タグにスタイルを適用することを意味する
プロパティ：要素の外観や動作を制御するために使用される
EX) colorはテキストの色を制御する
値：プロパティの設定値を指定
h1 {
color: red;
}
↑ h1タグに赤い色を設定する例
- CSSのカスケードと継承
CSSはカスケードと継承の概念を持っている
カスケードは、複数のスタイルが同じ要素に適用される場合、どのスタイルが優先されるかを定義する
継承は、親要素のスタイルが子要素に継承されることを意味している
- CSSのクラスとID
クラスとIDを使用して、特定の要素にスタイルを適用できる
クラス：同じスタイルを複数の要素に適用する場合に使用される
ID：一意の要素にスタイルを適用する場合に使用される
<p class="red">このテキストは赤色です。</p>
<p id="green">このテキストは緑色です。</p>
.red {
color: red;
}
#green {
color: green;
}