2025/08/12 に公開146 views
@potato4d が @a_t に、最近のCSS事情について話を聞きました。
ゲスト
- 富田 (@a_t)
- アクセシビリティチーム リーダー
- HTML/CSSに関する社内啓蒙活動を担当
主なトピック
1. Container Queries
- メディアクエリ（Media Queries）と似ているが、特定の要素（コンテナ）単位でスタイルを変更可能
- モジュール単位でレスポンシブなスタイルを柔軟に設定できる
- Safari 16.0以降、Chrome、Edge、Firefoxなど主要ブラウザで対応済み
- 実践投入可能な段階に到達
2. テキスト描画改善系のプロパティ
- プログレッシブエンハンスメント（Progressive Enhancement）として段階的導入が推奨される
text-spacing-trim
- 段落冒頭や末尾の全角記号の余白を自動調整
- 非対応ブラウザでも表示が崩れないため、積極的に導入可能
text-autospace／word-break(auto-phrase)
- 全角・半角文字の境界に自動でスペース挿入
- 日本語テキストの単語単位の改行を改善
- パフォーマンスへの影響に注意し、部分的な導入を推奨
3. 将来的に注目されるCSSの新機能
余白調整系プロパティ
- text-box：テキスト上下の余白を調整可能にする新プロパティ
- margin-trim：コンテナ内の要素のマージンを自動で除去、直感的な余白調整を可能に
Container Style Queries と CSS内での条件分岐（if文）
- Container Style Queries はSafariとChromeのみ対応
- CSSのルール内にif文でスタイル条件分岐が可能（現状はChromeのみ）
- 条件としてカスタムプロパティ（CSS Custom Properties）の値を使える
- 実験段階だが、今から学習しておく価値あり
関連情報
感想・フィードバック
- ハッシュタグ
#UIT_INSIDEにてご意見・ご感想をお待ちしています。