CSS命名規則（FLOCSS）

23 min read

CSSの命名で困ったことはありませんか？

「このクラス名、なんて付けよう……」と手が止まった経験はありませんか？

コーディングを始めたばかりの頃は、.red-text や .box1 のような名前をなんとなく付けてしまいがちです。小さなページならそれでも困りませんが、ページ数が増えてくると「このクラス、どこで使っていたっけ？」「名前がかぶってスタイルが崩れた……」といったトラブルが起きてきます。

こうした問題を防ぐために生まれたのが、CSS命名規則です。命名規則とは、クラス名の付け方にルールを設けることで、誰が読んでも意味がわかり、安心して修正できるCSSにするための仕組みです。

今回紹介するのは、Web制作現場で広く使われているFLOCSS（フロックス）という命名規則です。実案件でも使いやすく、最初に覚える命名規則としておすすめできます。

FLOCSSとは？

FLOCSSの名前は次の頭文字から来ています。

  • Foundation（土台）
  • Layout（レイアウト）
  • Object（部品）— Component（共通パーツ）、Project（ページ固有）、Utility（微調整）に分かれる

FLOCSSの考え方はシンプルです。CSSをいくつかの「層（レイヤー）」に分けて管理することで、どのスタイルがどこに書いてあるかを迷わなくする、というものです。

FLOCSSは「どのファイルに何を書くか」のルールです。これを守ることで、チームで作業しても、後から修正しても、CSSが散らかりにくくなります。

BEM（ベム）やSMACSS（スマックス）など他の命名規則もありますが、FLOCSSはそれらの良いところを取り入れつつ、日本の実務に合わせて整理された設計手法です。

FLOCSSの3つのレイヤーを理解しよう

FLOCSSでは、CSSを大きく3つのレイヤーに分けます。これが一番大事な考え方です。

  • Foundation（接頭辞なし）— サイト全体の土台になるスタイル。リセットCSS、ベースのフォント設定など
  • Layout（接頭辞 l-）— ページの大枠の配置。l-header、l-main、l-footer など
  • Object（接頭辞 c- / p- / u-）— ページ内の部品。c-button、p-hero、u-mt20 など

順番に見ていきましょう。

Foundation（土台）

サイト全体に共通する、もっとも基本的なスタイルを置く層です。具体的には、ブラウザごとの表示の差をなくすリセットCSS（ノーマライズ）や、body のフォント指定などが該当します。

Foundation層では要素セレクタ（body、a、img など）に直接スタイルを当てます。クラス名は使いません。

/* Foundation: _base.scss */
body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.8;
  color: #333;
}

a {
  color: #1e90ff;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

Layout（レイアウト）

ヘッダー、メインコンテンツ、サイドバー、フッターなど、ページの大きな枠組みを定義する層です。接頭辞に l- を付けます。

/* Layout */
.l-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.l-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px 60px;
}

.l-footer {
  background: #f5f5f5;
  padding: 40px 20px;
}

Layout層は「このパーツをページのどこに配置するか」を決める役割です。中身のデザイン（色や装飾など）は、次に紹介するObject層で定義します。

Object — Component（共通パーツ）

サイト内のどのページでも使い回せる小さなパーツを定義する層です。接頭辞は c- を付けます。

ボタン、見出し、カード、一覧など、複数のページで同じデザインが使われるものがComponentです。

/* Component */
.c-button {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.c-button--primary {
  background: #1e90ff;
  color: #fff;
}

.c-button--outline {
  background: transparent;
  border: 2px solid #1e90ff;
  color: #1e90ff;
}

ここで出てきた --primary や --outline は、BEM記法のModifier（バリエーション）です。FLOCSSでは、クラス名の中身をBEMのルールで書きます。

BEMのおさらい：Block__Element--Modifier の形で書きます。たとえば c-card__title--large は「カードパーツの中のタイトルで、大きいバリエーション」という意味です。

Object — Project（ページ固有パーツ）

特定のページやセクションでしか使わないパーツを定義する層です。接頭辞は p- を付けます。

トップページのメインビジュアル、お問い合わせフォームのレイアウト、会社概要ページの沿革表示など、そのページ独自のデザインがProjectです。

/* Project */
.p-hero {
  position: relative;
  height: 600px;
  background-size: cover;
  background-position: center;
}

.p-hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.p-hero__subtitle {
  font-size: 1.2rem;
  color: #fff;
  margin-top: 12px;
}

Object — Utility（便利クラス）

余白の調整や非表示など、ちょっとした微調整に使うクラスです。接頭辞は u- を付けます。

/* Utility */
.u-mt0  { margin-top: 0 !important; }
.u-mt10 { margin-top: 10px !important; }
.u-mt20 { margin-top: 20px !important; }
.u-mt40 { margin-top: 40px !important; }

.u-text-center { text-align: center !important; }
.u-hidden { display: none !important; }

Utilityクラスでは !important を付けるのが一般的です。どんな状況でも確実に効かせるための「最後の手段」として使います。ただし、多用しすぎるとCSSが読みにくくなるので、必要最小限にとどめましょう。

実案件で使えるディレクトリ構成の例

FLOCSSを導入すると、SCSSファイルをレイヤーごとにフォルダ分けして管理できます。実際のプロジェクトでは、次のような構成がよく使われます。

scss/
├── foundation/
│   ├── _reset.scss
│   ├── _base.scss
│   └── _variable.scss
├── layout/
│   ├── _header.scss
│   ├── _main.scss
│   ├── _sidebar.scss
│   └── _footer.scss
├── object/
│   ├── component/
│   │   ├── _button.scss
│   │   ├── _card.scss
│   │   ├── _heading.scss
│   │   └── _table.scss
│   ├── project/
│   │   ├── _hero.scss
│   │   ├── _contact.scss
│   │   └── _about.scss
│   └── utility/
│       └── _utility.scss
└── style.scss

style.scss では、これらのファイルを上から順番に読み込みます。

// style.scss

// Foundation
@use "foundation/reset";
@use "foundation/variable";
@use "foundation/base";

// Layout
@use "layout/header";
@use "layout/main";
@use "layout/sidebar";
@use "layout/footer";

// Object - Component
@use "object/component/button";
@use "object/component/card";
@use "object/component/heading";
@use "object/component/table";

// Object - Project
@use "object/project/hero";
@use "object/project/contact";
@use "object/project/about";

// Object - Utility
@use "object/utility/utility";

読み込む順番は Foundation → Layout → Object（Component → Project → Utility）の順です。この順番を守ることで、あとに書いたスタイルが自然に優先される仕組みを活かせます。

実際のコードで見るFLOCSS

ここまでの内容を踏まえて、よくある「カード型の一覧」を例にFLOCSSで書いてみましょう。

HTMLの例

<section class="l-main">
  <h2 class="c-heading">新着情報</h2>
  <div class="p-news">
    <article class="c-card">
      <div class="c-card__image">
        <img src="news01.jpg" alt="記事のサムネイル">
      </div>
      <div class="c-card__body">
        <time class="c-card__date">2026.03.30</time>
        <h3 class="c-card__title">サイトをリニューアルしました</h3>
        <p class="c-card__text">デザインを一新し、より見やすくなりました。</p>
      </div>
    </article>
    <!-- 同じ構造のカードを繰り返す -->
  </div>
</section>

このHTMLを読むだけで、それぞれの役割がわかります。

  • l-main → Layout層。ページ全体の配置を担当
  • c-heading → Component層。サイト共通の見出しデザイン
  • p-news → Project層。「新着情報」セクション固有のレイアウト
  • c-card、c-card__image など → Component層。使い回せるカードパーツ

CSSの例

/* Component: カード */
.c-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.c-card__image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.c-card__body {
  padding: 20px;
}

.c-card__date {
  font-size: 0.85rem;
  color: #888;
}

.c-card__title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 8px;
}

.c-card__text {
  font-size: 0.95rem;
  margin-top: 8px;
  color: #555;
}

/* Project: 新着情報セクション */
.p-news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 768px) {
  .p-news {
    grid-template-columns: 1fr;
  }
}

注目してほしいのは、カードのデザイン（c-card）と、カードの並べ方（p-news）が分離されている点です。カードのデザインを変えたいときは c-card だけを修正すればよく、並べ方を変えたいときは p-news だけを修正すればよい。お互いに影響しないので、安心して修正できます。

FLOCSSを導入するときに迷うポイント

FLOCSSを実務で使い始めると、いくつかの「迷いどころ」が出てきます。よくある疑問を整理しておきましょう。

ComponentとProjectの使い分け

これが一番多い悩みです。判断基準はシンプルです。

  • 他のページでも同じデザインで使いそう → c-（Component）
  • このページ（セクション）でしか使わない → p-（Project）

迷ったら、まず p-（Project）にしておくのがおすすめです。あとで別のページでも使うことになったら、そのタイミングで c-（Component）に昇格させればOKです。最初から完璧に分類しようとしなくて大丈夫です。

BEMのElement（__）はどこまで深くする？

BEMでは __（アンダースコア2つ）を使って子要素を表しますが、入れ子が深くなると c-card__body__title__icon のような長い名前になってしまいます。

実務では、Elementは1階層までにするのが定番です。

/* 良い例 */
.c-card__title { ... }
.c-card__icon { ... }

/* 避けたい例 */
.c-card__body__title__icon { ... }

HTMLの構造が深くても、クラス名はBlockから見た役割で付けます。「カードの中のアイコン」であれば c-card__icon で十分です。

Utilityクラスはどこまで作る？

Utilityクラスを細かく作りすぎると、Tailwind CSSのようなユーティリティファースト設計に近づいてしまい、FLOCSSの良さが薄れます。

実務では、次の程度にとどめるのがバランスが良いです。

  • 余白の調整（u-mt10、u-mb20 など）
  • テキストの揃え（u-text-center）
  • 表示・非表示（u-hidden、u-sp-only）

色やフォントサイズの変更は、Utilityではなく、ComponentやProjectの中でModifier（--）を使って表現しましょう。

まとめ — まずは小さなプロジェクトから始めてみよう

FLOCSSの全体像をおさらいします。

  • Foundation（接頭辞なし）— リセットCSS・ベーススタイル
  • Layout（接頭辞 l-）— ヘッダー・フッターなど大枠
  • Component（接頭辞 c-）— サイト共通の再利用パーツ
  • Project（接頭辞 p-）— ページ固有のパーツ
  • Utility（接頭辞 u-）— 余白調整などの微調整

クラス名を見ただけで「これはサイト共通のボタンだな」「これはトップページだけのデザインだな」と判断できる。これがFLOCSSの最大のメリットです。

命名規則は、コードの「見えない品質」を支えるものです。見た目には直接影響しませんが、修正のしやすさ、チームでの作業効率、長期的な保守性に大きく関わります。

まずはポートフォリオサイトや練習用のページで試してみてください。最初はフォルダ構成を真似するだけでも、CSSの管理がぐっと楽になるのを実感できるはずです！

CATEGORY

Contact

お気軽にご相談ください

X（Twitter）のDM、もしくは本サイトのCONTACTページからご連絡ください。
24時間以内に返信しますので、些細なことでもお気軽にご相談ください。

Xでのお問い合わせ CONTACTページはこちら