スタイルシート(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に色についてのアドバイスをもらうのはOK

AIによる編集

しない

foundation.css

役割

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

例

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

人による編集

しない

AIによる編集

しない

layout.css

役割

枠組みのスタイル

例

main {display: flex;}

ルール

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

人による編集

する

AIによる編集

しない

component.css

役割

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

例

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

ルール

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

人による編集

しない

AIによる編集

しない

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）

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