# Pico CSSデザインシステム

## Pico CSSデザインシステムのインターフェースプレビュー

行長とサンプルサイズを変更し、表示モードを切り替えて、ネイティブダイアログでローカルの読書プロファイルを確認できます。

## Pico CSSデザインシステムのデザインリファレンス

Pico CSS 2.1.1の標準コンパイル済みスタイルシート。最初に定義されている色はライトテーマのものです。ルートフォントサイズはレスポンシブに変化するため、remのピクセル値も変わります。どの画面幅でもルートサイズが16pxとは限りません。読みやすい横幅と800pxのレイアウト切り替え位置は、このアプリケーション固有の設定です。

### タイポグラフィとリズム

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --pico-font-family | var(--pico-font-family-sans-serif) | システムサンセリフのフォントファミリーエイリアス。 |
| --pico-line-height | 1.5 | 本文の標準行高。 |
| --pico-font-size | 100% | レスポンシブメディアルール適用前の初期ルートサイズ。 |
| --pico-spacing | 1rem | 基本のスペーシング単位。 |
| --pico-typography-spacing-vertical | 1rem | テキストの垂直方向のリズム。 |
| --pico-grid-column-gap | var(--pico-spacing) | ネイティブの.grid列の間隔。 |
| --pico-border-radius | 0.25rem | コントロールとカードの標準的な角の形状。 |
| --pico-border-width | 0.0625rem | デフォルトの境界線の太さ。 |
| --pico-outline-width | 0.125rem | フォーカスアウトラインの幅。 |
| --pico-form-element-spacing-vertical | 0.75rem | 入力欄とボタンの上下のパディング。 |
| --pico-form-element-spacing-horizontal | 1rem | 入力欄とボタンの左右のパディング。 |
### ライトテーマの主要な役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --pico-primary | #0172ad | リンク／本文の基本色。 |
| --pico-primary-background | #0172ad | プライマリボタンの背景色。 |
| --pico-primary-hover | #015887 | ホバー時の主要テキスト色。 |
| --pico-primary-hover-background | #02659a | ホバー時の主要ボタンの背景色。 |
| --pico-primary-focus | rgba(2, 154, 232, 0.5) | フォーカス時の強調色。 |
| --pico-primary-inverse | #fff | 主要な背景色の上に表示するテキスト色。 |
| --pico-background-color | #fff | ページの背景。 |
| --pico-color | #373c44 | 本文の標準文字色。 |
| --pico-muted-color | #646b79 | セカンダリテキスト。 |
### レスポンシブ時のルートサイズ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Base | 100% | ブラウザーの標準値が16pxの場合は16px。 |
| ≥576px | 106.25% | 同じ前提で17px。 |
| ≥768px | 112.5% | 18px。 |
| ≥1024px | 118.75% | 19px。 |
| ≥1280px | 125% | 20px。 |
| ≥1536px | 131.25% | 21px。 |
### 見出しサイズとアプリケーションのコントロール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| h1 | 2rem / 1.125 | 公式の見出しサイズと行高。 |
| h2 | 1.75rem / 1.15 | 公式の第2レベル見出し。 |
| h3 | 1.5rem / 1.175 | 公式の第3レベル見出し。 |
| Reading measure | 48ch / 62ch / 72ch | 独自に設定した、選択可能な最大行長。 |
| Sample scale | 90–125%; step 5 | 独自の範囲制限。サンプルテキストにのみ適用。 |
| Composition breakpoint | 800px | 2列から縦積みへ切り替える独自のルール。 |
## Pico CSSデザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Pico CSSデザインシステム：小規模なセマンティックHTMLのインターフェース表面

### 小規模なセマンティックHTMLのインターフェース表面

> Picoのスタイルは、すべての段落やフィールド、ボタンに長いコンポーネントクラスのリストを付けるのではなく、使い慣れたHTML要素を整えます。この例では、articleが設定カードとなり、headerとfooterで境界を示し、label内にネイティブのinput/selectコントロールを配置しています。main要素ではcontainerを使っています。これは、クラスレス版ではなく標準のPicoビルドを使っているためです。

そのためPicoは、ブラウザー標準のコントロールで十分な、コンパクトなツールやコンテンツ中心のインターフェースに適しています。ただし、フォームがそれだけでアプリケーションになるわけではありません。読書サンプル、確認用スナップショット、ローカルでの結果表示は完全なJavaScriptが担い、基本的な入力の意味付けはブラウザーが処理します。

関連する仕様を確認する

## Pico CSSデザインシステムのテーマ変数とセマンティックな役割

### テーマ変数とセマンティックな役割

標準のprimaryロールは、あらゆる用途に一律で適用する単一の色ではありません。Picoでは、主要なテキスト色、背景色、ホバー色、フォーカス色、反転色を個別に定義しています。ブランドに合わせてカスタマイズする際も各色の関係性を保てるよう、参照表には実際のライトテーマの定義を掲載しています。読書スペースのラベルには主要なテキスト色を使い、ボタンにはPicoのコンポーネントスタイルがそのまま適用されます。

表示モードの切り替えでは、htmlにdata-themeを設定します。lightまたはdarkを明示すると、自動の配色選択よりもその指定が優先されます。属性を削除すれば、Picoはブラウザーの推奨カラースキームに従います。このデモでは、チェックボックスと画面表示を同期させるため、初期モードを明示しています。独自の主要な配色を導入する場合は、両方のカラースキーム定義を上書きしてください。ライトテーマのルート値だけを変更しても、ダークテーマ全体は設定できません。

関連する仕様を確認する

## Pico CSSデザインシステム：レスポンシブなタイポグラフィはスケール全体を変える

### レスポンシブなタイポグラフィはスケール全体を変える

Picoは複数の画面幅でルートフォントサイズを変更します。初期値は100%で、その後106.25%、112.5%、118.75%、125%、131.25%となります。ブラウザーの標準値が16pxの場合、それぞれ16～21pxに相当します。コンポーネントの余白にもremを使うため、読みやすいレイアウトはテキストとともに広がります。したがって、1remのトークンが常に16ピクセルとは限りません。

サンプルのスライダーが変更するのは、継承したサイズに対する割合としての#sampleのfont-sizeのみです。Picoのルート変数やブラウザーのズーム設定は変更しません。この違いによって設定コントロールは一定に保たれ、ローカルな適用範囲も明確になります。選択した割合はネイティブの出力に表示されます。見出しのサイズはPicoの標準設定を維持します。h1は2rem、h2は1.75remです。

関連する仕様を確認する

## Pico CSSデザインシステム：行長と読書レイアウト

### 行長と読書レイアウト

3種類の行長は、ch単位で独自に設定しています。テキストが列幅を超えるよう強制するのではなく、最大幅を指定します。モバイルでは、サンプルの幅が選択した最大幅より狭くなる場合があります。これはレスポンシブな最大幅の設定による想定どおりの動作です。広い幅を指定しても、横スクロールは必要ありません。

独自のreading-layoutは2つのminmax列で構成され、800px未満では1列に切り替わります。この閾値はこのレイアウト固有のもので、Pico公式のブレークポイントではありません。確認／リセットボタンの組み合わせにはPicoのgridヘルパーを使い、ダイアログのフッターには折り返し可能なflex行を使っています。狭い画面では2列を維持するより、設定パネルの読みやすさを優先します。

関連する仕様を確認する

## Pico CSSデザインシステム：実用的な確認ステップを備えたネイティブの入力検証

### 役立つ確認ステップを備えたネイティブ検証

プロフィール名にはrequiredとminlengthを設定し、対応する補足テキストを添えています。ネイティブの制約検証により、未入力のまま送信することはできません。スクリプトでは前後の空白を取り除いた値も確認するため、スペースだけの入力ではアプリケーションのルールを満たせません。無効なイベントが発生すると、Picoの無効状態のスタイルを適用するためにaria-invalidを追加します。入力を始めると、カスタムエラーと古い無効状態の属性がクリアされます。

セレクトと範囲入力は、ブラウザー標準のコントロールです。読み取りサンプルにはすぐに反映されますが、「プロフィールを確認」を選ぶと、別個の保留中オブジェクトが作成されます。このスナップショットがダイアログに表示するテキストと、ローカルに適用するデータの両方に使われるため、確認内容と実際に適用される値が食い違うことはありません。

1. プロフィール名を空欄のままにして、「プロフィールを確認」を試してください。

2. 名前を入力し、幅を選択して、サンプルの文字サイズを変更してください。

3. スナップショットを確認し、編集を続ける場合はキャンセルするか、ローカルに適用してください。

関連する仕様を確認する

## Pico CSS デザインシステム 本物のモーダル。スタイル付きオーバーレイだけではありません

### スタイル付きのオーバーレイだけではない、本物のモーダル

Picoはdialogとその内容のスタイルを設定しますが、アプリケーションのJavaScriptは提供しません。この例ではHTMLDialogElement.showModalを呼び出します。ブラウザーはダイアログをトップレイヤーに表示し、ドキュメントの残りの部分を操作不能にし、Escapeキーによるネイティブな閉じる操作を提供します。open属性を設定するだけでは異なる非モーダル動作になるため、ここでは使用しません。

ダイアログには、見出しを参照するaria-labelledbyを設定しています。閉じるボタンには明示的なアクセシブルラベルを付け、「編集を続ける」と「ローカルに適用」はそれぞれの動作を説明しています。キャンセル用の2つのボタンは、保存済みの状態を変更せずにcloseを呼び出します。適用すると、保留中のプロフィールが表示テキストに記録され、ダイアログが閉じます。localStorageへの書き込みやリクエストの送信は行いません。

関連する仕様を確認する

## Pico CSS デザインシステム 説明を補足するネイティブの開閉要素

### 補足説明にはネイティブの開閉要素を使う

details/summaryの組み合わせで、サンプルに影響するコントロールと、影響しないコントロールを説明します。この動作はHTML要素に備わっているため、JavaScriptがなくても実際に開閉できます。summaryには内容がわかる質問を記載し、キーボードでも操作できるようにしています。説明は補足情報なので、常時表示される別パネルでメインフォームを中断することはありません。

閉じた状態のスクリーンショットが似ているからといって、detailsをスタイル付きの見出しに置き換えないでください。また、外観の入力欄はrole=switchを付けたtype=checkboxのままにすることで、実際の二者択一の状態を持たせています。Picoのスタイルは意味的な構造に適用されます。操作に関する仕様の多くは、そうした構造自体が担います。

- articleで設定項目を視覚的にひとまとまりの領域として示します。

- detailsとsummaryでネイティブの開閉機能を提供します。

- showModalで開くdialogが、モーダルの確認領域を提供します。

関連する仕様を確認する

## Pico CSS デザインシステム 一度インストールして、例を再現可能な状態に保つ

### 一度インストールして、例を再現可能な状態に保つ

標準パッケージには、コンパイル済みのpico.min.cssが含まれています。これをローカルのassetsフォルダーにコピーし、アプリケーションのレイアウトルールより前に読み込んでから、付属のapp.jsをdefer付きで読み込みます。完全なマークアップ、CSS、スクリプトは上に記載しています。この例にフレームワークのプロバイダー、アイコンフォント、サードパーティ製JavaScriptプラグインは必要ありません。

標準スタイルシートを、container/gridクラスと一貫して使用してください。classlessビルドではレイアウトの前提が異なり、conditionalビルドではスタイルの適用範囲が変わります。マークアップを確認せずに配布版を入れ替えても、単なる最適化にはなりません。既存のサイトにPicoを導入する場合は、要素セレクターが既存のフォームやタイポグラフィのスタイルにどう作用するかを確認してから、全体に適用してください。

関連する仕様を確認する

## Pico CSS デザインシステム マークアップを調整する前に配布版を選ぶ

### マークアップを調整する前に配布形式を選ぶ

この例では、標準配布版とcontainer/gridのヘルパーを使用します。classless配布版ではレイアウトの前提が変わり、conditional配布版ではPicoのスタイルの適用範囲が限定されます。配布版の選択は、ファイルサイズを最適化するために自由に入れ替えるものではなく、統合時の判断として扱ってください。

既存のサイトでは、要素セレクターが既存の見出し、フォーム、記事、ダイアログに及ぼす影響を確認してください。読み取りサンプルのフォントサイズの割合指定は局所的なオーバーライドなので、その範囲内にとどめてください。ルートのスケールを変更すると、Picoのremベースの余白やコントロールにも影響します。ドキュメントのどの部分にテーマを継承させるかを決める際は、appearance属性とアプリケーションの設定コントロールの状態を一致させてください。

関連する仕様を確認する

## Pico CSS デザインシステム コンポーネントの例

### 意味的な構造を備えた、完成形の読書インターフェース

ラベルでコントロールを囲み、articleで設定カードを作り、detailsで開閉機能を設け、dialogに確認内容を表示します。

```
<main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>
```

コードリファレンス

- これらの要素にはPicoがスタイルを適用し、ネイティブの動作はブラウザーAPIが提供します。

- ダイアログはopen属性を追加するのではなく、showModalで開きます。

### 元のプロフィール操作

スタイルの即時反映、ネイティブ検証、安全な確認テキスト、ローカルでの適用とリセット。

```
const $=id=>document.getElementById(id);let pending=null;
function update(){ $('sample').style.maxWidth=$('measure').value+'ch';$('sample').style.fontSize=$('scale').value+'%';$('size-label').value=$('scale').value+'%';document.documentElement.dataset.theme=$('night').checked?'dark':'light';}
for(const id of ['measure','scale','night'])$(id).addEventListener('input',update);
$('preferences').addEventListener('submit',event=>{event.preventDefault();pending={name:$('reader').value.trim(),width:$('measure').value,size:$('scale').value,dark:$('night').checked};if(pending.name.length<2){$('reader').setCustomValidity('Use at least two non-space characters.');$('reader').reportValidity();return;}$('review-text').textContent=`${pending.name}: ${pending.width}-character maximum, ${pending.size}% sample text, ${pending.dark?'dark':'light'} appearance. This will apply only to this preview.`;$('review').showModal();});
$('reader').addEventListener('input',()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid')});$('reader').addEventListener('invalid',()=>{$('reader').setAttribute('aria-invalid','true')});
for(const id of ['close','cancel'])$(id).addEventListener('click',()=>$('review').close());
$('apply').addEventListener('click',()=>{$('saved').textContent=`Applied ${pending.name} locally (${pending.width}ch, ${pending.size}%, ${pending.dark?'dark':'light'}). Reloading clears this profile.`;$('review').close();});
$('preferences').addEventListener('reset',()=>{setTimeout(()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid');$('saved').textContent='No profile applied yet.';update()},0)});update();
```

コードリファレンス

- プロフィールがこのドキュメントの外に送信されることはありません。

- 空白だけの名前は、setCustomValidityで無効にします。

### 読書用レイアウト

明示的なアプリケーションルールで、設定パネルとサンプルを分けています。

```
main.container{max-width:1120px;padding:2rem 1rem}.kicker{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:var(--pico-primary)}.reading-layout{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr);gap:2rem;align-items:start}.reading-copy{padding-top:1rem}#sample{transition:font-size .15s}output{float:right}#review article{max-width:560px}#review footer{display:flex;flex-wrap:wrap;gap:.5rem}#review footer button{flex:1}h1{max-width:20ch}header>p{max-width:65ch}@media(max-width:800px){.reading-layout{grid-template-columns:1fr;gap:1rem}}
```

コードリファレンス

- 800pxのブレークポイントとch単位は、独自に選定した値です。

## Pico CSS デザインシステム エージェントの設定

### 実装の出発点

上記の例全体を、body、style.css、app.jsとして保存してください。単独で表示できるプレビューには、同じ公式のCSSとアプリケーション独自のコードをインラインで含めています。ネイティブのdialogAPIをサポートする最新のブラウザーを使用します。HTMLラッパーにはbodyのマークアップ全体が含まれます。ここで参照しているファイル名で、付属の操作処理とCSSの例を保存してください。

```
<!-- npm install @picocss/pico@2.1.1
mkdir -p assets
cp node_modules/@picocss/pico/css/pico.min.css assets/pico.min.css -->
<!doctype html>
<html lang="en" data-theme="light">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Reading room</title>
<link rel="stylesheet" href="assets/pico.min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>
</body>
</html>
```

### あなたのプロジェクト向けプロンプト

```
標準スタイルシート、意味的なarticle、ネイティブフォーム、detailsによる開閉機能を使ったPico 2.1.1の読書プロフィール例を使用します。文字サイズと行幅の変更はサンプル内に限定し、外観のチェックボックスをdata-themeと同期させてください。プロフィール名は前後の空白を取り除いて検証し、確認用スナップショットを作成してdialog.showModalで開きます。キャンセル時に適用してはいけません。適用するのは、スナップショットに記録したローカルプロフィールのみです。ネイティブフォームの既定値に戻した後でリセットしてください。サンプルの文字サイズ設定で置き換えず、Picoのレスポンシブなルートスケールを維持します。
```

## Pico CSS デザインシステム 出典と適用範囲

Pico CSS 2.1.1。標準トークンは、元の読みやすいレイアウトやプロフィールのルールとは分離されています。永続化やリモートサービスは実装されていません。

- CSS変数 実際のスタイルと色の定義。

- タイポグラフィ 見出しと文字組みの意味付け。

- フォーム ネイティブ要素によるフォーム構成。

- モーダル ダイアログのスタイルとアプリケーション動作の境界。

- グリッド レスポンシブレイアウト用ヘルパー。

- アコーディオン Details と summary による開閉表示。

## Pico CSS デザインシステム関連リソース

### Preline UI

タブを連動させたネイティブのPrelineセッションプランナー。入力数値を制限するプラグイン、インストール済みのテーマエイリアス、実際のTailwindスケールを備え、選択したセッションに応じてローカルの教材費見積もりが更新されます。

### Prime UI

Prime UI エコシステムをバージョン固定で実装した PrimeVue の例です。Aura テーマのドキュメントツリーで、実際のプリセット参照、展開状態の制御、絞り込み、選択、ローカルでのピン留めに対応します。

### Pure CSS

Pure CSS は、ウィジェットの実行環境を必要としない、グリッド、フォーム、ボタン、メニュー、テーブル向けのモジュール式スタイルシートです。このガイドでは、任意のレスポンシブグリッドモジュールとネイティブのセマンティック要素を、絞り込み可能な備品カタログで組み合わせる方法を紹介します。並べ替えと選択の動作は明示的に実装しています。


- [実装リファレンス](https://picocss.com/docs/forms)
- [ソース](https://picocss.com/docs/css-variables)
- [関連する仕様を確認する](https://picocss.com/docs/forms)
- [関連する仕様を確認する](https://picocss.com/docs/css-variables)
- [関連する仕様を確認する](https://picocss.com/docs/typography)
- [関連する仕様を確認する](https://picocss.com/docs/grid)
- [関連する仕様を確認する](https://picocss.com/docs/modal)
- [関連する仕様を確認する](https://picocss.com/docs/accordion)
- [コードリファレンス](https://picocss.com/docs/modal)
- [コードリファレンス](https://picocss.com/docs/forms)
- [コードリファレンス](https://picocss.com/docs/grid)
- [CSS変数 実際のスタイルと色の定義。](https://picocss.com/docs/css-variables)
- [タイポグラフィ 見出しと文字組みの意味付け。](https://picocss.com/docs/typography)
- [フォーム ネイティブ要素によるフォーム構成。](https://picocss.com/docs/forms)
- [モーダル ダイアログのスタイルとアプリケーション動作の境界。](https://picocss.com/docs/modal)
- [グリッド レスポンシブレイアウト用ヘルパー。](https://picocss.com/docs/grid)
- [アコーディオン Details と summary による開閉表示。](https://picocss.com/docs/accordion)