【初心者向け】CSS編集の基礎:基本的な書き方と用語 | WordPress

この記事では、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ページに複数あっても良い。
idHTML要素の属性。同じidの要素は、1ページには1つだけ。

クラスとidは、HTML要素に付けられた「名前」のようなものと考えれば良いかなと。
違いは、Webページ内に同じクラスの要素は複数あっても良いのに対し、同じidの要素は1つしかない点ですね。
簡単な編集のみなら、これ以上クラスとidの違いについて深堀りする必要はないと思います。
必要になったら勉強する感じで良いかなと。

おわりに

本当にざっくりとですが、CSSの基本的な書き方と知っておきたい用語について説明しました。
今回説明した内容をもとに、色々調べて知識を増やしていって下さい。
では。


YouTube: ミサキさん

問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)

コメント

  1. […] […]

タイトルとURLをコピーしました