/* ★★★2026-08-26（K-1180）: 右上の帯まわりの規則 18 本を **ここから外した**。 * ★正本は `assets/css/header-shared.css` ただ 1 本（★あれは **両方のサイトで**読まれる）。 * ★★外してよい根拠（実測）= 突き合わせで **このファイルだけに在る規則は 0 本** * ＝ ★失う見た目が無い。★一方で **17 本中 12 本の宣言が食い違っていた**。 * ★★食い違いが見た目に出る機構 = このファイルは `template_redirect` の中で登録されるので * `header-shared.css`（テーマ読込時に登録）より **後に出る ＝ 勝つ**。 * ★★だから **社員サイトだけ**このファイルの値になり、教室サイトと違って見えていた。 * ★実際に違っていたもの = パンくずの文字 13px/12px ／ 歯車の字の大きさ ／ 押したときの地の色 ／ * メニューの地（#fff と var(--ies-surface)）／ 罫の色（#e4e4dd と #E3E3E3）ほか。 * ★★**戻し方** = `git revert`。★このファイルに書き戻すのではなく、 * ★★足したい規則は `header-shared.css` に足すこと（★2 本目の正本を作らない）。 */ /* ========================================================= * ★★★UI キット（共通部品）— K-1228 / 2026-08-30 * * ★★**相澤さんのご指示（逐語・2026-08-30）**: * 「UI 系の多くは結局**コンポネント化を徹底的に完遂して**、そのあとにそれらのコンポネントを * 使って組み上げないと、結局別途統一する作業やトークン化できているかの調査や * トークンに変換する作業が必要になるよね？」 * 「フォントサイズや背景色などはもちろん**ボタンやバッジ、各種フォームなども * 徹底的なまでにまずは共通部品を作成して**それらを全画面に対して適用していきましょう」 * * ★★**このファイルが部品の唯一の正本である。**★画面ごとの CSS に部品を作らない。 * ★配られ方 = `ies-tokens`（`assets/css/tokens.css`）→ このファイル。 * ★★**ログインしている全員に届く**（★社員・講師・保護者・生徒／両方のサイト）。 * ★根拠 = `functions.php` の K-1222 / K-1223 の節 ＋ `inc/pdash-loader.php:712`。 * * ★★**設計の 5 原則**（★どれか 1 つでも破ったら、それは部品ではなく写しである）: * ① ★**値はトークンからしか取らない。**★生の hex・生の px（角丸・余白・文字）を書かない * ② ★**当たり判定は S(24) / M(32) / L(44) の 3 段だけ**（K-1185）。★40px を作らない * ③ ★**角丸は 4 / 8 / 12 / 16 / 丸薬 の 5 段だけ**（K-1206）。★操作するもの = 8px・カード = 16px * ④ ★**文字は 12px 未満にしない**（`docs/ui/system/acceptance.md`）。★px ではなく rem で書く * ⑤ ★**淡い地の上の文字は 4.5:1 以上**（K-1219）。★満たせない組は専用の `-ink` を使う * * ★★**修飾子は「数」で決めている。**★手書きの形が何か所あるかを測ってから足した * （★物差し = `php tools/nb-scan-ui-shapes.php`）。★★**好みで足していない。** * * ★★**この節が見ないもの**: ★実ブラウザでの位置と寸法（K-1216）。 * ★見本帳 = `bash docs/ui/tools/build-ui-kit.sh`（★明・暗の両方を焼いて測ること）。 * ========================================================= */ /* --- ⓪地の文の大きさ（★このファイルが *全員* に届く唯一の共有 CSS だから、ここに置く） --- * * ★★★**2026-09-06: 保護者の 8 画面だけ地の文が 16px だった。★誰も決めていない値。** * * ★★**相澤さんのご決定** = ★★**14px に揃える**（★他の全画面が 14px）。 * * ★★**なぜ保護者だけ外れていたか（★担当の実測）**: ★14px を宣言している場所は 2 つあるが、 * ★★**保護者にはどちらも配られていなかった**: * | 誰が見る画面 | 14px を配るファイル | 保護者は | * |---|---|---| * | 社員サイト全画面 | `assets/css/base.css:31` | ★**配られない** | * | 教室サイトの社員・講師 | `assets/css/sidebar-shared.css:668` | ★**配られない** | * ★理由 = `functions.php:807` が「社員でも講師でもない人」に対し * ★★**トークンと部品の 2 本だけ配って早期 return する**（K-1222）。 * ★対照 = ★教室サイトの *スタッフ* の画面は 14px（★同じ教室サイトでも役で変わっていた）。 * * ★★**なぜ `body` に書いてよいか**: ★このファイルは **全員に届く**（★社員・講師・保護者・生徒）。 * ★★**他の 2 か所より先に読まれる**ので、★社員・講師の画面では今までどおり * 　`base.css` / `sidebar-shared.css` の宣言が勝つ ＝ ★★**あちらの見え方は 1px も変わらない。** * ★★**変わるのは、どちらも届いていなかった保護者・生徒だけ。** * * ★★**実測（★担当が焼いて測った）**: ★保護者 8 枚すべて 16px → 14px。 * ★★**縦の長さは 8 枚とも ±0px**（★部品化で中身が自前の大きさを持ったため）。 * ★実際に文字が変わる要素は **2 個だけ**。 * * ★★**`:where()` で包む理由**: ★重みを 0 にして、★**部品にも画面にも絶対に勝たせない。** * ★★これは「床」であって「決まり」ではない（★K-1517 と同じ考え）。 */ :where(body) { font-size: 0.875rem; } /* --- ①カード ------------------------------------------------ * ★手書き 270 か所 / 140 種（★実測 2026-08-30）。 * ★修飾子は「余白の段」「面の強さ」「押せるか」の 3 軸だけに絞った。 */ .ies-card { background: var(--ies-surface); border: 1px solid var(--ies-border); /* ★★2026-08-29（K-1191）: 5px → 16px。★本体層の `--cl-radius-lg` と揃えた。 ★同じ「カード」なのに層で角丸が違っていたのを解消する（★11 画面が一度に揃う）。 ★★★2026-08-31（K-1249・相澤さんのご決定）: **16px → 12px。** ★逐語 =「そうだね **12 だと万人受け**しそうだよね」。 ★★**これは測って決まった値ではなく、ブランドの意図で決まった値である**（★下の注記）。 */ border-radius: var(--ies-radius-md); padding: var(--ies-sp-5); box-shadow: var(--ies-shadow-sm); } .ies-card + .ies-card { margin-top: var(--ies-sp-4); } /* ★★★2026-09-01（K-1286）: **太さ 600 を全部 700 にした（13 か所）。★見た目は 1px も変わらない。** * * ★★**理由（★本番で実測）**: ★`header.php:37` が読み込むのは * `Noto+Sans+JP:wght@400;500;700` ——★★**600 は配られていない。** * ★CSS の書体選択規則は「600 が無ければ 600 以上を昇順に探す」ので、★★**700 が選ばれる。** * * ★★**本番 noberu.net で 32px の同一文字列の送り幅を測った値**: * | 太さ | 幅 | * |---|---| * | 400 | 346.19px | * | 500 | 348.20px | * | ★**600** | ★**350.95px** | * | ★**700** | ★**350.95px** ← ★★**完全一致** | * * ★★**＝ 部品が書いていた太さの決定の 44%（59 / 257 か所）が、画面上では実行されていなかった。** * ★モーダルの見出し（600）＝ カードの見出し（700）で、★★**階層の差が消えていた。** * * ★★**なぜ「600 を配る」ではなく「600 を落とす」を選んだか**（★相澤さんのご指示 = * 「数値で視認性がよくなるほうで決めていい」）: * ・★落とす = ★★**見た目が 1px も変わらない**（★いま 700 として描かれているため）。★重さも増えない * ・★配る = ★59 か所の見た目が動き、★書体が 1 つ増える。★しかも 400/500/600/700 は * 　送り幅で **0.58〜0.79% しか違わず**、★★**離れて出たときの絶対判断では見分けられない** * 　（Miller 1956 の 5〜7 水準は、★水準が十分離れている前提） * * ★★**残っている問題（★これは直していない）**: ★見出しの段が **18 / 16 / 14 / 12px** で、 * ★比が **1.125 / 1.143 / 1.167** ——★★**どれも絶対判断の閾値（約 1.2 倍）を下回る。** * ★★**太さで補えないので、階層は大きさだけに委ねられている。** * ★★**作り直すには「12px の太字が日本語で潰れるか」を測る手段が要る。★いま無い**（★本棚 [544]）。 */ .ies-card__title { font-size: 0.875rem; color: var(--ies-text-sub); margin-bottom: var(--ies-sp-2); font-weight: 700; } /* ★2026-08-30（K-1230）: 28px → **24px**。★★**大きな数字が 2 種類あった**（★カード 28 ／ 統計 24）。 * ★しかも 28px は、この repo が宣言している文字の刻み（12/14/16/18/20/24）の**外**だった。 */ .ies-card__value { font-family: var(--ies-font-mono); font-size: 1.5rem; font-weight: 700; color: var(--ies-text); } /* ★余白の段。★手書きで最も多いのは 16px（`p-4`）で、24px の `.ies-card` より 1 段狭い。 */ .ies-card--tight { padding: var(--ies-sp-4); } /* ★★2026-10-22（K-2178 ②11・部品化の続き）: **小さい枠**（余白 縦 4 × 横 8px の段）。 * ★なぜ: 給与明細の「承認済みの事務作業申請」の読むだけの行が `px-2 py-1 border border-border/60 rounded-lg`、編集の箱が `bg-surface/60 border border-border rounded-lg px-2 py-2` の手書き（申請の行の数だけ並ぶ・3 か所）。 * 余白の段が `--tight`（16px）より小さい面の口が無く、角・枠・余白を行ごとに書いていた。 * ★値の出どころ（★新しい値を作っていない）= 手書きの `py-1`（縦 0.25rem）・`px-2`（横 0.5rem）と同じ。`--cl-sp-1` / `--cl-sp-2` は rem で Tailwind の語と同値（個人設定の文字の大きさに追従するところも手書きと同じ）。 * ★面の角（12px）・枠（罫の 100%）・影は `.ies-card` のまま。影を消すなら `.ies-card--plain` を組む。★手書きの角 8px → 12px と枠 60% → 100% は面の約束（K-1249）にそろう差。 * ★並べ方（`flex`・`gap`・`items-*`）は持たない（中身は画面が書く）。★渡さなければ（この class を使わない画面は）出力は 1 バイトも変わらない。 * ★画面に `px-*` `py-*` `border` `border-border/60` `rounded-lg` を残すと、後に読まれる Tailwind が勝つ ＝ 置き換えるときは消す。 * ★小さい枠どうしの間は並べる箱の `space-y-*` が持つ ＝ `.ies-card + .ies-card` の上 16px は小さい枠には付けない（下の 2 行目）。給与明細は読む行と編集の箱（hidden）が交互に並ぶので、編集を開いた行にだけ 16px の隙間が出るのを避ける。並べる箱の `space-y-*` は消さない。 */ .ies-card--mini { padding: var(--cl-sp-1, 0.25rem) var(--cl-sp-2, 0.5rem); } .ies-card + .ies-card--mini { margin-top: 0; } /* ★★★2026-08-31（K-1249・相澤さんのご決定）— **面の角丸は 12px。** * ★★**ご決定の逐語** =「**そうだね 12 だと万人受けしそうだよね**」 * * ★★★**この値は「測って」決まったのではない。★ブランドの意図で決まった。** * ★★**相澤さんのご指摘が、私の枠組みの誤りを直した**（★逐語）: * > 角丸については**視認性というよりも雰囲気**なのではと今思ったんだけどどうなの？ * ★★**そのとおりだった。**★私は「段の間隔」という *二次的な* 基準で 16px を導いていたが、 * ★★**呼んだ 2 体とも「理論は px を決めない」と明言していた**のを、私が読み飛ばしていた。 * * ★★**理論が決めるのは「してはいけないこと」だけ**: * ・★外側 ≥ 内側（★同心に収まらない。★幾何学的に証明できる） * ・★短辺の直線が消えると**バッジと同じ形になる**（★12px なら **短辺 48px 以上**が要る） * * ★★**12px を選んだ根拠（★4 つが独立に指した）**: * ①★**いま実際に最も多い**（★8px:103 / **12px:158** / 16px:119）＝ 変更が最も少ない * ②★**noberu は情報密度の高い業務系**（★社員・講師 39 枚 対 保護者 8 枚） * ③★ただし保護者も使うので 8px は硬すぎる * ④★慣習の整理でも 12px が「最も汎用的・モダンさと機能性のバランス」 * * ★★★**`--s`（小さい面の段）は作らない。**★2026-08-31 に一度作ったが、★**12px なら要らない**—— * ★下限が 64px → **48px** に下がり、★実測（46 個中 64px 未満が 2 個）でほぼ全部が満たす。 * ★★**使われない段は腐る**ので、作らないほうが正しい。 */ /* ★中に表や一覧を敷き詰めるとき（★内側の要素が自分で余白を持つ）。 */ .ies-card--flush { padding: 0; overflow: hidden; } /* ★面を落ち着かせる（★カードの中にカードを置くとき）。 */ .ies-card--plain { box-shadow: none; } /* ★意味のある淡い面。★`--tint` は主要色、`--tint-warn` などは状態。 */ /* ★2026-08-30（K-1229）: 淡色面は 2 つだけ（★緑＝主要 ／ コーラル＝要応答）。★青と琥珀を外した。 */ .ies-card--tint { background: var(--ies-jade-soft); border-color: transparent; box-shadow: none; } .ies-card--tint-accent { background: var(--ies-coral-soft); border-color: transparent; box-shadow: none; } /* ★丸ごと押せるカード（★一覧の行・選択肢）。★当たり判定は中身が作る。 */ .ies-card--hover { cursor: pointer; transition: border-color .15s, box-shadow .15s; } .ies-card--hover:hover { border-color: var(--ies-jade-dark); box-shadow: var(--ies-shadow-md); } .ies-card--hover:focus-visible { outline: 2px solid var(--ies-jade-dark); outline-offset: 2px; } /* ★★★2026-09-06: **押せるカードの段（L = 44px）と、左の縁で種別を示す口を足した。** * * ★★**なぜ**（★実測で見つかった・門 `nb-test-ui-kit` の D）: ★保護者の画面が * ★`min-h-[44px]` と `border-l-[3px] border-l-primary` を **Tailwind で直書き**していた。 * ★★**Tailwind は共通部品より *後* に読まれるので、直書きが部品に勝つ。** * ★★＝ **部品の大きさと形が、画面ごとに黙って上書きされていた。** * * ★`--l` … ★★**押せるカードが指の下限（44px）を割らない**（K-1185。★保護者はスマホで押す）。 * ★★**押せないカードには使わない**（★`--hover` と組で使う）。 * ★`--edge` … ★★**左の縁 3px で種別を示す**（★実例 = 振替のコマ）。 * ★★**色は指定しない。★`--ies-card-edge` を渡す**（★既定は緑）＝ 新しい色を作らずに済む。 * ★★**縁は「別の意味」を足すもの**であって、★飾りではない（★色だけに頼らず、中の文言でも分かること）。 */ .ies-card--l { min-height: var(--cl-tap-l, 44px); } .ies-card--edge { border-left: 3px solid var(--ies-card-edge, var(--ies-jade-dark)); } /* ★★★2026-09-06: **枠の色で「いま注目させたい面」を示す段**（★`--edge` は *左の縁* だけ・こちらは *枠ぜんたい*）。 * ★★**なぜ足したか**: ★画面が `border-primary/30` `border-accent/30`（Tailwind）を * ★★**部品の上に重ねて書いていた**（★実測 = 4 か所）。 * ★★**Tailwind は部品より後に読まれるので、★重ねた 1 語が必ず勝つ**（★門 `nb-test-ui-kit` の D）。 * ★★＝ 同じ意味の指定が 2 つの正本を持つ形。★★**部品の側に段を作って 1 本にした。** * ★★**濃さは「30%」ではなくトークンの淡い色**（★`/30` のような不透明度を新しく作らない）。 * ★★**色だけに頼らないこと**（★上の `--edge` と同じ約束）——★中の文言でも分かるようにする。 */ .ies-card--tone-primary { border-color: var(--ies-jade); } .ies-card--tone-accent { border-color: var(--ies-coral, var(--ies-accent)); } /* ★カードの中の 3 段（★見出し／中身／操作）。★`--flush` と組んで使う。 */ .ies-card__head { display: flex; align-items: center; gap: var(--ies-sp-3); margin-bottom: var(--ies-sp-4); } .ies-card__head-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ies-text); min-width: 0; } .ies-card__head-actions { display: flex; align-items: center; gap: var(--ies-sp-2); margin-left: auto; } .ies-card__body { min-width: 0; } .ies-card__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--ies-sp-2); margin-top: var(--ies-sp-4); padding-top: var(--ies-sp-3); border-top: 1px solid var(--ies-border); } /* ★★2026-10-22（K-2178 ②2・7・15・21・部品化の続き）: **余白ゼロのカード（`.ies-card--flush`）の中の「頭の帯」「足の帯」「本体の余白」**。 * ★なぜ要るか（②7 の「在る `__head` `__body` `__foot` で足りるか」の答え = **足りない・値が違う**）: 上の 3 つは **余白のあるカード用**。 * `__head` は下に 16px あけるだけで **罫も横の余白も持たない**／`__foot` の罫は **内側**（上に 16px あけてから 12px 詰めて罫）でカードの端まで届かない／`__body` は余白を持たない。 * flush のカードの中の頭と足は「カードの端から端までの罫 ＋ 自前の横の余白」で、生徒設定・報告書を書く・報告書の部品・保護者の確認書・講師トップの申請が **それぞれ手書き**していた。 * ★`.ies-card__bar` = **帯**（縦 12 × 横 16px・罫は下に 1 本）。頭の帯が既定。`--foot` = 足の帯（罫が上・頁送りや金額のまとまり）。`--plain` = 罫なし（合計の行など・余白だけ同じ帯にそろえる）。 * ★値の出どころ（★新しい値を作っていない）= 手書きの `px-4 py-3 border-b|border-t border-border`。保護者の確認書（科目の頭・教材・金額・合計）と保護者の予定の月ナビが、この値で **ぴったり**書かれていた綴り（5 か所・使われている数が最多）。 * 余白は rem（`--cl-sp-3` ＝ `py-3`・`--cl-sp-4` ＝ `px-4`・個人設定の文字の大きさに追従）、罫は `--ies-border`（`border-border` が引く `--cl-border` と明暗とも同値）。 * ★割れていた値は最多の側へそろえた（★その画面は見た目が少し変わる）= 横は 16px が 8 か所（保護者の確認書 4・保護者の予定 3・保護者ホーム 1）／ 20→24px（`px-5 sm:px-6`）が 7 か所（報告書を書く・報告書の部品 4・生徒設定 3）。縦は 12px が 8 か所で最多（報告書を書くの 16・生徒設定の 14 は 12 へ）。 * ★★保護者の確認書の約束（`page-guardian-entry.php` の合計の注記）= 科目の小計と合計の **金額の右端を縦にそろえる**。★科目の足（金額）と合計の行の **両方がこの 1 つの横の余白を読む** ＝ 片方だけ動いて右端がずれることがない。 * ★並べ方（`flex`・`gap`・`items-*`・`justify-between`）と地（`bg-surface`・`bg-primary/5`）と罫の色の上書き（`border-primary/30`）は持たない（中身は画面が書く）。 * ★題を持つ頭（`

` ＋ 右の塊）は在る `.ies-sec-head--card-head`（`nb_section_head( variant => 'card-head' )`・縦 16 × 横 24 ／ スマホ 12 × 16）。この帯は題の口を持たない頭と足（並びは画面が書く）。 * ★`--slim` = **縦の余白ゼロの帯**（講師トップの申請フォームの頭 ＝ 題 ＋ 「閉じる」〔押せる高さ 44px〕の 1 行）。縦 0 × 横 12px・罫は 40%（`.ies-rows` の区切りと同じ濃さ）。 * ★高さは中の押しもの 44px ＋ 罫 1px ＝ **45px のまま**。★帯（縦 12 × 横 16px）や行の部品（`.ies-row` 縦 10）で代えると 69px / 65px に伸びるので、別の段にした。`--foot` とは組まない（頭だけ）。 * ★`.ies-card__pad` = **本体の余白 20px**（`p-5`・`--cl-sp-5`）。flush のカードの頭の下に置く本体（個人設定 4・予約の行事 1・生徒設定の本体）。 * ★★帯の横（16px）と本体の横（20px）は **4px ずれる**所がある（旧が帯も 20px でそろっていた生徒設定の 3 枚）。そろえるなら帯の横を 20px に上げる 1 行で足りる（その場合は保護者の 8 か所が 4px 広がる・決めるのは親）。 * ★渡さなければ（この class を使わない画面は）出力は 1 バイトも変わらない。 * ★画面に `px-*` `py-*` `border-b` `border-t` `border-border` `p-5` `sm:px-6` を残すと、後に読まれる Tailwind が勝つ ＝ 置き換えるときは消す（地 `bg-*`・並び `flex`・罫の色 `border-primary/30` は残してよい）。 */ .ies-card__bar { padding: var(--cl-sp-3, 0.75rem) var(--cl-sp-4, 1rem); border-bottom: 1px solid var(--ies-border); } .ies-card__bar--foot { border-bottom: 0; border-top: 1px solid var(--ies-border); } .ies-card__bar--plain { border-bottom: 0; } .ies-card__bar--slim { padding: 0 var(--cl-sp-3, 0.75rem); border-bottom-color: color-mix(in srgb, var(--ies-border) 40%, transparent); } /* ★★2026-10-22（K-2178・部品を足す 2・RB1 ⑭）: `--sub` = **薄い小見出しの帯**（月の見出しなど・縦 6 × 横 16px・罫は下）。 * ★なぜ: 保護者の授業予定の「N 月」の帯が `ies-label ies-label--mute px-4 py-1.5 bg-surface border-b border-border` の手書きだった。帯の既定（縦 12）で寄せると 12px 高くなり、`--slim`（縦 0）では足りない ＝ その間の段が無かった。 * ★値の出どころ（★新しい値を作っていない）= 手書きの `py-1.5`（0.375rem・Tailwind と同じ rem）・`px-4`（`--cl-sp-4`）。罫（下に 1px）は `.ies-card__bar` のまま（手書きの `border-b border-border` と明暗とも同値）。 * ★地（`bg-surface`）は持たない（帯の約束 ＝ 地は画面が書く）。`--foot` `--plain` `--slim` とは組まない（頭の帯の縦の段を選ぶ口）。 * ★渡さなければ出力は 1 バイトも変わらない。★画面に `px-4` `py-1.5` `border-b` `border-border` を残すと、後に読まれる Tailwind が勝つ ＝ 置き換えるときは消す。 */ .ies-card__bar--sub { padding: 0.375rem var(--cl-sp-4, 1rem); } .ies-card__pad { padding: var(--cl-sp-5, 1.25rem); } /* ★★2026-10-22（K-2178・部品を足す 2・RB2 ④⑤）: 本体の余白の段 2 つ（どちらも完全な宣言 ＝ 単独でも `.ies-card__pad` と組んでも同じに出る）。 * ★`--s` = 12px 四方（講師トップの申請フォーム 3 つが `p-3 space-y-3` の手書き）。在る `.ies-card__pad`（20px）に替えなかった訳 = ①頭の帯 `.ies-card__bar--slim` の横が 12px なので本体の左端が帯の題と 8px ずれる ②幅 375px で入力欄の列が狭まり日付欄の字が切れる恐れ（コード読み・未測定）。 * ★`--below-head` = 上 0・左右と下 12px（見出しの口の直下に置く本体 ＝ 週ごとの表の外側・給与明細の内訳）。`--s` と別にした訳 = 上が 0 の形で、`p-3` では上に 12px 増える。 * ★値の出どころ（★新しい値を作っていない）= 手書きの `p-3` ／ `px-3 pb-3`（どちらも `--cl-sp-3` ＝ 0.75rem）。 * ★上を 4px にしたい形（給与明細の内訳 `px-3 pb-3 pt-1`）は `pt-1` を画面に残す（後に読まれる Tailwind が勝つ）。★渡さなければ出力は 1 バイトも変わらない。★置き換えるときは `p-3` ／ `px-3 pb-3` を消す。 */ .ies-card__pad--s { padding: var(--cl-sp-3, 0.75rem); } .ies-card__pad--below-head { padding: 0 var(--cl-sp-3, 0.75rem) var(--cl-sp-3, 0.75rem); } /* ★★2026-10-22（K-2178 ②12・部品化の続き）: **区切り線**（上に罫を 1 本・前の中身との間と罫の下を 12px ずつあける）。 * ★なぜ: 前の中身と下の中身の間に罫を引く手書き `mt-3 pt-3 border-t border-border` が、保護者の確認書・給与明細・シフト希望・報告書・静的ページに別々の濃さ・間で散らばっていた（13 か所）。 * ★値の出どころ（★新しい値を作っていない）= 手書きの `mt-3`（0.75rem）・`pt-3`（0.75rem）・`border-t border-border`（罫の 100%）。余白は rem（`--cl-sp-3`）、罫は `--ies-border`。 * ★割れ = 罫の濃さ（100% が 9・60% が 1・40% が 3）と間（上 12 × 下 12 が 5・20 × 20 が 1・20 × 16 が 2・32 × 24 が 2〔静的ページ〕・ほか 3）。最多の側へそろえた ＝ 差が 4px を超える 8 か所は寄せない。 * ★渡さなければ出力は 1 バイトも変わらない。★画面に `mt-*` `pt-*` `border-t` `border-border` を残すと、後に読まれる Tailwind が勝つ ＝ 置き換えるときは消す。 */ .ies-rule { margin-top: var(--cl-sp-3, 0.75rem); padding-top: var(--cl-sp-3, 0.75rem); border-top: 1px solid var(--ies-border); } /* ★★2026-10-22（K-2178・部品を足す 2・RB1 ②）: **左右 4px の内側の余白**（節の見出しの字の頭にそろえる印）。★字の役（`.ies-label` `.ies-caption`）や並びの行と **掛け合わせて使う軸**（`.ies-num` `.ies-ink-warn` と同じ考え・大きさも色も決めない）。 * ★なぜ: 保護者の授業予定の画面の件数の行・注記・日付の見出しの行が、節の見出し（`.nb-gsec > .ies-sec-head` は左右 4px）の字の頭にそろえるために `px-1` を手書きしていた（`ies-label px-1` ／ `ies-caption px-1` ／ `flex items-center gap-2 px-1`）。 * ★値の出どころ（★新しい値を作っていない）= 手書きの `px-1`（0.25rem ＝ `--cl-sp-1`）。`.nb-gsec > .ies-sec-head` の `padding-inline`（`--ies-sp-1` ＝ 4px）と同じ幅で、個人設定の文字の大きさに追従するところだけ手書きの `px-1` と同じ（rem）。 * ★上下は持たない（`px-1 pt-2` のように上を足す画面は `pt-2` を残す）。★渡さなければ出力は 1 バイトも変わらない。★置き換えるときは `px-1` を消す。 */ .ies-inset { padding-inline: var(--cl-sp-1, 0.25rem); } /* ★★2026-10-22（K-2178・部品を足す 2・RB3）: **丸い点の箇条書き**（`ul` の字の頭に ● を出す・左に 16px）。★字の役（`.ies-caption` `.ies-caption--ink` `.ies-caption--long` ほか）と掛け合わせる軸 ＝ 大きさ・色・行間は持たない。 * ★なぜ: 削除の確認窓・社員の生徒管理・経営の入力の注意書きの一覧が、手書き `list-disc pl-4` を 6 か所に別々に書いていた。 * ★値の出どころ（★新しい値を作っていない）= 手書きの `list-disc`（`list-style-type: disc`）＋ `pl-4`（`--cl-sp-4` ＝ 1rem）。★2 宣言とも要る（Tailwind の preflight が `ul` を `list-style: none; padding: 0` にしているため・preflight を読まない画面では既定の余白が残る ＝ 手書きと同じ）。 * ★渡さなければ出力は 1 バイトも変わらない。★画面に `list-disc` `pl-4` を残すと、後に読まれる Tailwind が勝つが同じ値なので見た目は変わらない ＝ 置き換えるときは消す。 */ .ies-list--disc { list-style-type: disc; padding-left: var(--cl-sp-4, 1rem); } /* ★★2026-10-21 夜（W-642・部品化の続き・相澤さん「部品の足しを今すぐ始めて」）: **画面の下に貼る「足」**（返信欄・送信欄の入れ物）。 * ★なぜ: お問い合わせ（社員）の返信欄の足が 3 か所（読むだけ・返信できる・返信できない）とも `px-5 py-4 border-t border-border bg-white flex-shrink-0`（18 語）の手書きだった。 * ★`.ies-modal__foot` は窓の足（地が `--ies-bg`・横 24px・下の角の丸めを器に任せる）、`.ies-card__foot` はカードの中の足（上に余白＋罫・右寄せ）で、どちらも画面の下に貼る足には合わない。 * ★保護者のお問い合わせの `nb-inq-bar`・講師のシフト希望の下の帯も同じ形の手書き（★この部品へ寄せるのは各画面を触る便・いまは当てていない）。 * ★値の出どころ（★新しい値を作っていない）= 手書きの Tailwind の語と同じ値: `px-5`（横 1.25rem）・`py-4`（縦 1rem）・`border-t border-border`（上に 1px の罫・色は `--ies-border`＝ `border-border` が引く `--cl-border` と明暗とも同値）・ * `bg-white`（地は白・暗い配色は `[data-theme="dark"] .bg-white` と同じ `--ies-surface`）・`flex-shrink-0`（縦に並べた箱の中で縮まない ＝ 長い会話に押されて足が潰れない）。 * ★余白は `--cl-sp-4` / `--cl-sp-5`（rem・個人設定の文字の大きさに追従）。★portal 層の `--ies-sp-5` は 24px で別の値（tokens.css の警告のとおり）なので使わない。 * ★並べ方（中の `flex`・`gap`）は持たない（★中身は画面が書く）。★渡さなければ（この class を使わない画面は）出力は 1 バイトも変わらない。 * ★画面に `px-*` `py-*` `border-t` `bg-white` `flex-shrink-0` を残すと、後に読まれる Tailwind が勝つ ＝ 置き換えるときは消す。 */ .ies-page-foot { flex-shrink: 0; padding: var(--cl-sp-4, 1rem) var(--cl-sp-5, 1.25rem); border-top: 1px solid var(--ies-border); background-color: var(--ies-surface, var(--cl-surface, #fff)); } /* ★★2026-10-22（K-2178・部品を足す 2・RB2 ⑥⑦⑧）: **画面の下に貼りつく帯**（`--fixed`）と、その中身の幅（`__inner`）・帯の高さぶんの空き（`__space`）。 * ★なぜ: 講師のシフト希望の画面の下の帯（固定シフト・月ごとの調整の 2 か所）が `fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-white/95 backdrop-blur-sm` ＋ `max-w-3xl mx-auto px-4 py-3` ＋ `.nbsr-bar-space`（画面専用 CSS）の手書きだった。 * ★上の `.ies-page-foot`（流れの中・不透明・縦 16 × 横 20px）との関係: `--fixed` は **これの修飾子**（組んで使う: `ies-page-foot ies-page-foot--fixed`）。貼りつく・半透明・ぼかしを足し、**余白は 0 にして `__inner` に持たせる**（上の縦 16 × 横 20px を持つと帯が 69 → 77px になり、下の `__space`（4.5rem ＝ 72px）を超えて表の最後の行が帯の下に隠れる）。★上の `.ies-page-foot` を直さない（返信欄の 3 か所が使う）。 * ★値の出どころ（★新しい値を作っていない）= 手書きの `fixed bottom-0 left-0 right-0 z-30`（30）・`border-t`（上の罫は上の `.ies-page-foot` が持つ）・`backdrop-blur-sm`（4px）・`max-w-3xl mx-auto`（48rem）・`px-4 py-3`（`--cl-sp-4` / `--cl-sp-3`）。`__space` の 4.5rem は `pages/shift-request.css` の `.nbsr-bar-space` の根拠のまま（帯は標準 69px ＝ 4.3rem・文字の大きさ「特大」で 90.6px ＝ 4.0rem・167% で 107.9px ＝ 4.0rem ＝ どれも 4.5rem に収まる・押す所の 44px は px なので rem より伸びない）。 * ★★面の色だけは手書きの写しではない（直る側の変化）: 手書きの `bg-white/95` は暗い配色の置き換えが無い（下の `[data-theme="dark"] .bg-white` は `.bg-white` だけで、半透明の `bg-white/95` は別のクラス名）＝ 暗い配色で白いまま帯が浮いていた疑い（コード読み・未測定）。 * 部品は面のトークン `--ies-surface` の 95%（`color-mix`）で作る ＝ 明るい配色は白の 95% で手書きと同じ・暗い配色は面の色（`#1e1e22`）になる。 * ★帯の中の並び（`flex items-center gap-3`）は持たない（中身は画面が書く）。★`__space` は帯の直前に 1 つ置く（流れの中の空き）。 * ★渡さなければ（この class を使わない画面は）出力は 1 バイトも変わらない。★置き換えるときは `fixed` `bottom-0` `left-0` `right-0` `z-30` `border-t` `border-border` `bg-white/95` `backdrop-blur-sm` ／ `max-w-3xl` `mx-auto` `px-4` `py-3` を消す。 */ .ies-page-foot--fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0; background-color: color-mix(in srgb, var(--ies-surface, var(--cl-surface, #fff)) 95%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .ies-page-foot__inner { max-width: 48rem; margin-left: auto; margin-right: auto; padding: var(--cl-sp-3, 0.75rem) var(--cl-sp-4, 1rem); } .ies-page-foot__space { height: 4.5rem; } /* ★★2026-10-21（K-2174・W-304 ②）: カードの中の一覧の行（★旧 = 画面ごとの手書き `px-3〜5 py-2〜4 border-b border-border/40 last:border-b-0 hover:bg-surface` ＝ 余白が 10 通り・約 15 画面）。 * ★値 = 縦 10 × 横 12（相澤さんの窓の答え・絵 docs/ui/screens/部品化-2026-10-21/q1.png）。★撫でたとき = 面に主色 10%（docs/ui/system/hover.md §2 ②・旧の「灰の地へ寄る」向きから変わる）。 * ★`.ies-rows` = 行を並べる箱（`.ies-card--flush` の中など）。子どうしの間にだけ区切り線（★旧 `border-b … last:border-b-0`・`divide-y divide-border/40` と同じ色 = 罫の 40%）。 * ★`.ies-row` = 1 つの行の余白だけ（並びの語 flex・gap・items-* は画面が書く）。押せる行（a・button・`--hover`）だけ撫でた色が付く。★`--l` = 押せる高さ 44px（K-1185）。 * ★画面に `px-*` `py-*` `border-b` `hover:bg-*` を残すと、後に読まれる Tailwind が勝つ ＝ 置き換えるときは消す。★渡さなければ出力は 1 バイトも変わらない。 */ .ies-rows > * + * { border-top: 1px solid color-mix(in srgb, var(--ies-border) 40%, transparent); } .ies-row { padding: var(--cl-sp-2-5, 0.625rem) var(--ies-sp-3); } .ies-row--l { min-height: var(--cl-tap-l, 44px); } /* ★★2026-10-22（K-2178・部品を足す 2・RB1 ⑪⑫⑭）: 行まわりの小さな部品 3 つ。 * ★`.ies-tap--l` = **押せる高さの床 44px だけ**（`.ies-row--l` と同じ値 `--cl-tap-l`）。★なぜ: 行（`.ies-row`）の中の段〈時刻 ＋ 科目 ＋ 状態の札の 1 段など ＝ 状態によって押すものが入る・入らない〉や、行ではない `flex items-center gap-2` の段が、高さをそろえるために `min-h-[44px]` を手書きしていた（保護者ホーム・報告書の部品ほか 5 か所）。 * ★`.ies-row--l` を借りなかった訳 = `.ies-row` の縦 10 × 横 12px の余白まで付いてくる（行でない段に余白が増える）。★`.ies-check` の中には組まない（`.ies-check` の高さ 32px が後ろで勝つ ＝ そこは `.ies-check--l`）。 * ★`.ies-row--tint` = **行の淡い地**（ページの地 `--cl-bg` ＝ 明 #F2F2F2・暗い配色は追従 ＝ 手書きの `bg-surface` が引く先と同じ）。★なぜ: 授業予定の「この先さらに」の足の行が、行と区別する印に `bg-surface` を手書きしていた。★撫でた色（`a.ies-row:hover` ・0,2,1）は地より強い ＝ 手書きのときと同じ順。 * ★`.ies-row__go` = **行の右端の「›」の包み**（縮まない ＋ 控えめの灰 `--cl-muted`）。★なぜ: 行の右端の矢印〈`ri-arrow-right-s-line`〉が `flex-shrink-0 text-muted` の手書きで 7 か所（保護者ホーム 3・講師トップ 3・保護者の報告書 1）。`絵` でも、絵の口の class に渡しても同じ（絵は色を継ぐ）。 * ★名前に `row` を付けたが、置き場は行の中に限らない（保護者ホームの問い合わせの札はカードの中）＝ 値は同じ。 * ★値の出どころ（★新しい値を作っていない）= 手書きの `min-h-[44px]` ／ `bg-surface`（`rgb(var(--cl-bg-rgb, 242 242 242))`）／ `text-muted`（`rgb(var(--cl-muted-rgb, 99 109 126))`）と同じ変数。 * ★3 つとも渡さなければ出力は 1 バイトも変わらない。★置き換えるときは `min-h-[44px]` ／ `bg-surface` ／ `flex-shrink-0 text-muted` を消す。 */ .ies-tap--l { min-height: var(--cl-tap-l, 44px); } .ies-row--tint { background-color: rgb(var(--cl-bg-rgb, 242 242 242)); } .ies-row__go { flex-shrink: 0; color: rgb(var(--cl-muted-rgb, 99 109 126)); } a.ies-row, button.ies-row, .ies-row--hover { transition: background-color .15s; } /* ★2026-10-21 夜（W-643 ②の担当 GHR の気づき・相澤さん「直す」）: 撫でた色はマウスのある画面だけ（★触る画面では押した後に色が残るため・旧の保護者ホームと同じ守り）。★パソコンの見た目は変わらない。 */ a.ies-row:hover, button.ies-row:hover, .ies-row--hover:hover { text-decoration: none; } @media (hover: hover) { a.ies-row:hover, button.ies-row:hover, .ies-row--hover:hover { background: color-mix(in srgb, var(--ies-jade) 10%, var(--ies-surface)); } } /* ★2026-09-24（K-1870）: ボタンの置き場（全画面で共通）。★並びは「やめる → 主」＝ 主が右端。 ★狭い画面で主を上に全幅にするときは `--stack` を足す（★規則は覆いの足 `.ies-modal--sheet` と同じ @media の中に 1 つ）。 */ /* --- ②統計（数字を 1 つ大きく見せる箱） --------------------- * ★`.ies-card__title` / `__value` の組は**使用 0 件**だった（★実測 2026-08-30）。 * ★実際に手書きされているのは「小さい見出し ＋ 等幅の大きな数 ＋ 補足」の 3 段。 * ★★**旧 2 語は消さずに残し**（★他所から参照されうる）、★新しく書くときはこちらを使う。 */ .ies-stat { background: var(--ies-surface); border: 1px solid var(--ies-border); /* ★★2026-08-31（K-1249）: 16px → **12px**（★面はすべて 12px）。 */ border-radius: var(--ies-radius-md); padding: var(--ies-sp-4); box-shadow: var(--ies-shadow-sm); } /* ★文字の刻みは 12 / 14 / 16 / 18 / 20 / 24px（★Tailwind の既定と同じ）。★13px を作らない （★2026-08-30・`impeccable` の検出器が拾った。★親が刻みの外の値を書いていた）。 */ .ies-stat__label { font-size: 0.75rem; font-weight: 700; color: var(--ies-text-mute); } /* ★2026-08-30（K-1230）: 長い値を入れると **30px → 270px** に伸びて器を壊していた。 */ .ies-stat__value { font-family: var(--ies-font-mono); font-size: 1.5rem; font-weight: 700; color: var(--ies-text); line-height: 1.25; min-width: 0; overflow-wrap: anywhere; } .ies-stat__sub { font-size: 0.75rem; color: var(--ies-text-mute); } /* ★★2026-08-30（K-1230）: 名前を **向き（up/down）から 善し悪し（good/bad）へ**変えた。 * ★★**なぜ** = ★「欠席 7 ／ ↓2」を赤で出していた。★**欠席が減ったのに赤**。 * ★向きで名前を付けると、呼ぶ側が「どちらが良いか」を表現できない。 * ★★**色だけに頼らないこと**（★矢印や語を必ず添える）。 */ .ies-stat__value--good { color: var(--ies-jade-dark); } .ies-stat__value--bad { color: var(--ies-coral-ink); } /* ★★2026-10-22（K-2178・部品を足す 2・RB2 ⑨）: `--tight` = **行間を詰める段**（行間 1 ＝ 手書きの `leading-none`）。 * ★なぜ: 講師のシフト希望の画面の下の帯の数（2 か所）は、数の字だけ `.ies-stat__value` を借り（面は借りない）、帯の高さ 69px を保つために `leading-none` を画面に残していた（部品の既定 1.25 だと帯が 2px 伸びる）。 * ★値の出どころ（★新しい値を作っていない）= 手書きの `leading-none`（`line-height: 1`）。★`.ies-stat__value` の後ろに置いた ＝ 同じ詳細度で勝つ。 * ★渡さなければ出力は 1 バイトも変わらない。★置き換えるときは `leading-none` を消す。 */ .ies-stat__value--tight { line-height: 1; } /* Grid */ .ies-grid { display: grid; gap: var(--ies-sp-4); } .ies-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ★★2026-08-30（K-1230）: `1fr` → `minmax(0, 1fr)`。★★**3 列だけがこの形になっていなかった。** * ★実測 = 折り返さない中身を 1 つ入れると 列が **129/129/129 → 498/41/41** に崩れ、 * ★★**器から 192px はみ出した**（★陰性対照 = 同じ操作を 2 列でやると動かない）。 */ .ies-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ies-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 820px) { .ies-grid--3 { grid-template-columns: 1fr; } .ies-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .ies-grid--2 { grid-template-columns: 1fr; } .ies-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ★2026-09-30（担当 ADM の気づき）: 格子の中のカードは「縦に積むための余白」`.ies-card + .ies-card { margin-top: 16px }` を消す。 * ★無いと 1 行の中で 2 枚目以降だけ 16px 下がり、上端がずれる（★設定の一覧が 2026-09-05 に実測して画面の CSS で消していた = settings-hub.css）。 * ★詳細度は同じ (0,2,0) で、この規則が後ろに在るので勝つ。★間は格子の gap が持つ。 */ .ies-grid > .ies-card { margin-top: 0; } /* Button */ /* ★★★2026-08-29 (K-1218): ボタンを **S / M / L の 3 段**にした。 * * ★★**なぜ**: 相澤さんの逐語（2026-08-28・K-1185 に記録）= * 「ボタンも **SML みたいに 3 つのコンポーネント**っていうのかな？ を * **あらかじめ設計しておいて、ケースごとにどれ使おうかな？** みたいにやるといい」 * ★★K-1185 は**当たり判定の 3 段を定義しただけ**で、★**ボタンそのものは 3 段になっていなかった**。 * * ★★**実測（2026-08-29・親）**: * ・`.ies-btn` の使用 = **60 か所**。★旧 padding `10px 18px` ＝ **高さ約 40px** * ＝ ★★**K-1185 が「廃止する」と決めた 40px そのものだった。** * ・★★**`.ies-btn--sm` は 7 ファイル・21 か所で使われているのに、CSS の定義が 0 件** * （★陽性対照 = `--ghost` は 3 件定義が在る）。★★**21 か所の「小さいボタン」は小さくなっていなかった。** * ・★**Tailwind で手書きされたボタンらしき行 = 473 行**（★`px-*` ＋ `py-*` ＋ `rounded` ＋ `bg-*`）。 * ★多い順の padding = `px-3 py-2`(118) / `px-4 py-3`(42) / `px-3 py-1.5`(42) / `px-4 py-2`(32)。 * ★★**＝ 部品が無いのではなく、部品が使われていない**（★60 対 473）。 * * ★★**値の正本は `--cl-tap-s/m/l`（`header.php`）。★ここは控え付きで参照する。** * ★理由 = ★★**`--cl-*` は社員サイト（`templates/page-*.php`）には配られていない** * （★実測 = 見本帳が焼き込む CSS の `:root` に `--cl-*` が 1 つも無い）。 * ★控えを書かないと、社員サイトで**黙って高さが無くなる**。★この作法は * `settings-shell.css` が既に採っている（★「外の層が配っていなくても控えで動く」）。 * * ★★**この節が見ないもの**: ★実ブラウザでの見え方。★見本帳 = `docs/ui/tools/preview/components.html` * （`bash docs/ui/tools/build-dash-preview.sh components` で作り直す）。★★**測ってから反映すること**（K-1216）。 */ .ies-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ies-sp-2); /* ★M（既定・32px）。★K-1185 =「M = 32px … **既定。迷ったらこれ。**」 */ min-height: var(--cl-tap-m, 32px); /* ★余白は刻み（`--ies-sp-*`）に載せる。★高さは min-height が決めるので、 ★padding は「刻みに載っていて、min-height を超えない」ことだけを満たせばよい。 */ padding: var(--ies-sp-1) var(--ies-sp-4); line-height: 1.4; /* ★★★2026-09-13（K-1707）: **押しものの字は折り返さない。** ★★実測（担当 SAL・給与明細の見本）= 幅の足りない升に置いた「上書き」が ★★**3 行・68.8px** に折り返し、★行の高さがその 1 つのために 2 倍以上になっていた。 ★★**押しものは「1 つの的」である** ——★折り返した瞬間、★的の形が中身の字数で決まる （★`acceptance.md` の段 S24/M32/L44 が意味を失う）。 ★★入り切らないときは **親が幅をどうにかする**のが正しい（★器の話）。★部品は折らない。 ★★先例 = `.ies-badge`（:1104）・`.ies-chip`（:1253）は元から `nowrap` を持っている ——★**押しものだけが持っていなかった**（★兄弟の非対称）。 */ white-space: nowrap; border-radius: var(--ies-radius-sm); /* ★★K-1219（2026-08-30）: 地を `--ies-jade`(#00A86B) → `--ies-jade-dark`(#00794E) にした。 ★★**理由は好みではなく数**: ★白文字 × #00A86B = **3.08:1** で 4.5:1 を満たしていなかった。 ★#00794E なら **5.46:1**（★実測・ブラウザ）。★★**新しい色は作っていない**—— ★同じ画面の輪郭ボタンの文字色が元からこの色だった。★相澤さんのご決定（2026-08-30）。 */ border: 1px solid var(--ies-jade-dark); background: var(--ies-jade-dark); color: var(--ies-surface); font-weight: 700; cursor: pointer; transition: background .15s, transform .05s; } /* ★S = 24px。★K-1185 =「**周りを別の当たり判定が隙間なく囲んでいる**場所にだけ」。 ★★単独で置かない（★外すと指が空を切る）。 */ .ies-btn--s { min-height: var(--cl-tap-s, 24px); padding: var(--ies-sp-1) var(--ies-sp-3); /* ★行の高さを 1 にする理由 = 12px × 1.4 ＝ 16.8px に上下の 4px を足すと 24.8px となり、 ★min-height の 24px を **超えてしまう**（★min-height は縮められない）。★実測で確かめた。 */ line-height: 1; font-size: .75rem; /* 12px = 受け入れ条件の下限。★これ以上小さくしない */ font-weight: 700; } /* ★★★`--sm` は **M（32px・基本形と同じ）**。★★S ではない。 * * ★★**2026-08-30 訂正: 親は当初これを `--s`（24px）の別名にした。★誤りだった。** * ★★**別の頭の指摘で判明**（★レビュー担当・2026-08-30）: * ★`--sm` の使用 25 か所には「保存する」「キャンセル」「**選択を完全に削除**」など * ★★**単独で押すボタン**が含まれる。★受け入れ条件（`docs/ui/system/acceptance.md`）は * ★★**S を「周りを別の当たり判定が隙間なく囲んでいる場所にだけ」**と定めており、 * ★★**これらに S を当ててはいけない。** * ★★**親の推論のどこが誤っていたか**: ★「`--sm` は small だから S」と読んだ。 * ★★**実際は「既定より小さく」の意味**だった——★当時の既定は約 47px なので、 * ★★**作者が求めていたのは 32px（いまの M）である。** * ★★**門は全部緑だった。★門は高さを見ていない。**（★K-1216 と同じ形） * * ★いまの扱い = **基本形と同じ M**。★宣言を持たせないことで、`.ies-btn` の値がそのまま効く。 * ★★**新しく書くときは使わない**（★`--s` / なし（M）／ `--l` から選ぶ）。 * ★★**次に触る画面から 1 つずつ振り分けて、この別名を消していく。** */ .ies-btn--sm { /* ★M（基本形と同値）。★宣言を足さない＝ `.ies-btn` の 32px がそのまま効く */ } /* ★L = 44px。★K-1185 =「**単独で押すもの**。主要な確定ボタン・ヘッダーのアイコンボタン」。 */ .ies-btn--l { min-height: var(--cl-tap-l, 44px); padding: var(--ies-sp-2) var(--ies-sp-5); } /* ★★2026-08-29 (K-1218): `--primary` と `:disabled` を**画面ごとの CSS から共通へ引き上げた**。 * ★★**なぜ**（★実測）: `.ies-btn--primary` は **9 ファイル・15 か所**で使われているのに、 * ★★**共通の components.css に定義が 0 件**で、`assets/css/pages/schedule.css` にしか無かった。 * ★★**＝ schedule.css を読み込まない画面では、`--primary` は何もしていなかった** * （★`--sm` が 21 か所で効いていなかったのと**同じ型**。★これで 2 件目）。 * ★★**`:disabled` は基本形に置く。**★どのボタンも押せなくなることが在るのに、 * ★旧実装は `--primary` にしか無かった（★`--ghost` や `--danger` は押せないときの見た目が無かった）。 */ .ies-btn--primary { background: var(--ies-jade-dark); color: var(--ies-surface); border-color: var(--ies-jade-dark); } /* ★★2026-08-30（K-1230）: 押せないときは **役に関係なく同じ平らな灰**にした。 * ★★**旧実装は `opacity:.6` だけ**で、★地の色が役ごとに違うため**薄まり方も違った** * （★白地に重ねた計算値 = 主要 2.6:1 ／ 輪郭 2.6:1 ／ 削除 2.8:1 ／ ★**二次だけ 4.5:1**）。 * ★★**＝ 押せない二次が、押せない主要より読みやすい**という逆転が起きていた。 * ★新実装 = 地 `--ies-surface-alt` ／ 文字 `--ies-text-sub`（★**6.08:1**・読めるが明らかに不活性）。 */ /* ★★★2026-09-19（K-1780）: 押せないものは **地を塗らない・枠と字を 1 段薄くする**（★下の「状態の層」も同じ考え）。 * ★★副地の灰（#F8F8F8）は 2026-09-05 に #F4F4F4 から動いたあと **白の面に 1.06・ページの地に 1.05** ＝ 見えていなかった * （★見える差の床 1.10・`hover.md` §3）。★効いていたのは 枠（3.36 → 1.28）と字（黒 17.04 → 灰）の変化だけ。 * ★★見える灰（罫 `--ies-border`・白に 1.28）で塗る案は、**押せないものが押せるものより重く見える**ので採らなかった * （★反映前の設計レビューの実測 = 見本帳の白の面の上で、目を細めたときの重さ（★代わりの物差し・知覚として検証済みではない） * 押せない 1.37〜1.39 ＞ 押せる二次 1.16・輪郭 1.17 ／ * 押せるようになった瞬間に「軽くなる」逆向き ／ 罫の灰は撫でた地と同じ色 ＝ 1 つの色に 2 つの意味。K-1237 の兆候 * 「押せないボタンが押せるように見える＝明暗比を上げすぎ」の向き。★WCAG は押せない部品を明暗比の対象外にしている）。 * ★値: 地 = 透明（置き場所の地がそのまま見える）／ 枠 = `--ies-border`（白に 1.28・押せる二次 3.36 より薄い）／ * 字 = `--ies-text-mute`（白 5.22 ／ 地 4.67 ／ 暗 4.54 ／ 4.93 ＝ **この repo の字の床 4.5 は守る**・押せる字より必ず薄い）。 */ .ies-btn:disabled, .ies-btn[aria-disabled="true"] { background: transparent; color: var(--ies-text-mute); border-color: var(--ies-border); opacity: 1; cursor: not-allowed; filter: none; } .ies-btn:disabled:hover, .ies-btn[aria-disabled="true"]:hover { background: transparent; border-color: var(--ies-border); color: var(--ies-text-mute); } /* ★2026-08-30（K-1230）訂正: 下の 2 つは、★上の `:disabled` が役に関係なく同じ見た目になったので * **不要になった**。★★消さずに残すのは、★同じ誤りを繰り返さないため（★下の注記が理由を持つ）。 * ★★2026-08-30: 「削除」にも同じ逃げ道が要る（★別の頭の指摘で判明）。 ★★**無いと何が起きるか**: 上の `.ies-btn:disabled:hover`（詳細度 0,3,0）が `.ies-btn--danger:hover`（0,2,0）に**勝つ**ので、★押せない削除ボタンにマウスを乗せると ★★**地が緑・文字が暗い赤**になる（★コントラスト **1.20:1** ＝ ほぼ読めない）。 ★★いま画面には出ていない（★`--danger` の使用 2 か所は `disabled` を立てていない）が、 ★**共通部品の規則そのものが誤っている**ので、次に誰かが押せなくした瞬間に出る。 */ /* ★★2026-09-19（K-1780）訂正: 下の規則は **押せない削除を撫でると、削除の色（淡い赤）に戻していた** * （★詳細度 0,3,0 で上の `.ies-btn:disabled:hover` と同じ・後ろに在るので勝つ）＝「押せないものは何も起きない」（`hover.md` ⑥）に反する。 * ★上の注記の心配（撫でると緑の地）は、いまは `.ies-btn:disabled:hover` が塞いでいる。★ここは押せない姿と同じ値に固定する。 * ★焼いた 85 画面（2026-09-19・幅 1280）では削除のボタンそのものが 0 個 ＝ 画面に出ている所は見つかっていない。 */ .ies-btn--danger:disabled:hover, .ies-btn--danger[aria-disabled="true"]:hover { background: transparent; border-color: var(--ies-border); color: var(--ies-text-mute); } /* ★K-1219: 地が jade-dark になったので、hover はさらに 1 段。★白文字 × #006843 = 6.86:1。 ★★暗いテーマでは向きが逆（明るくする）＝ トークン側で入れ替えてある。 */ .ies-btn:hover { background: var(--ies-jade-hover); border-color: var(--ies-jade-hover); text-decoration: none; color: var(--ies-surface); } .ies-btn:active { transform: translateY(1px); } /* ========================================================================= * ★★★状態の層（K-1237・2026-08-30）— **押せる部品ぜんぶに同じ規則を当てる** * ------------------------------------------------------------------------- * ★★**なぜ在るか（★別の頭が実測した）**: * ・★★**押せなくしたときの文字が読めない部品が 4 つ**あった —— ★半透明にするだけの実装で、 * ★実測 = 札 **2.23:1** ／ タブ **2.23:1** ／ チェック **3.30:1**（★必要 4.5）。 * ★★**同じ直しはボタンに既に入っていた**（★平らな灰 ＝ **6.08:1**）。★**他に配られていなかった。** * ・★★**押した瞬間の手ごたえが、押せる 41 種のうち 29 種に無かった**（★在るのはボタンだけ）。 * ・★★**アイコンボタンは押せなくしても見た目が 1 つも変わらなかった**（★`:disabled` の規則が無い）。 * * ★★**規則（★ここが正本。★新しい押せる部品を作ったら、必ずこの 2 つを持たせる）**: * ①**押せない** = 地を塗らない（透明）＋ 1 段薄い字（`--ies-text-mute`・4.5 以上）＋ 枠を持つものは薄い枠（`--ies-border`） * ＋ 絵だけのものは絵を `--ies-border-strong`（3.0 以上）＋ `cursor: not-allowed`。 * ★2026-09-19（K-1780）に「平らな灰（副地）＋ 沈めた文字（`--ies-text-sub`）」から変えた（★上の `.ies-btn:disabled` の注記）。 * ★★**押せないものは、押せるものより必ず軽く**（★字も絵も、押せるときより明暗比が低い ＝ 門 `tools/nb-test-kit-ground.php` の順位の段）。 * ★★**半透明（`opacity`）で表さない**——★文字と地の両方が薄まり、**読めなくなる**。 * ②**押した瞬間** = `transform: translateY(1px)`。★★**位置だけ**（★色も大きさも変えない）。 * ★「動きを減らす」設定では打ち消す（★下の `prefers-reduced-motion`）。 * ========================================================================= */ .ies-icon-btn:disabled, .ies-icon-btn[aria-disabled="true"], .ies-modal__close:disabled, .ies-chip__x:disabled, .ies-toast__action:disabled, .ies-chip:disabled, .ies-chip[aria-disabled="true"], .ies-tab:disabled, .ies-tab[aria-disabled="true"], /* ★★★2026-09-13（K-1697）: `.is-disabled` も足した。★★**なぜ** = ★予定登録のモーダルの台本が ★`disabled` 属性と **`is-disabled` の両方**で押せないことを表している（★`schedule-modal.js` に 1 か所）。 ★★属性だけを見ていると、★**台本が片方しか付けない経路で見た目が戻らない**（★押せないのに押せそうに見える）。 */ .ies-tab.is-disabled { background: transparent; color: var(--ies-text-mute); border-color: var(--ies-border); opacity: 1; cursor: not-allowed; filter: none; } /* ★撫でても何も起きないこと（★押せないのに反応すると「押せる」と読まれる） * ★★2026-09-19（本棚 [738]）: 閉じる ✕・チップの ✕・知らせの押しものを足した。★3 つとも撫でた地の規則（0,2,0）が * 押せない姿（0,2,0）より後ろに在って勝ち、押せないのに撫でると地が出ていた（★いま押せなくする呼び出しは 0 件＝前もって塞ぐ）。 */ .ies-icon-btn:disabled:hover, .ies-icon-btn[aria-disabled="true"]:hover, .ies-modal__close:disabled:hover, .ies-chip__x:disabled:hover, .ies-toast__action:disabled:hover, .ies-chip:disabled:hover, .ies-chip[aria-disabled="true"]:hover, .ies-tab:disabled:hover, .ies-tab[aria-disabled="true"]:hover, .ies-tab.is-disabled:hover { background: transparent; color: var(--ies-text-mute); border-color: var(--ies-border); } /* ★★2026-09-19（K-1780・反映前レビューの指摘）: **下線型のタブは、撫でると押せる札の姿に戻っていた。** * ★`.ies-tabs--line .ies-tab:hover`（0,3,0・この下の ⑧ に在る）が、上の「撫でても何も起きない」（0,3,0）より後ろに在って勝ち、 * 字が `--ies-text` に濃くなっていた（★予定登録の窓の編集中 = `schedule-modal.js` が `is-disabled` と `disabled` を付ける）。 * ★1 段強い 0,4,0 で、押せない姿のまま固定する。★下線も素のまま（透明）——★上の「撫でても何も起きない」の枠の色（0,3,0）が * 下線型の `border-bottom: 2px solid transparent`（0,2,0）に勝ち、撫でると灰の下線が出ていた（★見本帳を撫でて測った・直す前から在った）。 */ .ies-tabs--line .ies-tab:disabled:hover, .ies-tabs--line .ies-tab[aria-disabled="true"]:hover, .ies-tabs--line .ies-tab.is-disabled:hover { background: transparent; color: var(--ies-text-mute); border-bottom-color: transparent; } /* ★★2026-09-19（K-1780）: **絵だけの押しもの**は、字ではなく絵なので床は 3.0（WCAG 1.4.11）。★押せるときの絵 `--ies-text-mute`（白 5.22）より * 1 段薄い `--ies-border-strong`（白 3.36 ／ 地 3.00 ／ 暗 3.38 ／ 3.67）にする。 * ★旧は押せない絵が `--ies-text-sub`（輝度 0.107）＝ 押せる絵（0.151）より **濃く**、向きが逆だった * （★月送りの押せない矢印が、押せる矢印より濃く見えていた）。★先例 = `pages/avail-grid.css` の週送り（地なし・絵を薄く）。 */ .ies-icon-btn:disabled, .ies-icon-btn[aria-disabled="true"], .ies-modal__close:disabled, .ies-chip__x:disabled, .ies-icon-btn:disabled:hover, .ies-icon-btn[aria-disabled="true"]:hover, .ies-modal__close:disabled:hover, .ies-chip__x:disabled:hover { color: var(--ies-border-strong); } /* ★★2026-10-02（W-032・本棚 [742]・向きは K-1801 の C「押せないものは字の床を緩める」で 9/20 に決定済み）: **押せないタブと、文字だけのボタンの字を、1 段薄く（`--ies-text-mute` → `--ies-border-strong`）。** * ★この 2 つは地も枠も持たない ＝ 押せない合図が字の色しか無く、旧の mute（白 5.22）は押せる字（タブ 6.69・文字だけのボタン 5.46）との差が小さかった。 * ★値 = 既存トークンで 3.0〜4.5 に入るのは `--ies-border-strong`（#8C8C8C）の 1 つだけ ＝ 選ぶ余地が無い（新しい色は作らない）。 * ★手計算 = 白 3.36 ／ ページの地 3.00 ／ 暗い配色 3.37（★mute は 5.22 ／ 4.67 ／ 4.54）。★字の床 4.5 は割る（★WCAG は押せない部品を対象外にしている・床の例外は検査の側へ教える）。 * ★詳細度は上の「状態の層」と同じ ＋ 後ろに置いて勝たせる（★下線型のタブの 0,4,0 も、文字だけのボタンの 0,3,0 も同じ値）。 */ .ies-tab:disabled, .ies-tab[aria-disabled="true"], .ies-tab.is-disabled, .ies-tab:disabled:hover, .ies-tab[aria-disabled="true"]:hover, .ies-tab.is-disabled:hover, .ies-tabs--line .ies-tab:disabled:hover, .ies-tabs--line .ies-tab[aria-disabled="true"]:hover, .ies-tabs--line .ies-tab.is-disabled:hover, .ies-btn--link:disabled, .ies-btn--link[aria-disabled="true"], .ies-btn--link:disabled:hover, .ies-btn--link[aria-disabled="true"]:hover { color: var(--ies-border-strong); } /* ★★チェックとつまみは `` を包む器なので、★**文字の色を直接沈める** （★半透明だと、地まで薄まって文字が読めなくなる）。★2026-09-19（K-1780）: 字は `--ies-text-mute`（状態の層と同じ）。 */ .ies-check--disabled, .ies-check:has(input:disabled) { opacity: 1; color: var(--ies-text-mute); cursor: not-allowed; } /* ★2026-09-19（K-1780）: つまみの溝は部品の形そのもの（★地を消すと溝が無くなる）ので塗る。★押せる「切」の溝 `--ies-border-strong`（3.36）より 1 段薄い `--ies-border`（1.28）＝ 押せるときより軽い。★旧の副地（1.06）では溝の形が見えなかった。 */ .ies-switch input[type="checkbox"]:disabled + .ies-switch__slider { opacity: 1; background: var(--ies-border); border-color: var(--ies-border); cursor: not-allowed; } /* ★2026-09-30（PROG-14 の後・担当 SW の気づき）: 押せないときの指の形を、溝だけでなく札（label）全体へ（★`.ies-check:has(input:disabled)` と同じ向き）。 */ .ies-switch:has(input:disabled) { cursor: not-allowed; } /* ★★★2026-08-30（K-1239・反映前レビューの指摘）: **文章の途中のリンク**。 * ★★**ボタンの部品を文の中に置いてはいけない** —— ★`.ies-btn` は `inline-flex` で、 * ★`--l` は `min-height: 44px`。★★**12px の本文の中に 44px の箱が入ると、 * ★その 1 行だけ行間が跳ね、前後の文とつながって読めなくなる。** * ★★私は一括置換で 7 か所をそうしてしまった（★元は `underline` の素のリンクだった）。 * ★★**文の中のリンクは「箱」ではない。**★下線と色だけを持つ。 * ★当たり判定の 3 段（24/32/44）は**押せる箱**に掛かる規則であり、★文中のリンクには掛からない * （★WCAG 2.2 の 2.5.8 も「文章の中のリンク」を対象外としている）。 */ .ies-inline-link { color: var(--ies-jade-dark); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; } .ies-inline-link:hover { color: var(--ies-jade-hover); } .ies-inline-link:focus-visible { outline: 2px solid var(--ies-jade-dark); outline-offset: 2px; border-radius: var(--ies-radius-xs); } /* ★★★2026-09-05（相澤さんのご指摘・正本 = `docs/ui/system/hover.md`）: * **面を持つ部品は、撫でても下線を出さない。** * * ★逐語 =「面で設計するタイルのデザインだから、マウスオーバーすると枠も出てその枠もブランドカラーの緑に * なるから、十分それだけでマウスオーバーなのはわかる」「**挙動がバラバラなことほど気持ち悪いことはありません**」 * * ★★**なぜ 1 か所にまとめるか**（★実測 2026-09-05）: * ★`assets/css/base.css:36` の `a:hover { text-decoration: underline; }` は詳細度 **(0,1,1)**。 * ★部品側の `text-decoration: none` は素の規則に書かれていることが多く、そちらは **(0,1,0)** ＝ **負ける**。 * ★★**＝ その部品を `` に載せた画面だけで、撫でた瞬間に下線が復活する。** * ★★これを画面ごとに直していたので、同じ直しが repo に **3 か所**バラバラに在った * （`pages/settings-hub.css:58` ／ `pages/settings-shell.css` の追加行 ／ `page-staff-seat-view.php` の `a.sv-toolbar-btn`）。 * ★★**＝ 直し方が 3 通りに割れていた。**★ここに 1 本置いて、以後はここだけを直す。 * * ★★**なぜ `:hover` 側に書くか** = ★`.ies-chip:hover` は **(0,2,0)**（★類名 1 ＋ 擬似クラス 1）で、 * ★`a:hover` の (0,1,1) に **類名の桁で勝つ**。★★読み込み順に頼らない。 * ★（★類名を 2 回書く必要は無い。★`settings-hub.css:58` の `.nbsh-card.nbsh-card` は念のための重ね書きで、 * ★1 回でも勝っている ——★あちらは私の持ち場の外なので触っていない。） * * ★★**`