【完全保存版】CSSの書き方を初心者向けに徹底解説｜基本構文・指定方法・正しい使い分けまで網羅

CSSを学び始めたとき、
「CSSってどうやって書くの？」
「どこに書けばいいの？」
と疑問に感じる方は非常に多いです。

この記事では、「css 書き方」で検索した初心者の方に向けて、
CSSの基本的な書き方から、正しい指定方法、実務での使い分けまでを
基礎から順番にわかりやすく解説します。

CSSの書き方とは何か

CSSの書き方とは、
HTMLで作られた要素に対して、見た目や配置を指定するルールを書くことです。

CSSでは次のようなことを指定できます。

文字の色・大きさ
背景色・背景画像
余白（margin・padding）
配置やレイアウト

HTMLが「構造」、CSSが「デザイン」を担当します。

CSSの基本構文

CSSは、次の形で記述します。

p {
  color: red;
}

基本構文の意味

p：セレクタ（どの要素に適用するか）
color：プロパティ（何を変更するか）
red：値（どう変更するか）

この
セレクタ・プロパティ・値
の3点を理解することが、CSSの書き方の基本です。

CSSはどこに書くのか

CSSを書く場所は、大きく分けて3種類あります。

外部CSSの書き方（最もおすすめ）

HTMLファイルとは別に、CSSファイルを用意します。

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

p {
  color: blue;
}

特徴

管理しやすい
複数ページで使い回せる
実務ではほぼこの方法

初心者の方は、外部CSSを基本として覚えるのがおすすめです。

内部CSSの書き方

HTMLファイル内に直接CSSを書く方法です。

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

特徴

1ページだけの装飾に向いている
ページが増えると管理しづらい

インラインCSSの書き方（非推奨）

HTMLタグに直接CSSを書く方法です。

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

注意点

管理が難しくなる
修正に手間がかかる

基本的には使わず、
外部CSSでまとめて管理するのが正解です。

よく使うCSSセレクタの書き方

CSSでは、セレクタを使って対象を指定します。

タグセレクタ

p {
  font-size: 16px;
}

指定したタグすべてに適用されます。

クラスセレクタ

.text {
  color: red;
}

<p class="text">文章</p>

.（ドット）を付ける
最もよく使われる指定方法

IDセレクタ

#main {
  background-color: #f5f5f5;
}

<div id="main"></div>

# を付ける
1ページに1回だけ使用するのが基本

CSSの書き方でよく使うプロパティ例

初心者が最初に覚えるべきプロパティです。

p {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

よく使うプロパティ

color：文字色
font-size：文字サイズ
background-color：背景色
margin：外側の余白
padding：内側の余白

CSSを書くときの基本ルール

インデントを揃える

.box {
  width: 300px;
  padding: 20px;
}

読みやすさが大きく変わります。

セミコロンを忘れない

color: red;

プロパティの最後には必ず ; を付けましょう。

CSSの書き方でよくあるミス

CSSが反映されない

CSSファイルの読み込み忘れ
クラス名の打ち間違い
キャッシュの影響

セレクタの指定ミス

.text {

<p class="txt">文章</p>

クラス名が一致していないと反映されません。

HTMLとCSSの正しい関係

HTMLとCSSは、役割を分けて考えることが大切です。

HTML：構造・意味
CSS：見た目・デザイン

HTMLに装飾を書きすぎないことが、
きれいで管理しやすいコードにつながります。

CSSの書き方を学ぶメリット

CSSの書き方を理解すると、次のようなことができるようになります。

Webページを自由にデザインできる
レスポンシブ対応ができる
Web制作の理解が深まる
SEOやユーザー体験の向上につながる

まとめ

CSSの書き方は、Web制作の基礎となる重要な知識です。

CSSはデザインを指定する言語
基本構文は「セレクタ・プロパティ・値」
外部CSSを基本に使う
正しい書き方が保守性を高める

「css 書き方」で検索した方は、
まず 基本構文と指定方法をしっかり理解すること から始めてみてください。
CSSの基礎を身につけることで、Web制作の幅が大きく広がります。

【完全保存版】CSSの書き方を初心者向けに徹底解説｜基本構文・指定方法・正しい使い分けまで網羅