tak-dcxi

CSS Responsive Rules

目的

レスポンシブ実装の判断基準を明確にし、不要なブレイクポイントとコード量を最小化する。 CSS はブラウザへの「提案」であり、厳密な命令ではない。ブラウザに委ねられる仕事は委ねる。

基本方針: エスカレーション順序

レスポンシブ対応は以下の優先順序で検討する。上位で解決できるなら下位は使わない。

tak-dcxi

タイポグラフィ

font-family

• フォントは Web サイトの印象に直結するため、一概にこれが良いとは言えない。
• 特にこれと言った指定がされていない場合は font-family: sans-serif のみで良い。
  • Windows 11/10 では 2025 年のアップデートにより Noto Sans JP が標準搭載された。色々と問題があった游ゴシックの呪縛から解放されたのは大きい。
  • Android はメーカーにより削除されている可能性はあるが、そうでない場合は原則的に Noto Sans CJK JP が適用される。
  • Mac/iOS はヒラギノ角ゴ ProN が適用される。
• アップデートによるフォントの変更の懸念はあるものの、ディスレクシアの方々は UD デジタル教科書体などの読みやすいフォントを設定している可能性があるため、アクセシビリティの観点では font-family: sans-serif の指定を推奨する。

tak-dcxi

Design System Terminology Guideline

目的

この文書は、デザインシステムにおける用語の意味を統一し、設計・実装・ドキュメント・運用・教育のあいだで解釈のズレを防ぐことを目的とする。

命名は単なるラベルではない。命名は、その対象の責務、意味、振る舞い、適用範囲、再利用条件を表す設計上の契約である。

この文書における最重要方針は次のとおりである。

tak-dcxi

name	animations
description	UI アニメーションの要否判断、動き方・見せ方・実装方針の提案、パフォーマンスとアクセシビリティのレビューを行う。対象は hover, active, focus, popover, tooltip, dropdown, dialog, tab, segmented control, card, button, toast, accordion, carousel, scroll-linked animation, View Transitions など。

Animations Skill

以下のようなタスクでこの Skill を使うこと。

• UI にアニメーションを追加する

tak-dcxi

Draft: CSSのレビュー時に確認しておくものリスト

• 下書き途中なのでそのうちまだ増える予定である。
• あくまで自分用であり、他人にこうレビューしろという意図はない。
• ある程度書ききったら非公開にする可能性もある。

マインドセット

• 指摘をする際は、必ず「理由」と「解決策」をセットにする（「この書き方はダメです」だけではレビューにならない）。
• [MUST] は、仕様・コーディング規約に反するもの／バグが起きているもの／将来的に深刻な問題になりそうなもの／ユーティリティ・アクセシビリティを阻害しているものを優先して扱う。次点として「改善したほうが良いもの」を挙げる。

tak-dcxi

「@scope入門」という記事を読んで改めて @scope の設計方法を考える

ICS MEDIAで新しく掲載された以下の記事を読みました。

https://ics.media/entry/250520/

大前提として、私は ICS MEDIA の記事を愛読していますし、池田さんをはじめとして ICS で働くエンジニアの方々とはリアルで親交もあり、尊敬しています。

上述した「@scope入門」という記事に関しても @scope の基礎的な使い方が纏まっており、黎明期ゆえに文献の少ない @scope にフィーチャーした参考記事としては質の高い記事であることは間違いありません。

tak-dcxi

font-size には rem を使うべきかどうかについての見解

結論

• 可能であれば Chrome の文字拡大機能をサポートするためにremを使用する。
• ただし、実際に Chrome の文字拡大機能を「極大」にして検証することが必須条件。これに時間的・労働的なコストを割けないのならpxを使用したほうがいい。

結論に至った背景

「font-size には rem を使いましょう」という教えが独り歩きしており、実際に Chrome の文字拡大機能を「極大」にして検証していない人が多いため。

tak-dcxi

fit-text {
  display: block flow;

  &::part(svg) {
    display: block flow;
    inline-size: 100%;
    block-size: auto;
  }

  &::part(text) {

tak-dcxi

/**
 * 要素の位置情報を監視してCSS変数として:rootに設定するWeb Component
 * AnchorPositioningのような位置指定に使用可能
 *
 * @example
 * ```html
 * <rect-observer var-prefix="global-header">
 *   <header>...</header>
 * </rect-observer>
 * ```

tak-dcxi

export type ObserverOptions = {
  root?: HTMLElement | null;
  rootMargin?: string;
  threshold?: number | number[];
};

const defaultOptions: ObserverOptions = {
  root: null,
  rootMargin: "0px",
  threshold: 0