CSS記法について
CSSではいくつか記法が存在するが、代表的なものに、
HTMLなどで指定された要素に対して{}(波カッコ)をつけてスタイルを記述していくものがある。
この時に、{}(波カッコ)の前についた要素のことを セレクター という
セレクターの書き方には、いくつか種類があるため基本的なものについてまとめてみた。
基本セレクターについて
| 名称 | 記法 | 対象のHTML要素 | |
|---|---|---|---|
| ⑴ | 要素型セレクター | h1 | <h1>...</h1> |
| ⑵ | classセレクター | .info | <p class="info">...</p> |
| ⑶ | idセレクター | #ok | <button id="ok">...</button> |
| ⑷ | 属性セレクター | [href] | <a href="about.html">...</a> |
| ⑸ | 全称セレクター | * | 全ての要素 |
Sampleコードを参考にして例を書いていく
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Sample</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Hello World!!!</h1>
<p class="info">Sample Sample Sample Sample</p>
</body>
</html>
(1) 要素型セレクター
要素名をそのまま書いて、スタイルを指定できる。
styles.css
/* (1)要素型セレクター */
h1 {
color: red;
}
結果
h1の文字色が赤くなる。
(2) classセレクター
.(ドット)の後にクラス属性の値を書いて、そのクラスのついた要素のスタイルを指定できる。
styles.css
/* (2)classセレクター */
.info {
color: skyblue;
}
結果
Sampleの文字色が水色になる。
特徴
- 要素型と違い、途中でタグ名などを変更した場合でもセレクターを修正せず同じスタイルを維持できる。
- クラス属性の値は複数指定することが可能。
index.html
~略
<body>
<h1>Hello World!!!</h1>
<p class="info">Sample Sample Sample Sample</p>
<!-- h2のclass属性の値にinfoとtitleを指定 -->
<h2 class="info title">Hello World!!!</h2>
<p>Sample Sample Sample Sample</p>
</body>
~略
styles.css
.info {
color: skyblue;
}
/* 属性の値titleのみ青色でフォントを細くする。 */
.title{
color: blue;
font-weight: normal;
}
結果
(3) idセレクター
#(バウンド記号)の後にid属性の値を書いて、そのidのついた要素のスタイルを指定できる。
index.html
~略
<body>
~
<!-- buttonのid属性の値にokを指定 -->
<button id="ok">OK!!!</button>
</body>
~略
styles.css
/* (3)idセレクター */
#ok{
background-color: deeppink;
}
結果
背景が濃いピンク色のボタンが指定できる
特徴
- 同じページ内で同じ属性の値を使ってはいけない。
- class属性と違い、空白を使ってはいけない為id属性の値は複数指定できない。
(4) 属性セレクター
[](大カッコ)の中に属性の値や名前を書いて、特定の属性のついた要素のスタイルを指定できる。
(5) 全称セレクター
*(アスタリスク)をセレクターに書いて、全ての要素のスタイルを指定できる。
styles.css
/* (5) 全称セレクター */
*{
font-size: 8px;
}
結果
文字が一括で小さくなった。
