CSSとは？初心者向けにわかりやすく解説

CSS
2026.09.11

Webサイトを「見やすく」「美しく」整えるために欠かせないのが CSS（シーエスエス）。 HTMLだけでは文章の構造を作ることはできますが、デザインを整えることはできません。 この記事では、CSSの基本をやさしく解説します。

CSSとは何か

CSSとは Cascading Style Sheets（カスケーディング・スタイル・シート） の略で、 Webページの見た目（デザイン）を指定するための言語です。

CSSを使うと、次のようなことができます。

  • 文字の色や大きさを変える
  • 余白を調整する
  • 背景色をつける
  • レイアウトを整える
  • ボタンやメニューをデザインする

HTMLが「骨組み」なら、CSSは「服やメイク」のような役割です。

CSSでできること

文字や色の変更

CSSを使えば、文字の色・サイズ・太さなどを自由に変更できます。

p {
  color: blue;
  font-size: 16px;
}

レイアウトの調整

要素の位置を左右に並べたり、中央に配置したりできます。

  • display: flex;
  • margin（外側の余白）
  • padding（内側の余白）

背景や枠線の設定

背景色や背景画像、枠線の太さや色も指定できます。

CSSの書き方の基本

CSSは次のような構造で書きます。

セレクタ {
  プロパティ: 値;
}

セレクタとは？

「どのHTML要素にスタイルを適用するか」を指定する部分です。

  • p → 段落
  • .class-name → クラス名
  • #id-name → ID名

プロパティとは？

「何を変更するか」を指定します。

  • color（文字色）
  • font-size（文字サイズ）
  • background-color（背景色）

値とは？

プロパティに設定する具体的な内容です。

  • red
  • 20px
  • #333

CSSの適用方法

CSSをHTMLに適用する方法は主に3つあります。

1.外部ファイルとして読み込む（推奨）

もっとも一般的で、管理しやすい方法です。

<link rel="stylesheet" href="style.css">

2. <style> タグに直接書く

<style>
  p { color: red; }
</style>

HTMLタグに直接書く（非推奨）

小規模ならOKですが、管理が難しくなるため基本は避けます。

<p style="color: red;">文字</p>

よく使うCSSプロパティ一覧

プロパティ内容
color文字色
font-size文字サイズ
margin外側の余白
padding内側の余白
background-color背景色
border枠線
width / height幅・高さ

まずはこのあたりを覚えると、簡単なデザインができるようになります。

HTMLとCSSの関係

HTMLとCSSはセットで使うことで、はじめて「見やすいWebページ」が完成します。

  • HTML → ページの構造を作る
  • CSS → 見た目を整える

この2つを理解すると、Web制作の基礎がしっかり身につきます。

まとめ

CSSはCSSはWebページの「デザイン」を担当する言語です。「セレクタ」「プロパティ」「値」という3つの要素で構成されており、HTMLと組み合わせることで美しく整ったページを作ることができます。
まずは文字色やサイズの変更など、簡単なスタイル調整から始めることで、CSSの楽しさを実感できるようになります。