スタイルシート(CSS)マニュアル・ガイド

reset.css

役割

ブラウザのスタイルをリセット

例

html, body, div, span{margin:0; padding:0; border:0;}

人による編集

しない

AIによる編集

しない

variables.css

役割

カラー・余白等のデザイン設計値を管理

cssの例

:root {--color-main: #000; --space-md: 16px;}

人による編集

する（デザイナー作製したデザインに基づいて設定）。AIが編集した場合は内容を確認する

AIによる編集

する。Figmaのカラー変数と1対1で対応する素の変数を先に置き、意味づけ変数（--color-main等）はそれを参照させる。変数の追加・削除は人に確認する

色・余白のほかに、foundation.css がタグに付けている見出しの装飾（--h3-border-left 等）もこのファイルで管理します。詳しくは次の foundation.css を参照してください。

foundation.css

役割

HTMLタグの基準スタイルを管理

例

a {font-size: 100%; line-height: 1; color: #333; background: #fff;}

人による編集

しない

AIによる編集

しない

2026年7月27日更新：foundation.css がタグに直接付けている装飾は、値を variables.css の変数に出しました。foundation.css そのものは従来どおり編集しません。Figmaでデザインが決まっているサイトは、variables.css 側で装飾を外してください。外し忘れると、デザインにない灰色の縦棒や下線がそのまま出ます。

変数にした装飾は次の4種類です。

• h2 の下に入る3pxの灰色ライン
• h3〜h6 の左に入る灰色の縦棒
• h1 span の文字サイズ50％・行間3倍
• a の下線

装飾を外すときは、variables.css に次のように書きます（リンクの下線は記事本文で必要なため、外すかどうかはサイトごとに判断してください）。

:root {
    --h1-span-font-size: 100%;
    --h1-span-line-height: 1.5;
    --h2-border-bottom: none;
    --h2-padding-bottom: 0;
    --h3-border-left: none;
    --h3-padding-left: 0;
    --h4-border-left: none;
    --h4-padding-left: 0;
    --h5-border-left: none;
    --h5-padding-left: 0;
    --h6-border-left: none;
    --h6-padding-left: 0;
}

デザインなしで内部ページを量産するサイトは、variables.css の既定値のまま使えば従来どおりの見た目になります。

layout.css

役割

枠組みのスタイル

例

main {display: flex;}

ルール

l- プレフィックスがつく

人による編集

する。AIが編集した場合は内容を確認する

AIによる編集

する

component.css

役割

レギュレーションページで紹介されているUI部品のスタイル

例

.c-listing {display: inline-block; padding: 10px 20px; background: #000;}

ルール

c- プレフィックスがつく

人による編集

しない

AIによる編集

しない

2026年7月28日更新：表の見出しセル（dl.c-table dt）の背景色を variables.css の --color-table-th-bg に出しました。既定値は従来と同じ #eee なので、既存サイトの見た目は変わりません。

サイトに地色があるデザインでは、既定のままだと表が背景と同化して読めなくなります。生成りや薄いグレーを全面に敷くサイトでは、必ず variables.css で色を決めてください。

:root {
    --color-table-th-bg: #EEE9D7;
}

component.css そのものは従来どおり編集しません。色を直書きしている箇所が他にも残っているため、同じ問題に当たったら変数に出す形で対応してください（サイト側のCSSで打ち消すと、次のサイトでまた同じ調査が必要になります）。

page-archive.css

役割

エリアページ、業種別ページなど 編集をしない内部ページ用のスタイルを管理

例

.p-area {display: flex;}

ルール

p- プレフィックスがつく

人による編集

しない

AIによる編集

しない

page-agent.css

役割

Agentが編集をする内部ページ用のスタイルを管理します。

例

.p-domain__active {display: inline-block;}

ルール

p- プレフィックスがつく

人による編集

しない

AIによる編集

する（cursorエージェントが自由に編集を進める）

page-main.css

役割

トップページ、会社概要ページ等の人が編集をするページ用のスタイルを管理

例

.p-top {display: display:flex;}

ルール

p- プレフィックスがつく

人による編集

する（微調整）。AIが編集した場合は内容を確認する

AIによる編集

する（主はAI）

vendorフォルダー

外部ライブラリのスタイルシート

役割

fontawesome、colorboxなど、外部ライブラリのスタイルシート

人による編集

しない

AIによる編集

しない

adminフォルダー

管理ページ用のスタイルシート

役割

管理ページ用のスタイルシート

人による編集

しない

AIによる編集

しない

BEMとは

BEMは、Block、Element、Modifierの略で、クラス名の命名規則を定めるものです。保守性の高さから1番多く使われている命名規則です。CursorAgent、Claude Codeなどを用いる際にルールを明確に伝えるため、この方法を用いて運用し、チームで保守性を高めるためにこのルールを遵守し、見やすく、探しやすく、分かりやすいことを優先してください。

Block

ブロック要素

Element

ブロック要素の子要素

Modifier

ブロック要素の状態（修飾子）

具体例

<div class="block__element–-modifier">

BEMの命名方法

• BlockとElementはアンダースコア2つで区切る
• ElementとModifierはハイフン2つで区切る
• ハイフンとアンダースコアは2つ
• Block, Element, Modifierが複数単語になる場合、単語と単語の間はハイフン1つで区切る（例：p-company-president）
• ハイフン1つの場合はElementとModifierの区切りではなく、ただの単語の区切りとして使用

<section class="p-top__about">
<section class="p-top_service">
<div class="p-top__about-container">
<ul class="p-top__about-box">

<section class="p-about__president">
<section class="p-about__history">

<section class="p-term__img">
<section class="p-term__txt">

<section class="p-term__img">
<section class="p-term__txt">

具体例（避けて欲しい例）

以下は、BEMのルールとしては間違いではありませんが、HTMLをシンプルに保つため、以下のような記述は避けてください。

<section class="p-company">
    <div class="p-company__item">
        <h2 class="p-company__item-ttl">ここにタイトルが入る</h2>
        <p class="p-company__item-txt">テキストが入る。テキストが入る。</p>
        <a href="#" class="p-company__item-link p-company__item-link--red">MORE</a>
    </div>
</section>

具体例（推奨する例）

HTMLをシンプルに保つため、クラス指定を最低限にしています。親（section）だけに class を付け、子孫はタグで指定する。

<section class="p-company">
    <div>
        <h2>ここにタイトルが入る</h2>
        <p>テキストが入る。テキストが入る。</p>
        <a href="#">MORE</a>
    </div>
</section>

間違った例

p{
    font-size:16px;
}

h1{
    font-size:40px;
}

正しい例

p{
    font-size:1.6rem;
}

h1{
    font-size:4.0rem;
}

アイコンの種類を参照する

以下はfont awesomeのスクリーンショットです。使いたいアイコンページに行くと、以下の赤線箇所に必要なコードを見つけることができます。

cssに::beforeを使って埋め込む方法

nav ul li::before{
　　content: "\f015";
　　font-family: "Font Awesome 6 Free";
　　font-weight:900;
　　padding-right:1.0rem;
}

cssにabsoluteを使って埋め込む方法

blockquote{
　　position: relative;
}
blockquote::before{
　　content: "\f10d";
　　font-family: "Font Awesome 6 Free";
　　font-weight:900;
　　position: absolute;
　　top:10px;
　　left:10px;
}

iタグを使用して埋め込む方法

<i class="fas fa-sort-down"></i>

複数指定の際の改行

#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;
}

一括指定

.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;
}

.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;    
}