目次
更新日：2025年6月13日
PitaCSS Classレス（クラスレス）
概要
PitaCSSのClasslessスタイルは、HTMLタグに直接適用されるスタイルです。クラス名を一切書かずに、HTMLタグだけで見やすいドキュメントが完成します。
📄 基本構造・レイアウト
HTML・Body（base.css）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- body内のコンテンツ -->
</body>
</html>
適用されるスタイル:
- リセットCSS
- 全体のスタイル
- 改行:
word-break: break-word - スムーススクロール:
scroll-behavior: smooth -webkit-プレフィックスでのスクロールバーカスタマイズ(ブランドカラーが適応されます)
メインレイアウト（main.css）
<div class="container">
<aside>
<!-- サイドナビゲーション -->
</aside>
<div class="content">
<main>
<!-- メインコンテンツ -->
</main>
</div>
</div>
レスポンシブ対応:
- 1250px以上: サイドバー + メインコンテンツ
- 1250px以下: ハンバーガーメニュー + メインコンテンツ
📝 テキスト・見出し
見出し（Headings）
<h1>メインタイトル</h1>
<h2>セクションタイトル</h2>
<h3>サブセクション</h3>
<h4>詳細見出し</h4>
<h5>補足見出し</h5>
<h6>最小見出し</h6>
スタイル特徴:
- h1: 背景色 + 左ボーダー（アクセント）
- h2: 下ボーダー線
- h3-h6: シンプルなボールド
段落
<p>段落テキストです。日本語の読みやすさを重視した行間設定になっています。</p>
特徴:
- 行間:
line-height: 2.2（日本語最適化）
テキスト(small)
<small>補足情報や注釈に使用</small>
特徴:
- 最小サイズ(13px固定)
📋 リスト（Lists）
基本リスト
<!-- 箇条書きリスト -->
<ul>
<li>リストアイテム1</li>
<li>リストアイテム2
<ul>
<li>ネストしたアイテム</li>
<li>ネストしたアイテム2</li>
</ul>
</li>
<li>リストアイテム3</li>
</ul>
<!-- 番号付きリスト -->
<ol>
<li>順序付きアイテム1</li>
<li>順序付きアイテム2</li>
<li>順序付きアイテム3</li>
</ol>
特徴:
- ネスト対応: 自動的に階層表示
🖼️ メディア要素
画像（Images）
<img src="image.jpg" alt="説明テキスト">
自動適用される特徴:
- レスポンシブ
- オブジェクトフィット:
object-fit: contain
水平線（Horizontal Rule）
<hr>
スタイル: ブランドカラーの細線
📊 テーブル（Tables）
基本テーブル
<table>
<thead>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
<th>ヘッダー3</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
<tr>
<td>データ4</td>
<td>データ5</td>
<td>データ6</td>
</tr>
</tbody>
</table>
<!-- 補足情報 -->
<table>
<tr>
<td>項目</td>
<td>値
<small>補足説明</small>
</td>
</tr>
</table>
自動適用される機能:
- ヘッダー強調: 背景色で区別
- 縞模様: 偶数行に背景色
- レスポンシブ: 768px以下で横スクロール
- small要素をtable要素の中に入れると、テーブルに適切なスタイルになります
レスポンシブにするために、テーブル要素自体をコンテナで囲う必要はありません。
テーブル要素にthead,tbody 要素があれば自動的にレスポンシブになります。
💬 引用・詳細
引用（Blockquote）
<blockquote>
<p>引用文です。重要な文章や他者の言葉を引用する際に使用します。</p>
<p>複数段落の引用も可能です。</p>
</blockquote>
スタイル: 背景色 + 左ボーダーアクセント(ブランドカラー)
詳細・折りたたみ（Details）
<details>
<summary>クリックして詳細を表示</summary>
<p>ここに詳細内容が表示されます。</p>
<p>複数の段落も含められます。</p>
</details>
<details open>
<summary>最初から開いている詳細</summary>
<p>open属性で初期状態で開いた状態にできます。</p>
</details>
インタラクティブ機能:
- 矢印アイコン: 三角形アイコンがアニメーションします
- アクセシブル: キーボード操作対応
💻 コード・技術要素
インラインコード
<p><code>const variable = "value";</code> のようにコードを表示できます。</p>
コードブロック
<pre><code>function example() {
console.log("Hello, World!");
return true;
}</code></pre>
レスポンシブにするために、コードブロック要素自体をコンテナで囲う必要はありません。
コードブロック要素に<code> 要素があれば自動的にレスポンシブになります。
キーボード入力
<p><kbd>Ctrl</kbd> + <kbd>C</kbd> でコピーできます。</p>
<p><kbd>⌘</kbd> + <kbd>V</kbd> で貼り付けできます。</p>
スタイル特徴:
- コード: 背景色で区別、固定幅フォント
- kbd: キーボードキー風の立体的デザイン
📝 フォーム要素
基本フォーム
<form>
<label for="name">お名前</label>
<input type="text" id="name" placeholder="山田太郎">
<label for="email">メールアドレス</label>
<input type="email" id="email" placeholder="[email protected]">
<label for="message">メッセージ</label>
<textarea id="message" rows="4" placeholder="お問い合わせ内容"></textarea>
<label for="category">カテゴリ</label>
<select id="category">
<option value="">選択してください</option>
<option value="general">一般</option>
<option value="support">サポート</option>
</select>
<button type="submit">送信</button>
<input type="submit" value="送信（input版）">
</form>
自動適用される機能:
- フォーカス状態: ブランドカラーで強調
- バリデーション: エラー時は赤色表示
- レスポンシブ: 幅100%で自動調整
📊 プログレスバー
基本プログレス
<!-- 値指定プログレス -->
<progress value="70" max="100"></progress>
<!-- ストライプアニメーション -->
<progress value="50" max="100" class="stripe"></progress>
<!-- 不確定プログレス（値なし） -->
<progress></progress>
自動アニメーション:
- ストライプ: 斜線パターンが流れる
- 不確定: 左右に移動するアニメーション
🔘 ボタン
基本ボタン
<button>標準ボタン</button>
<button disabled>無効ボタン</button>
自動適用される効果:
- ホバー効果: 上に浮き上がる
- 無効状態: 半透明で操作不可
- 円角: 完全な円角デザイン
🔗 リンク
基本リンク
<p>こちらは<a href="https://example.com">外部リンク</a>です。</p>
<p><a href="#section1">ページ内リンク</a>でセクションに移動できます。</p>
<p><a href="mailto:[email protected]">メールリンク</a>もサポートしています。</p>
自動適用される状態:
- 通常: 水色
- 訪問済み: 紫色
- ホバー: 下線表示
- アクティブ: グレー色
📄 セクション
<section>
<h2>セクションタイトル</h2>
<p>セクションの内容です。</p>
</section>
マージンが上下につきます。それだけです。
ヘッダー
<header>
<div class="logo-container hide-max1250">
<!-- ロゴやテキストなど -->
</div>
<div class="logo-container-responsive hide-min1250">
<!-- ロゴやテキストなど -->
</div>
</header>
ヘッダーのスタイル:
- 背景色: 白
- シャドー付き
- ロゴコンテナ付き
logo-container-responsiveは画像の大きさが小さくなります
フッター
<footer>
<small>©2025 PitaMai Technorogy</small>
</footer>
フッターのスタイル:
- 背景色: 白
- 上ボーダー: ブランドカラー
- small要素: 区切り線付きで中央配置
PitaCSS 利用可能なCSS変数リファレンス
PitaCSSでは、テーマやデザインを柔軟にカスタマイズできるよう、多数のCSSカスタムプロパティ（変数）が用意されています。
ここでは、var.css で定義されている主な変数とその用途をまとめます。
PitaCSS 利用可能なCSS変数
| 変数名 | 用途 | デフォルト値 |
|---|---|---|
--brand-primary-base | メインブランドカラー（ベース） | #8bc170 |
--brand-primary | メインブランドカラー（透過調整） | color-mix(in srgb, var(--brand-primary-base) 80%, transparent) |
--brand-secondary-base | サブブランドカラー（ベース） | #4d663e |
--brand-secondary | サブブランドカラー（透過調整） | color-mix(in srgb, var(--brand-secondary-base) 80%, transparent) |
グレースケール
| 変数名 | 用途 | ライトモード | ダークモード |
|---|---|---|---|
--gray-primary | メイン背景色 | #ffffff | #0f172a |
--gray-secondary | サブ背景色 | #f8f9fa | #1e293b |
--gray-tertiary | 装飾用背景色 | #eceff1 | #334155 |
テキストカラー
| 変数名 | 用途 | ライトモード | ダークモード |
|---|---|---|---|
--text-primary | メインテキスト | #333333 | #f1f5f9 |
--text-secondary | サブテキスト | #666666 | #cbd5e1 |
--text-muted | 補助テキスト | #999999 | #94a3b8 |
--text-primary-inverse | 逆配色用メインテキスト | #f1f5f9 | #333333 |
--text-secondary-inverse | 逆配色用サブテキスト | #cbd5e1 | #666666 |
--text-muted-inverse | 逆配色用補助テキスト | #94a3b8 | #999999 |
--white | 明示的な白 | #ffffff | #ffffff |
--dark | 明示的な黒 | #222 | #222 |
ボーダー
| 変数名 | 用途 | ライトモード | ダークモード |
|---|---|---|---|
--border-primary | メインボーダー | #e5e7eb | #475569 |
--border-secondary | サブボーダー | #f3f4f6 | #334155 |
ステータスカラー
| 変数名 | 用途 | ライトモード | ダークモード |
|---|---|---|---|
--status-info | 情報 | #3b82f6 | #60a5fa |
--status-success | 成功 | #10b981 | #34d399 |
--status-warning | 警告 | #f59e0b | #fbbf24 |
--status-error | エラー | #ef4444 | #f87171 |
--status-info-light | 情報（薄） | #dbeafe | #1e3a8a20 |
--status-success-light | 成功（薄） | #d1fae5 | #14532d20 |
--status-warning-light | 警告（薄） | #fef3c7 | #92400e20 |
--status-error-light | エラー（薄） | #fee2e2 | #7f1d1d20 |
リンクカラー
| 変数名 | 用途 | ライトモード | ダークモード |
|---|---|---|---|
--link-primary | 通常リンク | #1570d4 | #60a5fa |
--link-hover | ホバー時 | #1e40af | #93c5fd |
--link-active | アクティブ時 | #7d7d7d96 | - |
--link-visited | 訪問済み | #a15ccc | #c084fc |
シャドウ
| 変数名 | 用途 | 値 |
|---|---|---|
--shadow-sm | 小さな影 | 0px 4px 5px -3px rgba(0, 0, 0, 0.3), -1px -3px 5px -3px rgba(0, 0, 0, 0.25) |
--shadow-md | 中くらいの影 | 0px 4px 8px rgba(0, 0, 0, 0.15) |
--shadow-lg | 大きな影 | 0px 2px 10px -3px rgba(0, 0, 0, 0.3) |
📝 タイポグラフィ
| 変数名 | 用途 | 値 |
|---|---|---|
--font-family | フォントファミリー | "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "ヒラギノ角ゴシック", "system-ui" |
--text-xs | 極小テキスト | 13px |
--text-sm | 小テキスト | 15px |
--text-base | 標準テキスト | clamp(16px, 2.08vw, 18px) |
--text-lg | 大きめテキスト | clamp(20px, 2.604vw, 25px) |
--text-xl | 特大テキスト | clamp(23px, 2.99vw, 30px) |
--text-2xl | 最大テキスト | clamp(30px, 3.89vw, 40px) |
📝 備考
- 変数は全て
:rootでグルーバルに定義されているため、どのCSSからでも参照可能です。 - テーマ切替は
data-theme属性またはシステム設定で自動反映されます。 color-mix関数を使用し、濃いめなブランドカラーを設定しても柔らかい色になります。- 日本語文書に最適なフォント・行間設計になっています。