cssの書き方のルール
それではcssの基本的な書き方を覚えていきましょう。htmlよりは少しだけ覚えることが多いので、細かく区切って丁寧に解説していきます。記事の後半に実際に記事上で書いて練習できるのでそのステップにいくまでに基本を押さえましょう！
cssを書くときは「セレクタ = どこの？」「プロパティ = 何を？」「値 = どのように？」変えるかの3つの要素をそれぞれ記述します。
- セレクタの後ろの
{ }（波かっこ） - プロパティの後ろに
:（コロン） - 値の後ろに
;（セミコロン）
という記号の種類と書く位置もイラストのルールで決まっているので間違えないよう覚えましょう。
左が実際のcssの記述例です。
- セレクタの部分がpタグ
- プロパティはcolor（文字の色）
- 値はred（赤色）
となっているので「pタグの中の文字の色を赤色にする」という意味の記述になります。
続いて3つの要素を詳しく解説していきます。
セレクタの説明
セククタ（selector）とは「どの要素を？」の部分でしたね。ではhtmlの要素というものがどこを指しているのか一度復習します。下のイラストを見てみましょう。
このように特定のタグで囲まれた範囲のことをひとまとめにして〇〇要素と呼びます。たとえばbodyタグの中に書かれている「h1」「div」「img」「p」はすべてbody要素です。
さらにいえば、divの入れ子である「img」「p」は「body要素でもあり、div要素でもある」と言えます。
cssのセレクタにはこの「要素」を指定することで「どの範囲までそのスタイルを適用させたいか？」を書きます。
body{
color : red;
}
見出し
テキスト
例えば、イラストの例のコードの中でh1とpの文字の色を赤色に変えたいとします。
h1とpはどちらもbody要素に該当するのでbodyをセレクタに指定してあげればどちらの文字も赤色に変わります。
idとclassをセレクタに指定する
特定の要素にだけスタイルを適用したいときはどうすればいいのでしょうか？そんな時にはid属性やclass属性を使用します。次の例をみて確認してみましょう。
左のイラストのコードのように上から1番目と2番目のpだけ文字を赤色にしたいとします。
その時セレクタは何を指定すればいいのでしょう？
「div」でしょうか？「p」でしょうか？…どちらも不正解です。なぜならどちらも3番目のpも含む指定になってしまっているからです。
それではすべての文字が赤色に変わってしまいます。
そこでid/class属性を使います。今回はスタイルを適用させたいp要素にだけclass=“red”とつけてみます。
id属性とclass属性のおさらい
- 同じid名はwebページに1つだけ（別名ならOK）
- classは同じclass名がいくつあってもOK
class名をつけたら実際どのようにセレクタに書くのかを見てみましょう。
<div>
<p class="red">赤色にしたい</p>
<p class="red">赤色にしたい</p>
<p>黒色のまま</p>
</div>.red{
color : red;
}
赤色にしたい
赤色にしたい
黒色のまま
cssのコードに注目してください。セレクタの部分に「.red」と書かれていますよね。
idとclassのセレクタの書き方
- class ： .（ドット） + class名
- id名 ： #（シャープ） + id名
というようにそれぞれ書きます。
ブラウザの表示結果も無事class名を指定した要素だけ文字色が赤に変わっていますよね。
idとclassに関する疑問を整理
ここまでで初心者のみなさんがつまずきやすいidとclassについての疑問を解消します。
id名/class名はどうやってつける？
idとclassどっちを使えばいいの？
idとclassについてさらに詳しく理解したい方はこちらの記事も参考にしてください。
プロパティの説明
続いて「何を？」の部分であるプロパティについて解説します。
プロパティ（意味：性質）には要素のどの部分を変更するかを指定します。例えば
- 文字の色なら：
color - 文字の大きさなら：
font-size - 背景画像をなら：
background-image - 枠線なら：
border - 配置なら：
position
と、どの部分を変えたいならどのプロパティを使うのかがあらかじめ決まっています。
こちらのサイトでプロパティ一覧が確認できるので興味があればみてみるといいでしょう。
スタイルシート［CSS］/CSSプロパティ一覧 – TAG index
ただ、事前にプロパティを暗記するのではなく、背景色を変えたかったら「css 背景色」で検索、文字の種類を変えたかったら「css 文字の種類」で検索する、などして都度使えるプロパティを調べていくほうが学習効率が高いです。
このあと実際にいくつかプロパティを書いて練習できます！
値の説明
続いて「どのように？」の部分である値について解説します。
cssの書き方では「プロパティ：値 」というように一行のセットになっていますよね。
これはなぜかというと値はプロパティによって何を書くことができるか決まっているからです。
例を使って具体的に解説していきますね。
実際のtext-align（文字揃え）の表示結果
text-align : leftの文章
text-align : centerの文章
text-align : rightの文章
左のコードは「p要素の文字揃え（text-align）をどうするか」を指定するcssです。
text-alignプロパティでは指定できる値が
- left（左揃え）
- center（真ん中揃え）
- right（右揃え）
のどれかと決まっています。
例が1つだけではわかりにくい方もいるかもしれないのでもう1つ例をだしてみます。
background-colorの値
背景色を変更する「background-color」で指定することのできる値は
- Crimson / skyblue などのカラーネーム
- #efd760 / #2e8b57などのカラーコード
のどちらかです。
プロパティと値の関係についてなんとなく理解できたでしょうか？このあと実際にcssを書いていく中でプロパティと値について理解を深めることができるはずなので現時点では「プロパティによって指定できる値が決まっている」とだけしっかり覚えましょう！
この記事を書いた人
web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。
