CSSの基礎文法
CSSは、セレクタ・プロパティ・値の3つからなります。
書き方のポイント
プロパティと値は、「｛｝」で囲みます。
プロパティと値の間は「：（コロン）」
複数プロパティを指定するときは、終わりに「；（セミコロン）」を忘れずに！
コメントアウトを使用しながら、わかりやすく記述します。
「/* コメント */」
例題を使って文法の意味を確認
/* 例 */
#navi {
background: none;
}ここでいうと
「#navi」がセレクタ
「background」がプロパティ
「none;」が値
セレクタ
セレクタは、どの部分のデザインを変えるのかを指定します。
タグ（「p」「div」など）、class、id名が入ります。
前述した例では、「#navi」ナビゲーションのデザインを変更したい ということになります。
セレクタの書き方はいくつかあります。
①タグを使ったセレクタの書き方
p {
color: #d9d9d9;
}
a {
color: #ffffff;
}タグ名｛｝で書けばOK
②「id」を使ったセレクタの書き方
<div id="container">
<p>aaa</p>
</div> #container {
color: #d9d9d9;
}#を先頭につけて「#＋id名｛｝」で書きます。
※同じid属性はページ内で1回しか使えないので注意！
③「class」を使ったセレクタの書き方
.（ピリオド）を先頭につけて「.＋class名｛｝」で書きます。
<div class="container">
<p>aaa</p>
</div>.container {
color: #d9d9d9;
}例題で使用したコードのポイント！
「#navi」じゃなくて「nav」じゃないの？
/* 例 */
#navi {
background: none;
}ナビゲーションのタグに「nav」タグがあります。
ここでは、navタグに設定した id名（ここでは「navi」）で指定されています。
navタグは、ページで何度でも使用することができます。
タグで指定すると、ほかにもnavタグを使用している場合、ほかのnavタグにもCSSが適応されてしまいます。
何度もタグを使用している場合は、id名やclass名で指定する方がよさそうです。
※同じid属性はページ内で1回しか使えないので注意！
④複数指定したい場合
タグ名、id名、class名 複数指定したい場合は、「,（カンマ）」で区切ります。
いくつでもOK
.container,p {
color: #d9d9d9;
}⑤絞り込んで指定したい場合（子孫セレクタ）
子孫セレクタと呼ばれるものですが、○○の中にある○○のみ変更したい、といった場合に使用します。
タグ名、id名、class名 の間を、「半角スペース」で区切ります。
ここでの例は、「class=”container”」のなかの「pタグ」のみ変更 という意味になります。
<div class="container">
<p>aaa</p>
</div>.container p {
color: #d9d9d9;
}セレクタの確認方法
セレクタの確認方法は、デベロッパーツールを使用します。
右クリック→「検証」→変更したいHTMLを確認して、そのタグやclassやidを確認します。
デベロッパーツールについては下記記事をご参照ください。
プロパティ
プロパティでは、何を変えるのかを決めます。
前述した例では、「background」背景を変更したい ということになります。
ほかにも、
「font-size」
「 color」
「padding」
「display」
などがあります。
値
値は、見た目をどのように変えるのかを決めます。
前述した例では、「background: none;」背景を「なし」に変更したい ということになります。
CSSには優先順位が存在
CSSには優先順位が存在します。
別の記事で紹介しているので参考にしてください！
CSSセレクタの表現
セレクタは、誰が見てもわかりやすいように書くことが必要です。
下記のサイトがわかりやすかったのでご紹介しておきます！
少し難しいのですが、参考になるサイトです
表現のいい例と悪い例が載っています：
よく使うセレクタが書いてあります：
実際に書きながらではないと覚えにくいので、一緒にがんばりましょう！
コメント