この記事では、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: ミサキさん
問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)
コメント
[…] […]