この記事では、CSSの基本的な書き方と少なくとも知っておきたいCSSの用語を説明します。
先に簡単に説明します。
CSSでは、見た目を変えたいHTML要素を
セレクタで指定し、要素のどの見た目をどう変えるのかを、プロパティと値で指定します。
CSSを扱う上で少なくとも知っておきたい用語は、セレクタ、プロパティ、値、クラス、idですね。
私はフロントエンドエンジニアとして、ウェブサイト作成に5年ほど携わっていました。
その経験をもとに、あまり細かいことは言わずにざっくりと説明します。
## CSSの基本的な書き方
例えば、見出しに使うh2要素の文字の色を赤くしたいときは、以下のようにCSSファイル（例えば、WordPressテーマのstyle.cssなど）に記載します。
h2 { color: red; }
このようにCSSでは、見た目を変えたいHTML要素をセレクタ(この場合は「h2」)で指定し、要素のどの見た目をどう変えるのかを、プロパティ(この場合は「color」)と値(この場合は「red」)で指定します。
値の後ろのセミコロン(;)は忘れがちなので、注意して下さい。
## 知っておきたいCSSの用語
知っておきたいCSSの用語は、上述したセレクタ、プロパティ、値に加え、クラスとidがあります。
一覧を示します。
最低限、これらの知識は抑えておきましょう！
CSSについて調べるときに必ず役立ちます。
|用語
|説明
|セレクタ
|見た目を変えたいHTML要素を指定する
|プロパティ
|どの見た目を変えるのかを指定する
|値
|見た目をどう変えるのかを指定する
|クラス
|HTML要素の属性。同じクラスの要素は、1ページに複数あっても良い。
|id
|HTML要素の属性。同じidの要素は、1ページには1つだけ。
クラスとidは、HTML要素に付けられた「名前」のようなものと考えれば良いかなと。
違いは、Webページ内に同じクラスの要素は複数あっても良いのに対し、同じidの要素は1つしかない点ですね。
簡単な編集のみなら、これ以上クラスとidの違いについて深堀りする必要はないと思います。
必要になったら勉強する感じで良いかなと。
## おわりに
本当にざっくりとですが、CSSの基本的な書き方と知っておきたい用語について説明しました。
今回説明した内容をもとに、色々調べて知識を増やしていって下さい。
では。
—
YouTube: ミサキさん
問い合わせ先
Twitter: 