CSSはどうのように記述するのか？基本的な文法を説明していきます。
CSSの基本文法
CSSの基本文法は、「セレクター」「プロパティ」「値」の3つで構成されています。
まずは、基本文法に沿った記述をしていきます。
p{
color: red;
}
この記述では「Pタグの文字色を赤にする」という意味になります。
実際に1つ1つ見ていきましょう。
セレクター（例：p）
「どの部分を装飾するか」を指定していきます。
対象となる、HTMLタグの名前やクラス、IDなどの特定の変更したい箇所を書きます。
「{」から始まり「}」で終わります。
プロパティ（例：color）
セレクターで指定した部分の「何を変えるのか」を書いていきます。
例えば、文字色や文字サイズの変更、背景画像の追加などをすることが出来ます。
この後の「値」の間には、「：」を書いて区切ります。
値（例：red）
「見た目をどのように変えるのか」を書いていきます。
何色に変えるのか、どの背景画像を追加するのかなど、具体的にしています。
値の最後には、「;」を書いてあげます。
CSSを書く時のルール
CSSを書く際には基本文法に沿い、以下のルールを守りながら記述しておきます。
- プロパティの後ろには「：」をつける
- 値の後ろには「;」をつける
- セレクターの前後は「{}」で囲む
- 半角で記述する
- なるべく小文字で記述する
CSS基本文法の補足
CSSは、以下の記述方法も可能です。
複数のセレクターに指定する
h1,p{
color: red;
}
必ずタグの間に「,」の区切りを書いてあげること。
少し似ているけど違う書き方
div p{
color: red;
}
「,」の区切りはありませんが、上記のような書き方でもOKな場合があります。
それは「divの中に含まれるpにのみに適用させる」場合です。
上記の例は、divの中に含まれるpにのみ文字色の赤色を適用させています。
その為、ただのpには適用されません。
複数の装飾を指定する
h1{
color: red;
font-size: 20px;
}
必ず値の最後には「;」を書いてあげること。
CSSの単位
CSSには様々な単位が存在します。
1つ1つ見ていきましょう。
px（ピクセル）
最も使う単位です。
画面上の最小単位（１ピクセル）を基準とした単位です。
絶対値と呼ばれ、指定したサイズから変動はありません。
％（パーセント）
親要素のサイズを基準に割合で指定する単位です。
相対値と呼ばれ、基準となる要素のサイズによって変動します。
em（エム）
親要素の文字サイズを基準にする単位です。
相対値と呼ばれ、基準となる要素のサイズによって変動します。
rem（レム）
HTMLの文字サイズを基準にする単位です。
ルート要素（HTML要素）に指定されたサイズを基準にしています。
相対値と呼ばれ、基準となる要素のサイズによって変動します。
コメント