1. TOP
  2. CSSの話(CSS記法について)

WEB制作CSSの話(CSS記法について)

CSSの話(CSS記法について)

web制作をするとデザインをコーディングするときに「どの記法で書きますか？」という話になることがあります。

弊社はあらゆる記法に対応していますので、
同じHTMLで、CSSの記法を変えてどのように書いているのかを紹介します。

<div >
  <header>
    <h1>Reezote</h1>
    <p >Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。</p>
  </header>
  <section>
    <h2 >サービス一覧</h2>
    <div>
      <img src="https://placehold.jp/150x150.png" alt="Web制作" >
      <h3>記法の歴史</h3>
      <p>ここにその記法の説明</p>
    </div>
  </section>
</div>

このHTMLをベースに書いていきましょう。

BEM (Block, Element, Modifier)記法

/* BEMスタイル */
.container {
  background: linear-gradient(135deg, #f06, #4a90e2);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header__title {
  font-size: 2rem;
  color: #fff;
  text-align: center;
}

.header__description {
  font-size: 1.2rem;
  color: #eee;
}

.service-item {
  background: #fff;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.service-item__image {
  width: 150px;
  height: 150px;
  margin-bottom: 1rem;
}

.service-item__name {
  font-size: 1.5rem;
  color: #333;
}

.service-item__description {
  color: #666;
  line-height: 1.6;
}
<div class="container">
  <header class="header">
    <h1 class="header__title">Reezote</h1>
    <p class="header__description">Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。</p>
  </header>
  <section class="services">
    <h2 class="services__title">サービス一覧</h2>
    <div class="service-item">
      <img src="https://placehold.jp/150x150.png" alt="Web制作" class="service-item__image">
      <h3 class="service-item__name">BEMの歴史</h3>
      <p class="service-item__description">BEMは2010年代にYandexによって導入され、CSSクラスをより分かりやすくし、プロジェクトを拡張しやすくする目的で開発されました。BEMは、大規模なプロジェクトでコンポーネントを再利用しやすくするために有効です。</p>
    </div>
  </section>
</div>

Reezote

Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。

サービス一覧

Web制作

BEMの歴史

BEMは2010年代にYandexによって導入され、CSSクラスをより分かりやすくし、プロジェクトを拡張しやすくする目的で開発されました。BEMは、大規模なプロジェクトでコンポーネントを再利用しやすくするために有効です。

このような感じです。

OOCSS (Object-Oriented CSS)記法

/* OOCSSスタイル */
.container {
  background: linear-gradient(45deg, #34e89e, #0f3443);
  padding: 2rem;
  border-radius: 8px;
}

.title {
  font-size: 2rem;
  color: #fff;
  text-align: center;
}

.description {
  font-size: 1.2rem;
  color: #ddd;
}

.service-item {
  background: #fafafa;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  border: 1px solid #eee;
}

.service-item img {
  width: 150px;
  height: 150px;
}

.service-item h3 {
  font-size: 1.5rem;
  color: #333;
}

.service-item p {
  color: #555;
  line-height: 1.6;
}

<div class="container">
  <header>
    <h1 class="title">Reezote</h1>
    <p class="description">Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。</p>
  </header>
  <section>
    <h2 class="title">サービス一覧</h2>
    <div class="service-item">
      <img src="https://placehold.jp/150x150.png" alt="Web制作">
      <h3>OOCSSの歴史</h3>
      <p>OOCSSは「Object-Oriented CSS」の略で、スタイルを再利用可能な「オブジェクト」として設計する考え方です。OOCSSは、見た目と構造を分離して記述するため、Web制作において保守性を高めるのに役立ちます。</p>
    </div>
  </section>
</div>

Reezote

Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。

サービス一覧

Web制作

OOCSSの歴史

OOCSSは「Object-Oriented CSS」の略で、スタイルを再利用可能な「オブジェクト」として設計する考え方です。OOCSSは、見た目と構造を分離して記述するため、Web制作において保守性を高めるのに役立ちます。

こんな感じ。

SMACSS (Scalable and Modular Architecture for CSS)記法

/* SMACSSスタイル */
.container {
  background: linear-gradient(to right, #f7ff00, #db36a4);
  padding: 2rem;
  border-radius: 8px;
}

h1 {
  font-size: 2rem;
  color: #fff;
  text-align: center;
}

p {
  font-size: 1.2rem;
  color: #eee;
}

.service-item {
  background: #fff;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.service-image {
  width: 150px;
  height: 150px;
}

.service-name {
  font-size: 1.5rem;
  color: #444;
}

.service-description {
  color: #555;
  line-height: 1.6;
}
<div class="container">
  <header>
    <h1>Reezote</h1>
    <p>Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。</p>
  </header>
  <section>
    <h2>サービス一覧</h2>
    <div class="service-item">
      <img src="https://placehold.jp/150x150.png" alt="Web制作" class="service-image">
      <h3 class="service-name">SMACSSの歴史</h3>
      <p class="service-description">SMACSSはJonathan Snookが提唱したCSSアーキテクチャで、大規模なCSSプロジェクトをスケールしやすくするためのルールを提供します。カテゴリ分けによるモジュール設計に優れています。</p>
    </div>
  </section>
</div>

Reezote

Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。

サービス一覧

Web制作

SMACSSの歴史

SMACSSはJonathan Snookが提唱したCSSアーキテクチャで、大規模なCSSプロジェクトをスケールしやすくするためのルールを提供します。カテゴリ分けによるモジュール設計に優れています。

こんな感じですね。

Atomic CSS記法

/* Atomic CSSスタイル */
.p-2 {
  padding: 2rem;
}

.m-2 {
  margin-bottom: 2rem;
}

.text-center {
  text-align: center;
}

.bg-gradient {
  background: linear-gradient(90deg, #f093fb, #f5576c);
}

.shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.text-white {
  color: #fff;
}

.text-gray {
  color: #888;
}

.img-150 {
  width: 150px;
  height: 150px;
}

<div class="p-2 bg-gradient text-white">
  <header>
    <h1 class="text-center">Reezote</h1>
    <p>Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。</p>
  </header>
  <section>
    <h2>サービス一覧</h2>
    <div class="shadow p-2 m-2">
      <img src="https://placehold.jp/150x150.png" alt="Web制作" class="img-150">
      <h3>Atomic CSSの歴史</h3>
      <p class="text-gray">Atomic CSSは、各クラスが1つのプロパティだけを管理するシンプルなスタイルです。ユーティリティファーストの考え方で、Tailwind CSSなどのフレームワークがこの概念を採用しています。</p>
    </div>
  </section>
</div>

Reezote

Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。

サービス一覧

Web制作

Atomic CSSの歴史

Atomic CSSは、各クラスが1つのプロパティだけを管理するシンプルなスタイルです。ユーティリティファーストの考え方で、Tailwind CSSなどのフレームワークがこの概念を採用しています。

こんな感じです。

ITCSS (Inverted Triangle CSS)記法

/* ITCSSスタイル */
:root {
  --primary-color: #4a90e2;
  --secondary-color: #50e3c2;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  padding: 2rem;
  border-radius: 8px;
}

h1 {
  font-size: 2rem;
  color: #fff;
  text-align: center;
}

p {
  font-size: 1.2rem;
  color: #eee;
}

.service-item {
  background: #fff;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.service-image {
  width: 150px;
  height: 150px;
}

.service-name {
  font-size: 1.5rem;
  color: #333;
}

.service-description {
  color: #666;
  line-height: 1.6;
}

<div class="container">
  <header>
    <h1>Reezote</h1>
    <p>Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。</p>
  </header>
  <section>
    <h2>サービス一覧</h2>
    <div class="service-item">
      <img src="https://placehold.jp/150x150.png" alt="Web制作" class="service-image">
      <h3 class="service-name">ITCSSの歴史</h3>
      <p class="service-description">ITCSSは、スタイルシートをレイヤーごとに整理し、上から下へスタイルの詳細度が増すように設計されています。これにより、CSSを効率的に管理できます。</p>
    </div>
  </section>
</div>

Reezote

Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。

サービス一覧

Web制作

ITCSSの歴史

ITCSSは、スタイルシートをレイヤーごとに整理し、上から下へスタイルの詳細度が増すように設計されています。これにより、CSSを効率的に管理できます。

Utility-First CSS (Tailwind-style)記法

/* Tailwind風のユーティリティクラス */
.bg-gradient-to-r {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

.text-white {
  color: white;
}

.text-xl {
  font-size: 1.5rem;
}

.text-lg {
  font-size: 1.25rem;
}

.font-bold {
  font-weight: bold;
}

.shadow-lg {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.rounded-lg {
  border-radius: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

<div class="bg-gradient-to-r p-4 rounded-lg text-white">
  <header class="text-center mb-4">
    <h1 class="text-xl font-bold">Reezote</h1>
    <p class="text-lg">Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。</p>
  </header>
  <section>
    <h2 class="text-lg font-bold mb-4">サービス一覧</h2>
    <div class="shadow-lg p-4 rounded-lg">
      <img src="https://placehold.jp/150x150.png" alt="Web制作" class="mb-4">
      <h3 class="text-lg font-bold">Utility-First CSSの歴史</h3>
      <p>Utility-First CSSは、クラス名が直接デザインスタイルを表現する方式です。Tailwind CSSが代表例で、特定のスタイルを短いクラスで素早く適用できるため、プロジェクトのスピードを高めます。</p>
    </div>
  </section>
</div>

Reezote

Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。

サービス一覧

Web制作

Utility-First CSSの歴史

Utility-First CSSは、クラス名が直接デザインスタイルを表現する方式です。Tailwind CSSが代表例で、特定のスタイルを短いクラスで素早く適用できるため、プロジェクトのスピードを高めます。

SUIT CSS記法

/* SUIT CSSスタイル */
.Component {
  background: linear-gradient(45deg, #74ebd5, #acb6e5);
  padding: 2rem;
  border-radius: 8px;
  color: white;
}

.Component-element {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.Component-element--large {
  font-size: 2rem;
  font-weight: bold;
}

.is-active {
  background: #ff6b6b;
  border-radius: 8px;
  padding: 1rem;
}

<div class="Component">
  <header class="Component-element--large">Reezote</header>
  <p class="Component-element">Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。</p>
  <section>
    <h2 class="Component-element--large">サービス一覧</h2>
    <div class="is-active">
      <img src="https://placehold.jp/150x150.png" alt="Web制作">
      <h3>SUIT CSSの歴史</h3>
      <p>SUIT CSSは、BEMに似たCSSの記法で、要素に関連したスタイルをコンポーネントとして管理します。状態を示すクラス（is-）もあり、UIの状態に応じてスタイルを変更するのが簡単です。</p>
    </div>
  </section>
</div>
Reezote

Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。

サービス一覧

Web制作

SUIT CSSの歴史

SUIT CSSは、BEMに似たCSSの記法で、要素に関連したスタイルをコンポーネントとして管理します。状態を示すクラス（is-）もあり、UIの状態に応じてスタイルを変更するのが簡単です。

Cube CSS記法

/* Cube CSSスタイル */
.container {
  background: linear-gradient(135deg, #4ca1af, #c4e0e5);
  padding: 2rem;
  border-radius: 8px;
}

.u-padding {
  padding: 1rem;
}

.u-margin-bottom {
  margin-bottom: 2rem;
}

.u-text-center {
  text-align: center;
}

.u-bg-white {
  background-color: white;
  border-radius: 8px;
}

.u-shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.u-text-gray {
  color: #666;
}

.u-font-bold {
  font-weight: bold;
}

<div class="container u-padding u-bg-white u-shadow">
  <header class="u-text-center u-margin-bottom">
    <h1 class="u-font-bold">Reezote</h1>
    <p>Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。</p>
  </header>
  <section>
    <h2 class="u-font-bold u-margin-bottom">サービス一覧</h2>
    <div class="u-padding u-bg-white u-shadow u-margin-bottom">
      <img src="https://placehold.jp/150x150.png" alt="Web制作">
      <h3 class="u-font-bold">Cube CSSの歴史</h3>
      <p class="u-text-gray">Cube CSSは、コンテナベースのスタイルとユーティリティクラスを組み合わせ、シンプルかつスケーラブルなスタイル設計を行う方法です。設計がしやすく、変更に強い構造です。</p>
    </div>
  </section>
</div>

Reezote

Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。

サービス一覧

Web制作

Cube CSSの歴史

Cube CSSは、コンテナベースのスタイルとユーティリティクラスを組み合わせ、シンプルかつスケーラブルなスタイル設計を行う方法です。設計がしやすく、変更に強い構造です。

DRY CSS (Don’t Repeat Yourself)記法

/* DRY CSSスタイル */
.container {
  background: linear-gradient(180deg, #ff512f, #dd2476);
  padding: 2rem;
  border-radius: 8px;
}

.text-center {
  text-align: center;
}

.text-white {
  color: white;
}

.heading-large {
  font-size: 2rem;
  font-weight: bold;
}

.card {
  background-color: white;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.card-text {
  color: #666;
}

<div class="container text-center">
  <header>
    <h1 class="heading-large text-white">Reezote</h1>
    <p class="text-white">Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。</p>
  </header>
  <section>
    <h2 class="heading-large text-white">サービス一覧</h2>
    <div class="card">
      <img src="https://placehold.jp/150x150.png" alt="Web制作">
      <h3 class="card-title">DRY CSSの歴史</h3>
      <p class="card-text">DRYは「Don't Repeat Yourself」の略で、CSSコードの重複を避け、再利用可能なスタイルを作ることを目的としています。これにより、保守性と可読性が向上します。</p>
    </div>
  </section>
</div>

Reezote

Reezoteは、WEB制作、SEO、MEO、会計DXを提供するソリューションカンパニーです。

サービス一覧

Web制作

DRY CSSの歴史

DRYは「Don’t Repeat Yourself」の略で、CSSコードの重複を避け、再利用可能なスタイルを作ることを目的としています。これにより、保守性と可読性が向上します。

いろいろありますがどうでしたでしょうか。

コーダーの方も自分はBEM記法だったのかなどと気づく方もいるかと思います。
クライアントさんのコーディング規約がある場合はそれに従って柔軟にコーディングできるようになると良いですね。

目的さえ達成できるなら記法はなんでも良いと思いっていますので、
弊社はリクエストがある場合は記法はそれに合わせて実装可能です。

関連ブログ