前の記事では、HTMLを使って「Webサイトの骨組み」を作る方法を解説しました。
しかし、HTMLだけでは白背景に黒文字が並ぶだけの、少し寂しい見た目になってしまいます。

そこで登場するのがCSS（シーエスエス）です。CSSを使えば、文字に色をつけたり、大きさを変えたり、おしゃれなデザインに仕上げることができます。今回は、CSSの最も基本的な書き方をご紹介します！

1. CSSの基本ルール「誰に・何を・どうする」

CSSを書くときは、以下の3つの要素をセットにして記述します。

• セレクタ（誰に）： どのHTMLタグを装飾するか（例：h1、p）
• プロパティ（何を）： 何を変えるか（例：色、文字サイズ）
• 値（どうする）： 具体的にどう変えるか（例：赤にする、20pxにする）

具体的な書き方の例：
h1 { color: blue; }
（意味：h1の見出しを、青色にする）

2. 最初におさえたい「基本の装飾」3選

Web制作の現場で、まず最初に行う基本的な装飾を3つピックアップしました。

① 文字の色を変える：color

文字の色を指定します。redやblueといった色の名前のほか、#ff0000（カラーコード）という形式で細かく指定することもできます。

② 文字の大きさを変える：font-size

文字のサイズを指定します。一般的にはpx（ピクセル）という単位を使って、16pxや24pxのように記述します。

③ 文字を太くする：font-weight

特定の文字を強調したいときに使います。値をboldにすると、太字になります。

3. 実際に書いてみよう（サンプルコード）

HTMLとCSSを組み合わせると、以下のような記述になります。これを書くだけで、サイトの印象はガラリと変わります。

/* CSSの記述例 */
h1 {
  color: #333333; /* 文字色を濃いグレーに */
  font-size: 32px; /* 見出しを大きく */
}

p {
  color: #666666; /* 文章の色を少し薄く */
  font-size: 16px; /* 読みやすいサイズに */
}

strong {
  color: red; /* 強調したい文字を赤く */
}

4. 現場のプロが教える「CSSの注意点」

CSSを書き始めるときに、初心者がやりがちなミスを防ぐポイントです。

• セミコロン「;」を忘れずに： 指定の終わりには必ずセミコロンをつけましょう。これがないと、次の命令が効かなくなってしまいます。
• 半角で書く： { } や : などの記号もすべて「半角」で書く必要があります。全角が混じるとエラーになります。

まとめ：デザインができると楽しくなる！

今回はCSSの基本中の基本、文字の装飾について解説しました。
HTMLで「構造」を作り、CSSで「デザイン」を整える。この連携がWeb制作の醍醐味です。

次回は、いよいよこれらを一括で管理できる**「WordPress」**について、なぜ使われるのか、どんなメリットがあるのかを深掘りしていきます！

Gainet.bizでは、未経験からでもWeb制作の現場感覚が身につく情報を発信しています。
「ここをもっと詳しく知りたい！」というリクエストがあれば、ぜひ教えてください。

ハヤタク

株式会社ガイネット代表取締役　趣味は神社仏閣巡り　初めてホームページを作ったのは20年以上前。そこから2社ほどで修行し33歳でフリーランスに、色々あって今さら法人設立。WEBとデザインの何でも屋であり書家でありYouTuberです。