WebサイトのCSSは外部ファイルへ書き、HTMLのlink要素またはWordPressのenqueue機能で読み込むのが基本です。style要素は1ページだけの試作、style属性は動的な値といった限定用途に絞ると管理しやすくなります。
情報確認日：2026年7月27日
結論：まず押さえるポイント
この記事の結論
- 基本構文は「セレクター { プロパティ: 値; }」
- 本番サイトは外部CSSを基本にする
- 上書きできないときは読み込み順・詳細度・継承を確認する
- WordPressではwp_enqueue_styleで読み込む
CSSの書き方と読み込み方法の基本
セレクターは「どの要素に」、プロパティは「何を」、値は「どうするか」を指定します。複数の宣言はセミコロンで区切ります。
.card-title { color: #1f2937; font-size: 1.25rem; }クラス名は見た目の色ではなく、役割が分かる名前にします。.red-textより.error-messageの方がデザイン変更に耐えます。
最小の実装例
HTML
<link rel="stylesheet" href="/assets/css/site.css">
<article class="card">
<h2 class="card-title">CSSの基本</h2>
<p class="card-text">外部CSSで見た目を指定します。</p>
</article>CSS
.card {
padding: 1.5rem;
border: 1px solid #d1d5db;
border-radius: 0.75rem;
}
.card-title {
margin-block: 0 0.5rem;
}HTMLは内容と構造、CSSは見た目を担当します。ファイルを分けると複数ページで再利用でき、ブラウザキャッシュも効きます。
実務で使うときの考え方
style要素
HTMLのhead内へCSSを書く方法です。1ページだけの試作には使えますが、共通デザインの重複に注意します。
style属性
style="color:red"のように要素へ直接書きます。詳細度が高く上書きしづらいため、通常のデザインには使いません。JavaScriptからCSSカスタムプロパティへ動的な値を渡す用途などに限定します。
CSSが反映されないときの確認順
- 開発者ツールのNetworkでCSSが200で取得できているか
- セレクターが対象要素に一致しているか
- 自分の宣言が別ルールに上書きされ、取り消し線が付いていないか
- メディアクエリの条件内に入っているか
- キャッシュされた古いCSSを見ていないか
よくある失敗と直し方
すぐ!importantを付ける
原因が詳細度か読み込み順か分からなくなります。既存ルールと設計を確認してから最小限に使います。
タグ名だけで全体を上書きする
pやaへの広い指定は管理画面や外部部品へ波及します。コンポーネントの親クラスで範囲を限定します。
深いセレクターを連ねる
HTML構造の小さな変更で壊れます。再利用する単位へクラスを付けます。
WordPressで使う場合
テーマのCSSはfunctions.phpからwp_enqueue_style()で登録します。header.phpへlinkを直書きすると、依存関係、子テーマ、キャッシュ用バージョンを管理しにくくなります。既存テーマの読み込み方へ合わせてください。
よくある質問
CSSはどのファイル名にすればよいですか？
任意ですが、サイト全体はstyle.css、部品別はcomponents.cssなど役割が分かる名前にします。WordPressテーマではstyle.cssにテーマ情報が必要です。
CSSの順番は関係ありますか？
同じ詳細度なら後に読み込まれた宣言が優先されます。ただし継承や!importantなど他の条件もあります。
SCSSとCSSは何が違いますか？
SCSSは変数やネストなどを使える記法で、ブラウザ向けCSSへ変換して使います。まずCSSのカスケードを理解してから導入すると安全です。
まとめ
CSSは外部ファイルを基本にし、役割の分かるクラスへ小さなルールを書きます。反映されないときは読み込み、セレクター、詳細度、条件、キャッシュの順に確認してください。