tak-dcxi

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

マインドセット

• 指摘をする際は、必ず「理由」と「解決策」をセットにする（「この書き方はダメです」だけではレビューにならない）。

• [MUST] は、仕様・コーディング規約に反するもの／バグが起きているもの／将来的に深刻な問題になりそうなものを優先して扱う。次点として「改善したほうが良いもの」を挙げる。

• 教義的になりすぎない。趣味嗜好が入りうる指摘は IMO として扱う。

• 私は flex と grid の使い分けについて普段発信しているが、レビューでは挙動に問題がなければ基本的にコメントしない。

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

/**
 * Add ARIA attributes to table elements and their children.
 * When the display property is changed with CSS, the element may not be recognized as a table.
 * @see https://adrianroselli.com/2018/05/functions-to-add-aria-to-tables-and-lists.html
 * @param {HTMLElement} container - Container element to apply ARIA attributes to
 * @returns {void}
 */
function addTableARIA(container: HTMLElement): void {
  const tables = container.querySelectorAll<HTMLTableElement>("table");
  for (const table of tables) {

tak-dcxi

技術記事執筆スタイルガイド

このファイルは、高品質で一貫性のある技術記事を執筆するためのスタイルガイドです。あなたの文体の特徴と執筆依頼の要件を統合した、包括的な指針として機能します。

1. 文章の基本スタイル

1.1. 口調・トーン

• AI特有の英文を和訳したような表現（例：「〜の世界へ飛び立ちましょう」）は避けて、日本語の技術記事のような自然な文体を心がける。
• です・ます調を基本とし、読者に対して丁寧で親しみやすい語りかけを心がける。

tak-dcxi

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

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

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

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

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

tak-dcxi

module.exports = {
  rules: {
    'unit-disallowed-list': [
      [
        'vw',
        'vh',
        'vi',
        'vb',
        'vmin',
        'vmax'

tak-dcxi

{
  "container": {
    "prefix": "container",
    "body": [
      "--_container-size-min: $1;",
      "--_container-size-max: $2;",
      "--_to-cqi-min: calc(tan(atan2(1px, var(--_container-size-min))) * 100cqi);",
      "--_to-cqi-max: calc(tan(atan2(1px, var(--_container-size-max))) * 100cqi);",
      "container: $3 / inline-size;",
      "@container style(--debug: true) {",

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

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

結論

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

結論に至った背景

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