1ファイルCSS設計 - いまさらながら SIer向けフレームワークを自作した（10年ぶり3回目） #008

Posted at 2026-02-22

はじめに

前回までは Java / JavaScript 側の設計を中心に紹介してきましたが、今回は CSS の話です。

「CSSフレームワーク導入したのに、オリジナルデザインを当てようとしたらクラスの上書きがうまくいかず、結局時間がかかった」——そんな経験はないでしょうか。

Java や JavaScript と違い、CSS は 「正解が1つではない」 領域です。デザインはプロジェクトごとに個性が出るため、大規模フレームワークを導入すると「作者が決めたデフォルト」を引き継ぐことになり、独自デザインを適用しようとするたびに上書きとの戦いが始まります。

CSS設計には2つのアプローチがあります。

大きく始めて、使わないものを無視し、合わないものを上書きする（Bootstrap、Tailwind CSS など）
小さく始めて、自分たちのデザインを積み上げる

SIcore では後者を選びました。業務アプリケーションに必要な画面スタイルを 1ファイル（約400行）の CSS でカバーしています。この記事ではその設計の意図を解説します。

なぜ「最小から始める」のか

CSS フレームワークを導入する最大のコストは、コードの量ではなく 「何がどこにあるかを覚えること」 です。加えて CSS には Java や JavaScript にはない固有のコスト、「他人のデザイン判断を引き継ぐコスト」 があります。

Bootstrap のボタンの角丸が 4px か 6px かは、あなたのプロジェクトには無関係な判断です。しかしそれが「デフォルト」として存在し、変えたければ !important や特異度の高いセレクタで上書きする必要があります。Tailwind CSS はユーティリティクラスの組み合わせなので上書きの概念は薄いですが、カラーやサイズを変えるには tailwind.config.js を編集してビルドが必要です。Bootstrap は上書き、Tailwind はビルド——アプローチは違っても、どちらも「フレームワークの都合に合わせる作業」が発生します。

最小から始めれば、この問題は起きません。

① 学習コストが先行しない — 必要な機能を使いながら少しずつ全体を把握できます。
② すべてのデザイン判断が自分たちのもの — 「使っていないのに上書き」が発生しません。
③ AI が扱いやすい — 全量を読んでから HTML を生成できるサイズで、不要なクラスの混入リスクがありません。
④ ビルドなし・依存なし — Sass、PostCSS、Tailwindのようなビルド環境は不要です。エディタとブラウザの開発者ツールだけで完結します。

1ファイルで何をカバーしているか

「最小から始める」と言っても、業務アプリに必要な要素はすべてカバーしています。onepg-base.css 1ファイルで、以下をカバーしています。

機能	内容
CSSリセット	box-sizing統一、フォント継承
ページレイアウト	ヘッダー・フッター固定、メインコンテンツ可変
グリッドレイアウト	12分割カラム
レスポンシブ	PC・タブレット・スマートフォンの3段階
フォーム入力要素	テキスト、セレクト、チェックボックス、ラジオボタン、ボタン
テーブル	罫線、ストライプ
ユーティリティ	テキスト配置、警告色、リンクボタン
項目ハイライト	警告・エラーの背景色

Bootstrap は約1万行、Tailwind CSS はビルド後でも数千行ですが、業務アプリに必要な機能だけを積み上げると 約400行 で収まります。

12分割グリッドレイアウトとレスポンシブ対応

item-head にラベル、item-body に入力要素を入れることで、PC表示でラベルと入力要素が横並びになります。grid-col-N の N の合計が 12 になるように配置するだけで、Bootstrap でおなじみの12分割レイアウトが組めます。

<div class="grid-row">
  <div class="grid-col-3">
    <div class="item-head"><label>氏名</label></div>
    <div class="item-body"><input type="text" name="user_nm"></div>
  </div>
  <div class="grid-col-3">
    <div class="item-head"><label>出身国</label></div>
    <div class="item-body"><select name="country_cs">...</select></div>
  </div>
  <div class="grid-col-6">
    <div class="item-head"><label>Email</label></div>
    <div class="item-body"><input type="text" name="email"></div>
  </div>
</div>

このグリッドは2つのメディアクエリで、PC・タブレット・スマートフォンの3段階にレスポンシブ対応しています。

PC（横並び）：ラベルと入力要素が横に並び、上記例だと3カラム構成で表示されます。

|     grid-col-3    |    grid-col-3   |              grid-col-6               |
|   氏名 [________] | 出身国 [______▼] |  Email [_______________________]      |

タブレット（列ごとに縦並び）：各カラムの分割幅は維持されたまま、カラム内のラベルと入力要素が縦並びになります。

| 氏名       | 出身国     | Email                     |
| [________] | [______▼] | [_______________________] |

スマートフォン（完全縦並び）：すべてのカラムが全幅になり、1カラムの完全縦並びに変わります。

氏名
[________]
出身国
[______▼]
Email
[_______________________]

フォーム入力要素の統一スタイル

業務アプリでは、テキストボックス・セレクトボックス・ボタンなどのフォーム要素が大量に並びます。これらの 高さ・枚線・角丸・余白・フォーカス表示 を統一して画面全体の見た目を整えています。非活性・フォーカス状態のスタイルも統一されているため、個別の指定は不要です。

バリデーションエラー時の項目ハイライトも JavaScript フレームワークにより自動で行われます。各クラスの詳細は CSSクラスリファレンスをご確認ください。

CSS定数による一括カスタマイズ

全てのスタイル値（色・サイズ・余白など）がCSS定数（:root）に集約されています。案件ごとのカラースキーム変更はこの定数定義を変更するだけです。命名規則は --onepg-base--カテゴリ--用途 で統一されているため、何がどこに効くかが命名で判断できます。定数の詳細は CSSクラスリファレンスをご確認ください。

おわりに

実際に業務アプリで使うスタイルを洗い出してみると、400行で意外と足ります。

デザインはプロジェクトごとに個性が出る領域です。Java や JavaScript 以上に、CSS は 「最小から始める」ことに意味がある と考えています。小さく始めて必要な分だけ育てる——この姿勢が、特に SI の現場・AI 開発では有効です。

400行の CSS、シンプルなクラス名、ビルド不要。一度全量を読んでみていただけると、「これなら簡単にカスタマイズできる」と実感していただけるはずです。

実際のファイルはこちらで公開しています。ぜひ一度目を通してみてください。

CSSファイル（グリッドのメディアクエリを含む）: https://github.com/sugaiketadao/sicore-ja/blob/main/pages/lib/css/onepg-base.css
CSSクラスリファレンス: https://sugaiketadao.github.io/sicore-ja/11-api-references/02-cssdoc/

SIcoreフレームワークリンク

実装コードと資料はすべてこちらで公開しています。

GitHub: https://github.com/sugaiketadao/sicore-ja
サンプル画面の確認方法: https://github.com/sugaiketadao/sicore-ja#%EF%B8%8F-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%BB%E9%9D%A2%E3%81%AE%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95---vs-code
AI開発の始め方: https://github.com/sugaiketadao/sicore-ja#-ai%E9%96%8B%E7%99%BA%E3%81%AE%E5%A7%8B%E3%82%81%E6%96%B9

読んでいただきありがとうございました！
❤いいね！をしていただけると励みになります。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up