デザインの段階でブレイクポイントを決定するのはやめてほしい
仕様書に「ブレイクポイントは◯◯◯pxで」と書かないでほしい理由をまとめました。レスポンシブの基準が画面幅から利用可能スペースへ移った今、ブレイクポイントは実装段階でデザイナーと決め、コンポーネントはコンテナクエリで分岐させます。
TAK
TAKLOG ホーム
Articles
2026
2025
2024
Topics
UI部品の実装例
タブ、アコーディオン、モーダル、カード、スイッチなど、Webサイトでよく使うUI部品の実装例をまとめました。HTMLの標準の機能を活かし、JavaScriptを最小限にした作り方を紹介します。
Webアクセシビリティ
代替テキスト、見出しのマークアップ、色の扱い、動きを減らす設定など、Webアクセシビリティに配慮したHTMLとCSSの書き方をまとめました。実装後の確認の方法も紹介します。
モダンCSSの使い方
個別の変形プロパティ、色の関数、subgrid、calc(infinity)など、新しいCSSの機能の使い方をまとめました。古い書き方からの置き換えや、実務での使いどころを紹介します。
レスポンシブとレイアウト設計
ブレイクポイントの決め方、コンテナクエリ、FlexboxとCSS Gridの使い分け、余白の設計など、レスポンシブなレイアウトの組み方と考え方をまとめました。