今さら聞けないCSSの書き方基本まとめ

CSSを扱うことが多くなってきて、使えるようになってきた人でも、まだまだこれからの人でも、重要なのは、やはり基本です。基本がしっかりしていれば、ミスによる時間のロスを防ぐことだけではなく、様々な応用が可能になります。

今回は今さら聞けないCSSの基本について学びましょう。

CSSを書く前に

CSSを書くにあたり、絶対に理解しておきたいのが、CSSで使用する以下の３つの要素についてです。

・セレクタ　どのHTMLタグに適用するかの指定
・プロパティ　どのようなデザイン効果を適用するかの指定
・値　プロパティの数値の指定

どこに、どんな風に、どれくらいデザインの効果を与えるかということを指定していくわけです。

CSSの基本の書き方

基本中の基本になる、実際の記述の仕方を見てみましょう。

これが超基本形になります。この基本形を覚えてしまえば、あとは必要に応じて当てはめていくだけです。

例として、全称セレクタと呼ばれる、すべての要素を指定する「*」をセレクタに当てはめます。

これですべての要素が指定されました。すべての要素の色を赤にしてみます。

プロパティには変更したいデザイン効果は文字色なのでcolorを、色の指定は赤なのでredを入れます。
つまり以下の様な状態です。

そして、1つのセレクタに対して様々なプロパティを指定したいことが多いと思います。

その場合はプロパティの数だけ、上記の基本形を書く必要はありません。セレクタを指定した後は、プロパティを{　}内で複数指定することが可能です。

例えば、「p」というクラス名を付けた要素のフォントサイズを15px、そして色を緑にしたいとします。その場合は、以下のようになります。

上記のように記述します。

これがCSSの基本中の基本形ですので、絶対に覚えておくようにしましょう。

普段CSSを使う場合、１つの要素に対していくつものプロパティを指定していくので、分かり辛くならないように上記の例のように改行をして記述するのが一般的です。後から編集したいときにも、プロパティを見つけやすいです。