1分で読める超初心者向け【CSS】の書き方と覚え方

はじめに

以下は一般的なCSSの書き方です。pタグのテキストカラーを赤色にしています。

p {
　color: red;
}

上記を詳細に説明すると以下になります。

セレクタ（p） {
　プロパティ（color）: 値（red）;
}

しかし（筆者しかり）超初心者の方には セレクタやプロパティ、値なんて言われても「？」 でしかありません。

ですから上記は以下のように嚙み砕いて覚えておくと理解が進みます。

どこの {
　何を: どうしたいのか;
}

冒頭のコードと照らし合わせると、

• pタグの
• テキストカラーを
• 赤色にしたい
  ということになります。

どこの、何を、どうしたいのかというイメージさえ持っていれば、やたらと長いプロパティ名や複雑な（計算処理などされている）値が出てきても理解しやすくなるはずです。

1分以上経ってしまいましたか？

1分以上経っていたらタイトル詐欺ですみません。

今回、超初心者向けと銘打ったタイトルなので一般的なCSSの書き方に留めています。
CSSには他にも、scssやカスタムプロパティといった書き方及び独自の仕様、BootstrapやTailwind CSSといったライブラリも多くあります。
それらを学ぶ上でも基礎は重要かと思いますのでこの記事を書きました。

「CSSの書き方で混乱する時がある」というような昔の筆者のような方に役立つ記事になっていれば幸いです。
ここまで読んでいただき、ありがとうございます。