FLOCSSとは？基本の考え方と実際の書き方を分かりやすく解説

2026年4月10日

HTML・CSS

CSSを書いていると、クラス名の付け方に迷ったり、「このスタイルはどのファイルに書けばいいんだろう？」と手が止まったりすることはありませんか？

プロジェクトが小さいうちは何とかなっていても、ページ数が増えるにつれて「どこに何を書いたか分からない」「修正すると別の場所が崩れる」といった問題が出てきます。

そんな問題を解決するためのCSS設計手法のひとつが、FLOCSS（フロックス） です。CSSの置き場所と名前のルールをあらかじめ決めておくことで、管理しやすいコードが書けるようになります。

この記事では、CSS設計手法の1つであるFLOCSS（フロックス） の基本的な考え方から、実際のフォルダ構成・命名規則・コードの書き方まで、順を追って丁寧に解説します。

この記事で分かること

FLOCSSとは何か、3つのレイヤーの役割と考え方
FLOCSSのクラス名の付け方（プレフィックスとBEM記法の組み合わせ）
Sassを使った実際のフォルダ構成と読み込み順序

なぜCSS設計が必要なのか——「動くCSS」と「管理できるCSS」の違い
FLOCSSとは——3つのレイヤーで考えるCSS設計
FLOCSSのクラス名の付け方——プレフィックスとBEM記法
実際のフォルダ構成——Sassと組み合わせて管理する
FLOCSSのメリット・注意点
よくある質問（FAQ）
まとめ——まずは1つのプロジェクトでFLOCSSを試してみよう

なぜCSS設計が必要なのか——「動くCSS」と「管理できるCSS」の違い

CSSは、書けば動きます。.box1 というクラス名でも、div > p というセレクタでも、ブラウザは問題なくスタイルを適用してくれます。

でも、それは「今の自分だけが触るとき」に限った話です。

チームで開発する場面や、半年後に自分で修正する場面を想像してみてください。「この .box1 って何のボックスだったっけ？」「このスタイルを変えたら、別のページが崩れた」という事態は、CSSの設計が決まっていないときに起こりやすいトラブルです。

CSS設計とは、CSSの置き場所と名前のルールをあらかじめ決めておくことです。

ルールがあることで、自分だけでなく、次にそのコードを触る人にとっても分かりやすいCSSになります。保守性が上がり、チーム開発や案件の引き継ぎもスムーズに進みやすくなります。

CSSが崩壊する典型的なパターン

CSS設計がないまま書き進めると、こんな状態になりがちです。心当たりがある方もいるかもしれません。

クラス名が連番になる: .box1 .box2 .section3 ……後から見ると何のスタイルか分からない
同じスタイルをコピペしている: ボタンのスタイルを複数箇所に書いていて、色を変えるときに全部直す必要がある
!important を多用している: スタイルの上書き合戦になり、どのルールが勝っているか追えなくなる

これらは「CSSの書き方が悪い」のではなく、「ルールがないまま書き進めた結果」です。設計の考え方を取り入れるだけで、こうした問題はかなり防げるようになります。

CSS設計手法にはどんなものがあるのか

CSS設計にはいくつかの手法があります。代表的なものを簡単に紹介します。

BEM: クラス名の命名規則に特化した手法。Block / Element / Modifier の3つでクラス名を構成する
SMACSS: CSSをBase / Layout / Module / State / Theme の5つに分類する
ITCSS: CSSの詳細度を「逆三角形」の階層で管理する考え方
FLOCSS: Foundation / Layout / Object の3レイヤーで分類する、日本発の設計手法

それぞれに特徴がありますが、この記事ではFLOCSSに絞って解説します。FLOCSSは日本のWeb制作現場で広く採用されており、コーディング案件の募集要項で「FLOCSS準拠」と指定されることも増えています。

FLOCSSとは——3つのレイヤーで考えるCSS設計

FLOCSS（フロックス）は、Foundation Layout Object CSS の略です。

日本のフロントエンドエンジニアである谷拓樹氏が提唱した設計手法で、CSSを役割ごとに3つのレイヤーに分けることが基本的な考え方です。

3つのレイヤーとは、以下の通りです。

Foundation: サイト全体の土台となるスタイル
Layout: ページの大きな構造（ヘッダー・フッター等）
Object: 再利用できるパーツ群（さらにComponent / Project / Utility に細分化）

この3つのレイヤーで「どこに何を書くか」が決まるため、CSSの置き場所に迷わなくなります。

ここから、各レイヤーの役割とコードの書き方を順に見ていきましょう。

Foundation（ファンデーション）——サイト全体の土台

Foundationは、サイト全体に適用する初期設定を置くレイヤーです。

具体的には、リセットCSSやベーススタイル（body、a、img などの要素セレクタに対する初期設定）がここに入ります。

家を建てるときに例えると「基礎工事」にあたる部分です。すべてのページに共通する土台なので、最初に読み込まれるようにします。

// Foundation: ベーススタイルの例
// サイト全体に適用する初期設定を置くレイヤー

body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.8;
  color: #333;
}

a {
  color: inherit;
  text-decoration: none;
}

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

Foundationレイヤーのポイントは、クラスではなく要素セレクタで書くことです。body や a のように、HTML要素に対して直接スタイルを当てます。

Layout（レイアウト）——ページの大枠

Layoutは、ページの大きな構造を定義するレイヤーです。

ヘッダー・フッター・メインコンテンツエリア・サイドバーなど、ページの「骨組み」になる部分がここに入ります。

<!-- Layout: ページの大枠を定義する -->
<header class="l-header">...</header>
<main class="l-main">...</main>
<footer class="l-footer">...</footer>

// Layout: ページの大枠
// プレフィックス: l-

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

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

.l-footer {
  background-color: #222;
  color: #fff;
  padding: 40px 0;
}

Layoutレイヤーの特徴は、クラス名に l- というプレフィックス（接頭辞）を付けることです。クラス名を見ただけで「これはレイアウト（ページの骨組み）のスタイルだな」と判断できます。

Object（オブジェクト）——再利用できるパーツ群

Objectレイヤーは、FLOCSSの中で最も扱うことが多いレイヤーです。

ボタン・カード・見出しといったUIパーツのスタイルがここに入ります。Objectはさらに3つのカテゴリに分かれます。

Component（コンポーネント）——最小の再利用パーツ

プレフィックスは c- です。どのページでも使い回せる汎用的なパーツ（ボタン・見出し・カードなど）を定義します。

<!-- Component: どのページでも使い回せるパーツ -->
<a href="#" class="c-button">お問い合わせ</a>

// Component: 汎用パーツ
// プレフィックス: c-

.c-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  text-align: center;
}

Project（プロジェクト）——特定ページ固有のスタイル

プレフィックスは p- です。トップページのヒーローセクションやお問い合わせフォームなど、特定の場面でしか使わないスタイルを定義します。

<!-- Project: 特定ページ固有のスタイル -->
<section class="p-hero">
  <h1 class="p-hero__title">Web制作のことなら</h1>
  <p class="p-hero__text">丁寧なコーディングで、想いを形にします。</p>
</section>

// Project: 特定ページ・セクション固有
// プレフィックス: p-

.p-hero {
  background-image: url("../images/hero-bg.jpg");
  background-size: cover;
  padding: 120px 0;
  text-align: center;

  &__title {
    font-size: 2rem;
    color: #fff;
  }
}

「ComponentとProjectの境界が分かりにくい」と感じる方もいるかもしれません。判断の目安はシンプルです。

複数のページで使い回す → Component（c-）
特定の場所でしか使わない → Project（p-）

迷ったときは、まずProjectに入れておくのも1つの方法です。後から「他のページでも使いたい」と思ったときにComponentへ移動すればよいので、最初から完璧に分類しなくても大丈夫です。

Utility（ユーティリティ）——微調整用の単機能クラス

プレフィックスは u- です。margin調整や表示・非表示の切り替えなど、1つのプロパティだけを持つ補助的なクラスです。

// Utility: 微調整用の単機能クラス
// プレフィックス: u-

.u-mt-0  { margin-top: 0; }
.u-mt-10 { margin-top: 10px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-40 { margin-top: 40px; }

.u-hidden {
  display: none;
}

Utilityはあくまで「微調整」のためのレイヤーです。ここに複雑なスタイルを書き始めると設計が崩れてしまうので、1クラス1プロパティを意識するとよいかもしれません。

FLOCSSのクラス名の付け方——プレフィックスとBEM記法

ここまで見てきたように、FLOCSSではレイヤーごとにプレフィックスを付けることで、クラス名を見ただけで「どのレイヤーに属するスタイルか」が分かるようになっています。

プレフィックスの一覧と意味

改めてプレフィックスを整理しておきましょう。

プレフィックス	レイヤー	例
なし	Foundation	`body`, `a`, `h1`（要素セレクタ）
`l-`	Layout	`l-header`, `l-footer`
`c-`	Component	`c-button`, `c-card`
`p-`	Project	`p-hero`, `p-contact`
`u-`	Utility	`u-mt-20`, `u-hidden`

このプレフィックスのおかげで、HTMLファイルの中にあるクラス名を見るだけで「このスタイルはどこに定義されているか」が推測できるようになります。実務ではこの「見ただけで分かる」という感覚がとても大切です。

BEMとFLOCSSの関係

FLOCSSのObjectレイヤー（Component・Project）では、BEM（Block Element Modifier）記法 を併用するのが一般的です。

BEMとは、クラス名をBlock（ブロック）・Element（エレメント）・Modifier（モディファイア） の3つの概念で構成する命名規則です。

Block: 独立したまとまり（例: c-card）
Element: Blockの中の構成要素。__（アンダースコア2つ）でつなぐ（例: c-card__title）
Modifier: バリエーション。--（ハイフン2つ）でつなぐ（例: c-button--primary）

FLOCSSのプレフィックスとBEMを組み合わせると、こうなります。

<!-- BEM記法 + FLOCSSプレフィックスの組み合わせ -->
<div class="c-card">
  <img class="c-card__image" src="thumbnail.jpg" alt="記事のサムネイル">
  <div class="c-card__body">
    <h3 class="c-card__title">記事タイトル</h3>
    <p class="c-card__text">記事の概要テキストが入ります。</p>
  </div>
</div>

// BEM記法をFLOCSSで使う例

.c-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;

  &__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  &__body {
    padding: 16px;
  }

  &__title {
    font-size: 1.125rem;
    font-weight: bold;
  }

  &__text {
    margin-top: 8px;
    color: #666;
  }
}

c-card がBlock、c-card__title がElementです。Sassの &__ を使うとネストして書けるので、コードの見通しもよくなります。

BEMの命名規則を使うことで、「このクラスはどのパーツの一部なのか」がクラス名だけで伝わります。BEMについてより詳しく知りたい方は、別記事で改めて解説する予定です。

[BEMについて詳しくはこちら → リンク予定]

実際のフォルダ構成——Sassと組み合わせて管理する

FLOCSSの各レイヤーは、Sassのファイル分割と相性がとてもよいです。

Sassでは _ で始まるパーシャルファイルに分割し、@use で集約するのが基本的な使い方です。FLOCSSのレイヤーをそのままフォルダに対応させることで、「どのファイルにどんなスタイルがあるか」が構造だけで把握できるようになります。

実際のフォルダ構成は以下のようになります。

scss/
├── foundation/
│   ├── _reset.scss
│   ├── _base.scss
│   └── _variable.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── _main.scss
├── object/
│   ├── component/
│   │   ├── _button.scss
│   │   ├── _card.scss
│   │   └── _heading.scss
│   ├── project/
│   │   ├── _hero.scss
│   │   └── _contact.scss
│   └── utility/
│       └── _utility.scss
└── style.scss（各ファイルを @use で読み込む）

ポイントは「1レイヤー1フォルダ」の原則です。Foundationのスタイルは foundation/ フォルダに、Layoutのスタイルは layout/ フォルダに、というようにフォルダが役割をそのまま表しています。

style.scss での読み込み順序

各パーシャルファイルは、最終的に style.scss で @use を使って1つに集約します。

ここで大切なのが読み込み順序です。CSSはカスケード（後から読み込まれたスタイルが優先される）の仕組みがあるため、FLOCSSのレイヤー順に読み込む必要があります。

// style.scss
// FLOCSSのレイヤー順に読み込む

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

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

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

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

// Object - Utility（最後に読み込む）
@use "object/utility/utility";

読み込み順は Foundation → Layout → Object（Component → Project → Utility） です。

Utilityを最後に読み込むのは、微調整用のクラスが他のスタイルを確実に上書きできるようにするためです。この順序を守ることで、意図しないスタイルの競合を防ぎやすくなります。

なお、_variable.scss に定義した変数を他のファイルで使いたい場合は、使う側のファイルでも @use で読み込む必要があります。style.scss で読み込んでいるだけでは他のファイルからは参照できないので、この点は覚えておくとよいかもしれません。詳しくはSassの公式ドキュメントを参照してください。

FLOCSSのメリット・注意点

FLOCSSの仕組みを一通り見てきたところで、メリットと注意点を整理しておきましょう。

メリット

どこに何を書くか迷わない

レイヤーとプレフィックスによって、CSSの置き場所が明確に決まります。「このスタイルはどのファイルに書けばいいのか」と悩む時間が減り、コーディングに集中しやすくなります。

他の人が読みやすい

クラス名を見るだけで「これはレイアウトのスタイルだな」「これはコンポーネントだな」と役割が分かります。チーム開発や案件の引き継ぎで、CSSの全体像をつかみやすくなるのは大きな利点です。

再利用しやすい

Componentレイヤーに汎用パーツを切り出しておけば、別のページでも同じクラスを使い回せます。同じスタイルを何度もコピペする必要がなくなり、修正も1箇所で済みます。

コーディング案件で求められることがある

Web制作の案件では「FLOCSS準拠」と指定されることが増えてきています。FLOCSSを理解しておくと、そうした案件にもスムーズに対応しやすくなります。

注意点

FLOCSSは万能な手法ではありません。導入するときに知っておくとよいこともいくつかあります。

最初はComponentとProjectの分類に迷うことがある

「このパーツはComponentなのかProjectなのか」と迷う場面は、慣れないうちはどうしてもあります。前述の通り、「複数ページで使う → Component、1箇所だけ → Project」を目安にしてみてください。最初から完璧に分けようとしなくて大丈夫です。

小規模サイトではファイル数が多く感じることがある

ページ数の少ないLPなどでは、フォルダやファイルの数が多く感じるかもしれません。ただ、慣れるための練習として小規模なサイトから始めるのは効果的です。実際に手を動かしてみると、フォルダ分割の恩恵が体感できると思います。

Sassの基礎知識が前提になる

FLOCSSのフォルダ構成を活かすには、Sassのパーシャルファイル（_ 付きファイル）や @use の仕組みを理解しておく必要があります。Sassの基本に不安がある方は、先にそちらを押さえておくとスムーズです。

よくある質問（FAQ）

FLOCSSとBEMは何が違うのですか？: BEMはクラス名の「命名規則」で、FLOCSSはCSSファイルの「分類・管理のルール」です。FLOCSSの中でBEMの命名規則を使うのが一般的な組み合わせなので、どちらか一方を選ぶものではなく、併用して使うものと考えるとよいかもしれません。

ComponentとProjectの分け方が分かりません。どう判断すればよいですか？: 「そのパーツを他のページでも使い回すかどうか」で判断するのがシンプルです。複数のページで使う汎用パーツならComponent（c-）、特定のページでしか使わないスタイルならProject（p-）に分類します。迷ったらまずProjectに入れておき、後から必要に応じてComponentに移すという進め方もあります。

FLOCSSを使うにはSassが必須ですか？: 必須ではありません。CSSファイルだけでもFLOCSSの考え方（レイヤー分類とプレフィックス）は適用できます。ただ、Sassのパーシャルファイルと @use を使うことで、1レイヤー1フォルダの構成が実現しやすくなるため、Sassとの組み合わせが一般的です。

小さなサイトでもFLOCSSを導入する意味はありますか？: ページ数の少ないサイトでは設計の恩恵を感じにくい場面もあるかもしれません。ただ、小規模なサイトだからこそ全体が把握しやすく、FLOCSSの考え方を練習するのに向いています。まず1つのプロジェクトで試してみて、慣れてから大きな案件に適用していくのがおすすめです。