CSS運用ルール

2026年3月5日

本サイト（SWELL子テーマ）では、CSSの管理を「読み込み順序」と「記述ルール」を前提に統一します。
制作・運用・保守のどのフェーズでも迷わないことを最優先にします。

CSSの読み込み順序

CSSは大きく分けて、以下の順序で読み込まれます。後に読み込まれるほど優先度が高く、上書きされます。

すべてのページで読み込まれるCSS

親テーマ（SWELL）のCSS
子テーマの style.css
共通CSS（assets/css/common/）
- reset.css → styles.css → pc.css → tablet.css → smart.css

フロントページ・固定ページのみ読み込まれるCSS

ページ種別CSS（assets/css/page/）
- styles.css → pc.css → tablet.css → smart.css

投稿・アーカイブページ

ページ種別CSS（assets/css/page/）は読み込まれません
共通CSS（assets/css/common/）のみでスタイルを制御します
最終調整は管理画面の追加CSSです。

最終的に読み込まれるCSS（最優先）

WordPress管理画面の「追加CSS」

最も後に読み込まれるため、最優先で上書き可能です
主に「ヘッダー・フッター・記事内の軽微なパーツ調整」に使用します

CSSディレクトリ構成

swell_child/
├── style.css              # テーマスタイルシート
├── assets/
│   ├── css/
│   │   ├── common/
│   │   │   ├── reset.css     # リセットCSS
│   │   │   ├── styles.css    # 共通スタイル（基準）
│   │   │   ├── pc.css        # PC用レスポンシブ
│   │   │   ├── tablet.css    # タブレット用レスポンシブ
│   │   │   └── smart.css     # スマートフォン用レスポンシブ
│   │   └── page/
│   │       ├── styles.css    # ページ固有スタイル（基準）
│   │       ├── pc.css        # PC用レスポンシブ
│   │       ├── tablet.css    # タブレット用レスポンシブ
│   │       └── smart.css     # スマートフォン用レスポンシブ
│   └── images/              # 画像アセット

追加CSSに書くもの（管理画面）

以下は、WordPress管理画面の「追加CSS」に書いてOKです。

設定場所
外観 → カスタマイズ → 追加CSS

ヘッダーのカスタマイズ

ヘッダーのレイアウト調整
ヘッダーメニューのスタイル
ヘッダー内CTAボタンのスタイル

フッターのカスタマイズ

フッターのレイアウト調整
フッターメニューのスタイル
フッター内のコンテンツスタイル

記事で使うパーツ

記事内で使用するカスタムパーツのスタイル
記事固有の軽微なレイアウト調整

assets/css に書くもの（テーマ管理）

追加CSS以外のスタイルはすべて assets/css/ で管理します。

共通スタイル（assets/css/common/）

全ページに影響する基盤CSS
共通コンポーネント
テンプレートで使う主要レイアウト

ページ固有スタイル（assets/css/page/）

フロントページ・固定ページなど、特定ページ種別のみで必要なCSS
特定テンプレートに依存するCSS

CSSファイル単位の読み込み順（共通CSS）

共通CSSは以下の順で読み込まれます。

reset.css
styles.css
pc.css
tablet.css
smart.css

reset.css はブラウザ差分をならすためのリセット用CSSです。
制作は、次に読み込まれる styles.css（基準スタイル）からスタートしてください。

記述の基本方針（最短表現ルール）

後ろのファイルほど優先されるため、次のルールを必ず守ります。

どのデバイスでも共通で効くスタイルは 先頭（styles.css）に書く
デバイスごとの差分だけを、後ろのファイル（pc / tablet / smart）に書く
後ろのファイルに共通スタイルを書くと、CSSが散らかり保守性が落ちるため避ける

最短表現ルールの例

間違っている記述例

どのデバイスでも必要な記述（flex-wrap: wrap;）を末端の smart.css に書いてしまっている例です。

/* styles.css */
.about-01-container{
    display:flex;
}/* smart.css */
.about-01-container{
    flex-wrap:wrap;
    margin:5px;
}

正しい記述例

どのデバイスでも必要な記述（flex-wrap: wrap;）を styles.css にまとめ、smart.css は差分のみ。

/* styles.css */
.about-01-container{
    display:flex;
    flex-wrap:wrap;
}/* smart.css */
.about-01-container{
    margin:5px;
}

IDの使用ルール

CSSコーディングは 原則として class を使用します。

id は基本使わない
id を使ってよいのは「idである必要があるケースのみ」

id を使用してよい例

アンカーリンク
JavaScriptでid参照が必要な場合（やむを得ない場合）

複数指定の改行ルール

複数セレクタをカンマで連結する場合、カンマの後で改行して見やすくします。

悪い例

#top .top-09 h2::before, #top .top-12 h2::before{
    font-size:2.0rem;
}

良い例

#top .top-09 h2::before,
#top .top-12 h2::before{
    font-size:2.0rem;
}

一括指定のルール（CSSの並び順）

CSSは HTML内に出てくる順序で記述します。
冗長になっても「他の人が迷わない」ことを優先します。

悪い例（順序がばらばら）

.top-03 h2,
.top-04 h2,
.top-05 h2,
.top-06 h2,
.top-07 h2,
.top-03 p {
    text-align: center;
}
 
.top-04 h2,
.top-06 h2,
.top-04 ul li a span {
    color: #fff;
}

良い例（HTML順に揃える）

.top-03 h2{
    text-align: center;
}
.top-03 p {
    text-align: center;    
}
 
.top-04 h2{
    text-align: center;
    color:#fff;
}
.top-04 ul li a span {
    color: #fff;
}
 
.top-05 h2{
    text-align: center;    
}
 
.top-06 h2{
    text-align:center;
    color: #fff;
}
 
.top-07 h2{
    text-align: center;    
}

width / height 指定に関する注意（レスポンシブ崩れ防止）

画像や要素に width や height を固定値で指定すると、レスポンシブ対応で崩れやすくなります。
そのため本サイトでは 固定値の width / height 指定は原則避ける方針とします。

基本ルール

原則、親要素に収める（max-width 等）前提で組む
画像は基本 height: auto;（縦横比を保持）
どうしても固定が必要なら、ブレークポイントごとに差分調整する

例外（指定してよいケース）

アイコンなど固定表示が前提の小要素
レイアウト上どうしても固定サイズが必要なコンポーネント
iframe等で比率固定のラッパーを用意して管理するケース

レスポンシブブレークポイント

基本のブレークポイントは以下です。

PC：1400px以上
PC（中）：1399px以下、1025px以上
タブレット：1024px以下、601px以上
スマートフォン：600px以下

※サイトのデザインによって変更しても問題ありません。

運用ルールまとめ

CSSは 読み込み順序を前提に上書き設計で書く
共通スタイルは styles.css に寄せて最短表現にする
差分だけを pc / tablet / smart に書く
セレクタは classが基本、idは例外のみ
複数指定は カンマ後で改行
CSSの並びは HTMLの登場順に揃える
追加CSSは **最終上書き用（ヘッダー・フッター・軽微調整）**として使う
固定値の width / height は レスポンシブ崩れの原因になりやすいので原則避ける

URLをコピーしました！