こんにちは!
UPSTARTSのSベンです!
今回から3回に分けて
CSSにおいて重要な「セレクタ」についてやっていきます。
CSSの書き方
CSSの基本の書き方としてはこのような形になります。
1 2 3 4 5 6 7 8 |
/* 一行に書く場合 */ セレクタ{ プロパティ:値; } /* 複数行書く場合 */ セレクタ{ プロパティ:値; プロパティ:値; } |
セレクタとは?
セレクタとはスタイルを適用する対象のことです。
セレクタを正しく指定しないと、
思った所にスタイルを適用する事ができなくなってしまうので、
よく覚えておいてください。
では実際にセレクタを使っていきましょう!
今回はこちらのhtmlにスタイルをあてていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSSレッスン</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>悪魔の実</h1> <p id="strongest">ロギア</p> <p class="strong">パラミシア</p> <p class="strong">ゾオン</p> </body> </html> |
ユニバーサルセレクタ
ではまず「ユニバーサルセレクタ」から見ていきます。
これは全ての要素に対してというセレクタになります。
書き方は以下のようになります。
1 2 3 |
* { color: red; } |
要素名を指定したセレクタ
次に要素名を指定したセレクタです。
h1やpなどの要素を指定し、スタイルをあててあげる事ができます。
書き方は以下になります。
1 2 3 4 5 6 |
h1 { color: red; } p { color: blue; } |
id名やclass名を指定したセレクタ
次にid名やclass名を指定したセレクタです。
これはhtmlのレッスンで軽く触れた内容になります。
idはid名の前に「#」、
classはclass名の前に「.」を付けます。
1 2 3 4 5 6 |
#strongest { color: red; } .strong { color: blue; } |
今回はセレクタ第一弾をやっていきました。
次回はセレクタの第二弾です。
ではまた次回!