HTMLを学習すると、必ず出てくるCSS。このCSSとは何なのか？具体的にどのようなことができるのか？これを詳しく説明します。
HTMLで「文章の骨組み」を作っただけでは、Webサイトは白黒の地味な画面のままです。
それを色鮮やかに、そして使いやすく整えてくれるのが「CSS（シーエスエス）」です。
「デザインなんてセンスがないと無理……」と思うかもしれませんが、CSSの役割はとてもシンプル。HTMLという土台に対して「ここを赤くして」「ここを真ん中に置いて」と指示を出すだけです。この記事では、Webデザインの魔法とも言えるCSSの正体について解説します。
CSSの正体は「Webページの装飾」
正式名称は、Cascading Style Sheets（カスケーディング・スタイル・シート）。略して「CSS」。
CSSは、作成したHTMLに装飾を加えてくれるものです。文字の色を変えるなど、見た目のスタイルを指定するための言語で、スタイルシート言語に分類されます。
- 見た目の変化
文字の色、大きさ、フォントの種類から、背景の色や画像まで、視覚的な要素をすべて担当します。 - レイアウトの調整
文章を横に並べたり、余白を空けたりして、読みやすい配置（デザイン）を作ります。
CSSで「できること」の具体例
CSSを使えば、同じHTML（文章）でも、全く違う印象のWebサイトに変えることができます。
- 文字の装飾
タイトルを大きく太くする、色をつけて目立たせる、行の間隔を広げて読みやすくする。 - 色の設定
ページ全体の背景色を変える、ボタンにグラデーションをつける。 - 配置の指定
写真を右側に寄せる、メニューを横一列に並べる、コンテンツを中央に配置する。 - レスポンシブ対応
パソコンで見るときと、スマホで見るときで、画面のレイアウトを自動で切り替える。
【重要】HTMLとCSS、なぜ分かれているの？
「HTMLの中にデザインも書けばいいのでは？」と思うかもしれませんが、分けて管理することには大きなメリットがあります。
- 修正が劇的に楽になる
例えば、サイト全体の「見出しの色」を変えたいとき、100ページあってもCSSファイルを1箇所直すだけで、全ページが一瞬で書き換わります。 - 役割分担でスッキリ
「中身（HTML）」と「見た目（CSS）」を分けることで、設計図が整理され、ミスが減り、Googleなどの検索エンジンからも理解されやすい「質の高いサイト」になります。
最初に覚えたい「CSSを支える3つの言葉」
CSSがどのような仕組みで指示を出しているのか、基本の形を知っておきましょう。
CSSの基本形
セレクタ { プロパティ : 値; }
CSSの基本的な形です。それぞれの説明は下記のとおりです。CSSでは「どこの」「何を」「どうする」かをこの形で記述します。
セレクタ（どこの）
スタイルを適用したい場所を指定します（例：「見出し全体」「このボタンだけ」など）。
プロパティ（何を）
何を変えたいのかを指定します（例：「色」「文字の大きさ」「余白」など）。
値（どうする）
具体的にどう変えるかを指定します（例：「赤にする」「20ピクセルにする」など）。 この3つが揃って、初めて「見出しを赤くする」という指示が完成します。
例）p要素の文字の色を赤色にする
p { color : red; }
pが「セレクタ」で、colorが「プロパティ」、「red」が値となります。
CSSを学ぶと何が変わる？
HTMLだけの「情報の塊」を、人に読んでもらえる「魅力的なコンテンツ」に変える力が身につきます。自分の思い通りの色や配置にできた時の感動は、Web制作を学ぶ上での一番の醍醐味です。HTMLの基礎を理解したら、次はCSSで自分の世界観を表現してみましょう。
まとめ
CSSは、Webサイトに「個性」と「使いやすさ」を与えるツールです。
難しく考える必要はありません。「骨組み（HTML）に服を着せる（CSS）」という感覚で、少しずつ見た目を変えていく楽しみを味わってみてください。
これを知るだけで、Web制作の可能性は一気に広がりますよ。
