過去の解説でCSSを記述し動作することを確認しましたが、そこでは細かい記法については触れず、まずは『CSSとはどういうものなのか』を体験するだけに留めました。
今回は『CSSの記法』について解説します。
CSSの記法
CSSの記法に則って要素を装飾する際は以下のように記述します。
セレクタ{プロパティ:値;} ※{ : ; }は全て半角
セレクタ・プロパティ・値
ではひとつずつ解説します
セレクタ HTML内に記述された『どの要素を』対象にするのか、を指定
プロパティ 指定した要素の『どの見た目（色や大きさなど）を』編集するのか、を指定
値 指定した プロパティを『どれぐらい(強度や種類)』適用するのか、を指定
『どの要素（セレクタ）』の
『どの見た目（プロパティ）』を
『どれぐらいの強度・どんな種類（値）』
で装飾するのかを指定します
見出し（h1要素）の
文字色（colorプロパティ）を
青色（blue）に変更する
画像（img要素）の
横幅（widthプロパティ）を
500pxに変更する
というような組立てかたですね。
具体的な記述例を挙げてみます。
例）h1要素の文字色（colorプロパティ）を青色（blue）に指定する
h1{color:blue;} ※{ : ; }は全て半角
上記のように記述することでHTML内に記述されたh1要素の文字色が青色で表示されます。
記号 { : ; }
続いて半角の記号 { : ; } について
『：』コロン
半角コロン『：』はプロパティとその値と結ぶために用います。
h1{color:blue;}
『プロパティ』と『その値』は半角コロン『 : 』で結びます。
「colorプロパティの値は・・・blueです」という文章があるとしたら、
その中の『は・・・』の部分に相当します。
半角中カッコ 『 { 』『 } 』
プロパティと値のセットは中かっこ『 { 』『 } 』で囲みます。
ある対象に対する『設定のまとまり』を示し、次の『まとまりとの区切り』になります。
CSSファイルには様々な対象に対してスタイルを次々に指定していきますので、対象（セレクタ）を変えながら箇条書きのように記述を連ねていきます。
例えば
h1の文字色をblue
に指定し、
併せて
pの文字色をred
に指定するとき・・・
h1{color:blue;}
p{color:red;}
というように箇条書きで続けて記述します。
この時、1行目と2行目を明確に『区切る』ために『 } 』が必要なのです。
h1に対する設定は『{ 』から 『}』までですよ
というような意味で使われているんですね。
半角セミコロン『；』
あるプロパティと、それとは別のプロパティとの『区切り』に用います。
以下のコードを見てください。
※半角セミコロンのみ赤字にしています
h1{color:blue;width:500px;}
読みやすく間隔を空けてみます。
h1{color:blue; width:500px;}
こうして見てみると、このh1には2つのプロパティが設定されているのが解りますね。
colorプロパティと
widthプロパティです。（※widthは要素の横幅を任意に指定する）
このように、ある対象（セレクタ）に対して複数のプロパティを設定する場合、そのプロパティごとの『区切り』が必要となります。
それが半角セミコロンなのです。
区切りがなければ、ブラウザーは正しく解析ができずエラーを起こします。
h1{color:bluewidth:500px;}
↑ 『color:blue』と『width:500px 』の間に区切りが無い（エラー）
ところで、『半角セミコロンはプロパティとプロパティを区切るものである』ことは解りましたが、ではなぜh1に対してプロパティが1つだった（複数ではなかった）際にもセミコロンを記述していたのでしょうか？
h1{color:blue;}
※colorプロパティしか記述していないにもかかわらず区切りのセミコロンがある
実はこの場合（区切りが必要ない場合）、厳密にはセミコロンは記述しなくとも問題ありません。
つまり、この区切りのセミコロンは『区切りが必要ない状況では、あっても無くてもどちらでもよい』ということになります。
h1{color:blue}
※区切る必要がないのであればセミコロンは無くてもよい
しかし、2つ目のプロパティを記述する際には結局のところ必ずセミコロンで区切らなければなりませんので、それを見越して予めここにセミコロンを付けておくのが無難です。
この『セミコロンの記述忘れ』が頻発しやすく、それが原因でページが正しく表示されない状況に見舞われます。
区切りが必要ない場合はセミコロンはあっても無くてもいい。
だったら『必ずセミコロンを記述する』と自分のルールとして統一しておくほうがミスが少なく済みそうですね。
複数の指定を記述する際には区切りとして半角セミコロンが必要
指定が1つだけ、であってもセミコロンを記述することは認められている
指定の個数にかかわらず、セミコロンを付けるクセを持っておくとミスが減る
改行を適切に行いコードを見やすくする
それではもう少し実務的な記述の方法を解説しましょう。
まずは下の2つのコードを見比べてみてください。
前者を『3行に改行』したものが後者です。
h1{color:blue;}
h1{
color:blue;
}
私たち作り手から見れば異なる（1行と3行）ように見えるこの2つのコードですが、ブラウザーは『意味的な違いはない』と認識しています。
『1行』と『3行』・・・ぜんぜん違うものですよね？なのに何故なのでしょう？
『コード上の改行』はブラウザには改行として扱われない
実はこの3行のコード、ブラウザーには『1行』に見えているのです。
コードをエディターで開いた際の『人からの見た目』では『改行』されていますが、ブラウザーはそれを無視して、『1行のコード』として認識するのです。
つまりブラウザーからすれば
『1行のコード』も『3行に改行したコード』もどちらも同じ
なわけです。
実際、このように改行しながら記述していくのが制作現場でのセオリーなのですが、それは『作り手が記述しやすいように』『作り手が後で見直しやすいように』しているだけなのです。
1行でダラダラと記述するよりも、3行で『箇条書き』にして記述するほうが『見やすさ』は格段に向上しますので、作り手目線で言えば『優れた記法』ということになります。
コード上の改行は作り手の『読みやすさ』のためのもの
ブラウザーからは改行のない『1行』のコードとして認識される
複数のプロパティを改行して箇条書き形式で記述する
ではこの『改行して記述する』記述が、どのように優れているのか確認してみましょう。
前述のコードをもう一度ご覧ください。
h1{color:blue;width:500px;}
セミコロンの必要性の解説で使用したサンプルです。
セミコロンはプロパティとプロパティを区切るために必要
という解説でしたね。
記法上はこの書き方で何の問題も無いのですが、・・・いかがですか？
少しばかり読みにくくないですか？
読みにくさの原因はズバリ
『1行で書いている』から
です。
このコードを改行をうまく組み込んで読みやすくしてみましょう。
改行はブラウザーでの表示では『改行として扱われない』ので安心してどんどん使えますね。
h1{
color:blue;
width:500px;
}
いかがですか？
1行の時に比べて『何のプロパティが』『どれぐらいの強度（種類）で』設定されているか一目瞭然ですね。
このようにして、ある対象（セレクタ）にそれぞれ複数のプロパティを設定しながら何十行にも何百行にも及ぶコードを記述していくのです。
h1{
color:blue;
width:500px;
}
p{
color:red;
width:750px;
}
・
・
・
・
・
行頭のインデントでさらに読みやすく
さらにもう1段階『手間』をかけることで、よりいっそうコードが読みやすくなります。
プロパティの行ごとに『インデント』を挿入する手法です。
文字入力ソフトによる入力時や文字のレイアウトを『見せる』際に、任意の行の頭に挿入する空白のこと。
『読みやすさ』を向上させるために用いる。
『タブ』や『スペース』を適宜挿入し文字の開始位置を『ずらす』こと、またその状態を指す。
『スペース』には『全角』と『半角』が存在するので『全角』の使用が認められるかどうかによって使い分ける必要がある
※コーディングにおいては『属性やプロパティの値』を除き全角文字は一切使用できない。
『タブ』でも『スペース』でもどちらでも構わないとは言うものの、『全角スペース』をうっかり挿入してしまうリスクを考えるとコーディングでは『タブ』のほうが無難ですね
上記のコードにインデントを適用してみます。
h1{
color:blue;
width:500px;
}
p{
color:red;
width:750px;
}
※インデントは『タブ』か『スペース』で挿入するが、『スペース』を使う場合は『全角スペース』を挿入しないよう注意が必要
セレクタの行と閉じカッコの行はそのままですが、それ以外の行（プロパティを指定している行）を少し右に『ずらして』揃えています。
※ずらす量は一定させてください。
この量が行ごとに違っていると、それはそれでまた読みづらくなります。
インデントする前は全て左端揃えでしたので、セレクタが『埋もれて』しまっていました。
しかしこのように記述することでコードの左端にはセレクタだけが残った状態になり、目的のセレクタを見つけることが容易になります。
今回はCSSの記法とその効率的かつ実務的な記述のしかたについて解説しました。
作り手によって少しづつ好みは異なりますが、『改行やインデント』などは概ね一致する手法です。
『自分以外の誰かがコードを編集することは無い』と言い切れるのであれば自己流の書き方でいいとは思いますが、誰か『他の作り手とコードを共有する』場合はそのコードに『万人が理解できる読みやすさ』が必要となります。
まずは一般的な書き方を参考にして記述を重ねてみてください。
最後までお読みくださりありがとうございました。
おつかれさまでした。
