#CSSの書き方
書き方には3パターンある
- CSSファイルに書いて、HTMLから読み込む
- HTMLファイルにStyleタグを作る
- HTMLタグの中に書く
今回は2つめの書き方を説明する
#基本構造
セレクタ {
プロパティ:値;
プロパティ:値
}
セレクタはどこのタグかを示す(class名やid名)
プロパティはそのタグのどの値かを指す
値はプロパティに割り当てる値を指定する
#プロパティの書き方
「{}」でプロパティを囲む
プロパティと値の間は「:」(コロン)でつなぐ
また、複数のプロパティがある場合は「;」(セミコロン)
注意点
半角スペースやタブ、改行は挿入しても構わないが、全角スペースは禁止
#セレクタの書き方
基本タグ名を書けば該当のタグ名の部分に反映される
そのほかには
-
ID名・・・セレクタに記入する際は先頭に**「#」(シャープ)**を書く
-
class名・・・セレクタに記入する際は先頭に**「.」(ピリオド)**を書く
-
一度に複数書ける。その場合は間に**「,」(カンマ)**を書く
-
子孫セレクタ・・・「◯◯タグ内にある◯◯タグにだけデザインを適用させたい」という絞り込んで指定させたいときに使う。半角スペースで区切る
例)class=”main”タグの中のpタグの中のspanタグ内にのみデザイン(オレンジ色)を適用させたい場合は
.main p span{
color:orange
}
#プロパティの書き方
取り合ず並びて行く
- font-size(フォントサイズ)
- color(フォント色)
- text-align(文字寄せ)
- background-color(背景色)
#コメントアウトについて
/コメントアウトする内容/ とするとおけ