CSSの基本、書式と名称【CSS入門】

CSSを編集するにはまず基本を押さえておく必要があります。
基本的なルールさえ覚えてしまえば非常に簡単な構造になっているので、初心者でも比較的簡単に編集することができます。

目次

各部の名称

CSSは大きく分けるとふたつ、赤枠のセレクタ(selector)と、緑枠の宣言ブロック(declaration block)で構成されています。

宣言ブロックはさらにふたつにわけられます。
コロン(:)で区切られた前半部分がプロパティ名(property name)、後半部分がプロパティ値(property value)となっています。
一般的には「プロパティ」と「値」といわれることが多いです。

セレクタ

CSSの先頭はセレクタから始まります。
適応先を示していて、以降の{}内はセレクタに対しての指定となります。

セレクタはHTMLタグ(タイプセレクタ)やclass(.で始まるclass=""の中身)、id(#ではじまるid=""の中身)などで指定します。
※他にも属性セレクタや、疑似クラス、ユニバーサルセレクタがあります。

セレクタは、カンマで区切ることで複数指定することができます。

宣言ブロック

プロパティ名、コロン(:)、プロパティ値、セミコロン(;)でひとくくりの宣言となります。
※最後の宣言にセミコロンはつけなくてもいいのですが、一般的にはつけます。

まとめ

基本さえ押さえてしまえば比較的簡単に編集できます。
まずは色やサイズを変更してみましょう。
いきなり編集するのが怖い方は、「WebエンジニアもやってるCSSの編集法」でいろいろ変更してみてください。
ではでは~