「HTMLはなんとなく分かってきた。でもCSSって、何をするもの？」——この記事は、HTMLの記事を読んだ方の次の一歩です。読み終わる頃には、CSSの役割と書き方の基本が分かり、ふだん見ているWebサイトの「色や配置は誰が決めているのか」が見えるようになります。

先に結論から。CSSとは、HTMLで作った骨組みに色・大きさ・配置といった「見た目」をつける言語です。HTMLが「何があるか」を決め、CSSが「どう見せるか」を決める。この二人一組で、1つのWebページができています。

HTMLが体なら、CSSは服

同じ人でも、スーツを着れば誠実に見え、明るい色の服なら親しみやすく見えます。中身は同じでも、装いで印象は大きく変わる——WebページのCSSも同じです。骨組み（HTML）が同じでも、CSSを替えるだけで、固い会社案内にも、やわらかいカフェのサイトにも見せられます。

実際、世界には「同じHTMLにCSSだけを差し替えて、まったく違うデザインを見せる」デモサイトがあるほどです。見た目の情報を骨組みから切り離す——これがCSSという発明の核心です。

CSSの1行は「どこに・何を・どうする」

CSSの書き方も、1パターンだけ覚えれば十分です。たとえば p { color: blue; } という1行。日本語に訳すと「段落（p）の、文字色（color）を、青（blue）にする」。どこに・何を・どうするの3つを並べているだけで、文章の組み立てとほとんど同じです。

color の部分を font-size（文字の大きさ）に替えれば大きさが、background（背景）に替えれば背景色が変わります。単語を入れ替えながら、少しずつ手札を増やしていく——英単語を覚える感覚に近い学び方です。

CSSでできることは、大きく3つ

できること	例	書き方の例
色をつける	文字色・背景色・ボタンの色	color: blue;
大きさを変える	文字サイズ・画像の幅・余白	font-size: 16px;
配置する	中央寄せ・横並び・間隔の調整	text-align: center;

この3つの組み合わせだけで、Webデザインの大部分は説明できます。アニメーションのような高度な表現もCSSの仕事ですが、それは応用編。まず「色・大きさ・配置」の3つを動かせれば、ページの印象は自分の手で変えられます。

なぜ骨組みと見た目を分けるのか

理由は、直すときに強いからです。見た目の指定がCSSに1か所にまとまっていれば、そこを1行直すだけで、全ページに変更が届きます。もし各ページに直接書き込んでいたら、100ページあれば100回同じ修正をすることになります。

CCの制作現場で、実際にあった話

私たちCCコミュニケーションズのWordPress制作の現場では、納品前に依頼主から「ボタンの色、全部コーポレートカラーに合わせられますか？」というご要望をいただくことがあります。サイト全体でボタンは何十個。それでも、色の指定がCSSにまとまっていれば、修正は数行、その日のうちにお返しできます。

逆に、ページごとにバラバラに色が書き込まれたサイトを引き継いだときは、探して直すだけで丸1日かかりました。整ったCSSは自己満足ではなく、「明日の修正依頼に早く応えられる」という依頼主への約束——私たちはそう考えて書いています。

見た目の先には、読む人がいる

文字色を薄いグレーにすると、たしかに上品に見えます。でも、屋外のスマホ画面や、年配の訪問者の目には読みづらいことがあります。CSSで決める色・大きさ・行間は、かっこよさのためだけではなく、画面の向こうの人がストレスなく読めるかどうかを決めるものです。デザインの主役は作り手ではなく、読む人。CSSはそのための道具です。

今日からできる、たった1つのこと

まとめ

CSSは、骨組みに色・大きさ・配置という「見た目」を着せる言語。書き方は「どこに・何を・どうする」の1パターンで、分けて書くから修正に強く、その速さは依頼主への信頼につながります。私たちCCコミュニケーションズは、HTMLとCSSを二人一組で学びながら、お客様のサイトを整える実務まで踏み出せる環境で、仲間を探しています。