COOSY BLOG
  • HOMEホーム

  • SERVICEサービス

    • サービスTOP
    • Web制作
    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
  • WORK制作実績

    • 制作実績TOP
    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーション
    • サービスサイト・SaaS
    • システム開発
  • ABOUTクーシーについて

    • クーシーについて
    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ岩手
    • ロンドン支社
    • ミャンマー支店
  • BLOGブログ

  • RECRUITリクルート

  • Contactお問い合わせ

BLOG MENU

  • BLOGトップ
  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加

CSS設計はどれがいい?4種の設計手法をわかりやすく解説

  • Web制作ハウツー
  • フロントエンド(HTML/CSS)
CSS設計はどれがいい?4種の設計手法をわかりやすく解説

CSSはとてもシンプルで単純なコードだけで作成できます。ですがとくに何も意識しないでCSSを書くと、大規模クラスのサイトの設計や複数人で作業する際にコードが煩雑になってしまい管理が難しくなってしまいます。

そこで登場するのがCSS設計です。
ここではCSS設計の基本と手法についてご紹介します。

CSS設計とは

CSS設計とは、CSSのメンテナンス性や作業効率化のための「コードの管理方法」と「クラス名の命名規則の考え方」です。CSS設計を取り入れることで、作業の効率化と全体のクオリティ担保につながります。

【設計に入る前に】よいCSS設計とは?

CSS設計をする前提として、そもそもよいCSSとは何なのか?という考え方が基本になっていきます。
それが以下の4つの条件です。

  1. 予測しやすい
  2. 再利用しやすい
  3. 保守しやすい
  4. 拡張しやすい

これらを満たすのがよいCSSとされています。
それぞれ見ていきましょう。

1.予測しやすい

誰が見てもどこに使われているか、どのようなものなのか予測ができることが大切です。

設計で大切なのは「誰でもわかるようにする」ことです。例えばボタンのパーツのclassに「image」という命名をすると、このパーツはボタンなのか画像なのかわからないですよね。誰にでもきちんとわかるように、ボタンには「button」という命名をしたほうがいいということです。

またコードの影響範囲がわかるようにしておくというのも、「予測しやすい」部分になります。「CSSを追加したら意図しないところにスタイルが当たった」ということがないように設計しましょう。

2.再利用しやすい

同じパーツが複数箇所で必要になった場合、書き直したり上書きしたりしなくても再利用ができるようにしておくことです。同じようなパーツを別々のパーツにしたことで、上書き上書きで膨大な量のソースコードになってしまって管理ができなくなることを防ぎます。

3.保守しやすい

新しく機能を追加したり更新したりしても、既存のスタイルやルールが破綻しない、リファクタリングをしなくてもよいコードのことです。

4.拡張しやすい

作業者が1人であっても複数人でも問題なく管理できる状態にすることです。誰でもわかるルールを採用して学習コストを低くし、管理をしやすくする必要があります。

代表的なCSS設計手法

では、よいCSS設計の条件をクリアするCSSの書き方とはどんなものでしょうか。ゼロから自分でルールを作ったら大変ですよね?
おすすめは、すでによく使われているCSS設計手法をそのまま使うことです。

一般的にCSS設計の手法はいくつかあるのですが、主に使われているのは以下の4つになります。

  • BEM
  • OOCSS
  • SMACSS
  • FLOCSS

それぞれに特徴があり考え方やルールが違いますので、一つずつ見ていきましょう。

BEM

BEMとはBlock、Element、Modifierの3つの要素から構成するCSS設計手法です。
この3つにはそれぞれルールが設けられています。

Block

ブロック要素はコンテンツを内包する外枠で、どこでも再利用可能なことを前提にしたパーツになります。

classの命名は重複NGで、1コンテンツに1つだけです。重複しない代わりにブロック要素は入れ子になってもOKです。空間系(margin、paddingなど)のスタイルはブロック要素には設定しないようにしましょう。

  <div class="block"></div>

Elemment

エレメント要素はブロック要素に含まれる構成要素です。

class名には必ずブロック要素が前に付くようにします。ブロック要素内であれば複数使用することができます。単独では使用できません。必ずブロック要素の中で使用しましょう。

  <div class="block">
    <div class="block__elemment"></div>
  </div>

Modifier

モディファイアは、ブロック要素やエレメント要素の見た目、状態、振る舞いを定義するものです。
例えば、以下のようなときにモディファイアが活躍します。

  • 見た目:通常のコンテンツ幅は1200pxだが、フォームがあるページでは800pxになる
  • 状 態:通常のボタンは黒背景のものがボタンが押せない場合は灰色になる
  • 振る舞い:通常はセンター揃えだが、お問い合わせページでは右揃えになる

1つの要素に対して複数のモディファイアが設定できます。
こちらも単独では使用できません。必ずブロック要素とエレメント要素に付属するものとして使用しましょう。

  <button class="button button--disabled"></button>
  <div class="box box--small"></div>
  <p class="text text--center"></p>

OOCSS

OOCSSとは、Object Oriented CSSの略で、米ヤフーのNicole Sullivanによって2009年に発表されたCSS設計手法です。

「Object Oriented」は「オブジェクト指向」という意味です。オブジェクト指向に基づいて考案されたOOCSSは、Bootstrapでも採用されています。

OOCSSは以下の2つの考え方で構成されています。

  • 構造と見た目を分離
  • コンテナとコンテンツを分離

構造と見た目を分離

例えばボタンのパーツを作るとして、大枠のwidthやheightなどの構造と、背景色や文字色などの見た目を別のclassにするということです。こうすることで他の色を追加するときも少ないコードで定義できます。

  <button class="button back-blue"></button>
  /* 構造 */
  .button {
    width: 200px;
    height: 50px;
    text-align: center;
  }
  /* 見た目 */
  .back-blue {
    background: blue;
    color: white;
  }

コンテナとコンテンツを分離

再利用する要素がコンテンツで、その要素を囲む大枠がコンテナです。コンテナとコンテンツを分離すれば、場所に関係なくパーツが使える構造になります。

例えば、見出しのパーツを作成するときにclass名を定義してCSSを当てれば、違う場所にあるHTMLタグにも同じスタイルを適用できます。class名を定義しないと、.contact h2 のように「.contactの配下」でしか使えないコードになってしまい非効率です。

NGのパターン

これだと class=”contact” の配下でないとh2のスタイルが使えなくなる。

  <div class="contact">
    <h2>見出し</h2>
    <p>テキストテキストテキスト</p>
  </div>

  .contact h2 {
    font-size: 20px;
    font-weight: bold;
  }
OKのパターン

これであればどこでも使用できるパーツになる。

  <div class="contact">
    <h2 class="title">見出し</h2>
    <p>テキストテキストテキスト</p>
  </div>

  .title {
    font-size: 20px;
    font-weight: bold;
  }

SMACSS

SMACSS とは Scalable and Modular Architecture for CSS の略で、「スマックス」と読みます。
SMACSSは次の5つの分類のカテゴリで構成されます。

  • ベース
  • レイアウト
  • モジュール
  • 状態(ステート)
  • テーマ

5つのカテゴリに分類することで、カテゴリが混ざり合うのを防ぎます。
繰り返し使えてコードが少なくなり、メンテナンス性も高まり、ユーザ体験における一貫性も向上するというのがSMACSSの考え方です。
公式サイト:https://smacss.com/

ベース

ベースは要素そのもののデフォルトスタイルを定義します。IDやclassは使用しません。
1つの要素に対して要素セレクタ、子孫セレクタ、または子セレクタ、疑似クラスを使って適応されます。リセットcssもこの分類に入ります。

  body, form {
    margin: 0;
    padding: 0;
  }
  a {
    color: #039;
  }
  a:hover {
    color: #03F;
  }

レイアウト

レイアウトはページのエリアごとに分割するためのスタイルを定義します。エリア分けになるので、見た目のスタイルなどはここではつけません。
接頭辞は「l-」か「layout-」をつけて、レイアウトパーツだとひと目でわかるようにしておきます。

  l-main {
    max-width: 1200px;
  }
  .layout-section {
    margin: 30px 0 0;
  }

IDも指定できますが、詳細度を高めてスタイルをより複雑にしてしまうことがあるため、ここでは推奨されていません。使用する際は注意が必要です。

モジュール

モジュールはページ内の個別のコンポーネントです。他のページや、他のレイアウトの中で使っても同じスタイルのまま担保できるようなパーツを作成します。

ここで具体的な見た目の定義をします。class名はモジュールに関連する命名をして、子要素は親を継承して-で区切ります。被りがなければ要素セレクタで指定も可能ですが、あまり推奨されていません。

  <div class="module">
    <p class="module-text">aaaa</p>
  </div>

状態(ステート)

状態とは他のスタイルを拡張して上書きするものです。Javascriptなどで状態が切り替わったりするときに定義します。

classの命名は「is-XXXX」です。例えばアコーディオンで開いたり閉じたりしたときにスタイルを変えたり、タブの切り替えでスタイルを変えたりするのを状態として定義します。

  <div class="accordion is-open">
    <p class="accordion-title">アコーディオンタイトル</p>
    <p class="accordion-text">アコーディオンテキスト</p>
  </div>
  .accordion.is-open .accordion-title{
    color: #0022ff;
  }

テーマ

テーマはサイト全体の見た目や、雰囲気を統一させるためのスタイルを指定します。同じようなサイトを複数作って、色だけ変えるというときなどに使用します。
classをつける場合は「theme-」を先頭に記述します。

FLOCSS

FLOCSSは、「Foundation Layout Object CSS」の略称で、「CSS設計の教科書」の著者の谷拓樹さんという方が提唱した手法です。Foundation、Layout、Object(Component、Project、Utility)の要素で構成されています。

公式ドキュメント:https://github.com/hiloki/flocss

Foundation

リセットcssやサイトの基本となるスタイルを定義します。

Layout

ヘッダー、フッター、コンテンツなどのサイト全体の共通部分となるものを定義します。
接頭辞は「l-」をつけます。

<div class="l-layout"></div>

Object

Objectは再利用可能なモジュールを定義します。
さらに3つの階層で分類されています。

Component

Componentは最小モジュールパーツを指します。ボタンやナビゲーション、タイトルなど、どこでも汎用的に使えるパーツです。
接頭辞は「c-」をつけます。

<div class="c-button"></div>
Project

各ページごとのスタイルを定義します。接頭辞は「p-」をつけます。

<div class="p-contact"></div>
Utility

余白や非表示の設定など、ComponentとProjectでは定義できない細かい調整を定義します。
接頭辞は「u-」をつけます。

<div class="u-mt0"></div>
<div class="u-width-75"></div>

結局どの手法を選ぶべきか?

各手法のメリットとデメリットをまとめると、以下のとおりです。
メリットには◯、デメリットには△がついています。

BEM ◯ ルールがシンプルで導入しやすい。
△ class名やHTMLのソースコードが長くなりやすい。
OOCSS ◯ コンテナとコンテンツが分離しておりパーツを使い回しやすい。
△ 微妙に違うパーツを作ろうとするとどんどんclassが増えてしまう。
SMACSS ◯ 5つに分類することでパーツの展開がしやすい。
△ 分類のルールをチームで統一しないと逆に複雑になる。
FLOCSS ◯ レイヤー構造が細分化され大規模サイトでも管理しやすい。
△ class名が長くなりソースコードが見づらくなる。レイヤー分けも迷う。

これを踏まえると、CSS設計を初めて導入してみたいならシンプルなルールが売りのBEM、がっちりルールを設定したいときはSMACSS、FLOCSSあたりがおすすめです。ただし、それぞれデメリットへの対策は必要ですので、class名の付け方や分類のルールは話し合っておきましょう。

ちなみにCOOSYではBEMを採用しています。メリットやデメリットを検討した結果、COOSYにはBEMが一番合っていると判断しました。

CSS設計手法の中でどれが一番優れている、一番使いやすいなどはありません。案件の特性で判断したり、チーム内で話し合って使いやすい手法を選択してください。

まとめ

以上、CSS設計の各種設計手法について解説しました。

記事でも触れたとおり、CSS設計を導入することで保守や拡張をしやすいコードが書けるようになります。CSS設計の導入を検討している場合は一度気になるものを試してみて、自分の考え方に合っているか確かめた上で選択してみましょう。

クーシーブログ編集部

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

2023/09/26

執筆者:仲村ゆりの デザイン:大坂間琴美

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
お問い合わせはこちら

フロントエンド(HTML/CSS)の関連記事はこちら

  • ScrollTriggerで途中から横スクロールさせる方法【GSAP入門】

    この記事では、スクロールすると画面が横に推移していくページをサンプルに「GSAP(ジーサップ)」と、その拡張機能である「ScrollTrigger」の基本や導入についてご紹介していきます。

    • フロントエンド(HTML/CSS)
  • 【初心者向け】CSSとは?基本をわかりやすく3分で解説

    「CSS」とは、HTMLを装飾する言語のことです。「CSS」の基本から書き方まで初心者でもわかる簡単な言葉で解説します。

    • フロントエンド(HTML/CSS)
  • Three.jsの使い方!3DモデルをWeb上で表示させる8ステップ

    Three.jsを使って3DモデルをWeb上に表示させるまでの具体的な流れや、活用事例などをまとめました。

    • フロントエンド(HTML/CSS)
    • Web最新トレンド
  • 【初心者向け】HTMLとは?基本をわかりやすく3分で解説

    「HTML」とは、ウェブページの構造を作る言語のことです。「HTML」の基本から書き方まで初心者でもわかる簡単な言葉で解説します。

    • フロントエンド(HTML/CSS)
  • 【Figma】現役コーダーが開発モード(Dev mode)を実務視点で使ってみた

    今回は、Figmaの「開発モード(Div mode)」に注目し、実務で活用できそうなのか、試してみます。

    • WebデザインTips
    • フロントエンド(HTML/CSS)
  • CSSスクロールアニメーションを使った魅力的なデザインの実装方法

    スクロールアニメーションとはスクロール量に合わせてアニメーションをつけることです。この記事ではCSSで実装できる方法についてご紹介しています。

    • WebデザインTips
    • フロントエンド(HTML/CSS)
  • 【2023年版】最新トレンドCSS7つをコード付きで解説します!

    JSがなくてもできる!進化した最新のトレンドCSSをいくつかご紹介します。

    • フロントエンド(HTML/CSS)
    • Web最新トレンド
  • 【内部SEO対策】HTMLの構造化マークアップの重要ポイント4選!

    HTMLの構造化マークアップは、内部SEO対策において非常に重要です。HTMLの正しい書き方を知って内部対策を充実させましょう。

    • フロントエンド(HTML/CSS)

COOSYの
制作実績

UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。

制作実績を見る

Web制作の課題はクーシーが解決します

  • Webデザイン

    UIUXと美しさを両立し、ブランドを「カタチ」に。SEO・AIOも考慮した戦略的ビジュアルで目標達成を支援します。

  • Web制作

    コーポレートサイト、採用サイト、ECサイトまで。最新AI技術を掛け合わせ、各サイトの特性に合わせたUIUX設計を実現します。

  • UIUX設計

    人間中心設計で価値ある体験を創造。SEO・AIOにも貢献し、LTV向上につながる直感的な画面デザインを実現します。

CATEGORY LIST

  • すべての記事一覧

  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット
  • WORKS

    Webサイト・アプリなどの
    様々な実例・制作実績のご紹介

    WORKS
  • CONTACT CONTACT

    Webサイトのご相談、お見積もりはこちらから

    Webサイトのご相談、お見積もりなど
    お気軽にお問い合わせください

ホーム

  • TOP
  • COOSY BLOG
  • CSS設計はどれがいい?4種の設計手法をわかりやすく解説
ページトップへ
  • TOP
  • SERVICE

    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
    • Web制作
  • WORKS

    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーションサイト
    • サービスサイト
    • システム開発
  • ABOUT

    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ 岩手
    • ロンドン支社
    • ミャンマー支店
  • RECRUIT

    • ディレクション部
    • デザイン部
    • システム開発部
    • アカウント・プランニング部
    • Webマーケティング事業部
    • 人事・総務部
    • オフショア
    • グローバル事業部
  • BLOG

    • 目的別
    • Web制作ハウツー
    • システム開発
    • Webサイト運用のコツ
    • Webマーケティング
    • 特集

COOSY SNS

  • facebook
  • X
  • お問い合わせ
  • Privacy policy
  • Site Policy
  • Security Policy
© COOSY All Rights Reserved.