CSSで色をつけよう

このレッスンでは、CSSで文字色や背景色をつける基本の書き方を学び、HTMLとCSSの役割の違いを理解することを目標にします。「CSS color 使い方」「CSS 基本 書き方」で調べている方向けです。

CSSはセレクタ { プロパティ: 値; }の形で書きます。「どの要素に(セレクタ)」「何を(プロパティ)」「どうするか(値)」をセットで指定するイメージです。colorは文字色、backgroundは背景色を指定します。HTMLが文章の構造を作る「骨組み」だとすれば、CSSはそこに色や余白をつける「見た目の装飾」を担当しています。

サンプルコードでは、<style>タグの中にh1 { color: #ff6fd8; }とp { background: #f0f0ff; padding: 10px; }という2つのルールを書き、見出しの文字色と段落の背景色をそれぞれ指定しています。色は#ff6fd8のような16進数のほか、redのような名前でも指定できます。

初心者がよくつまずくのが、セレクタと中カッコの間のスペースや、プロパティと値の間のコロン:、行末のセミコロン;を書き忘れることです。CSSは構文が少しでも間違っていると、そのルールだけ無視されて何も反映されなくなるため、1つずつ丁寧に確認する習慣が大切です。

実際のWeb制作では、HTMLで構造を作り、CSSで見た目を整えるという役割分担が基本です。この2つを分けて考えられるようになると、デザインの変更やメンテナンスもぐっとしやすくなります。