スキル自身の言葉で
このスキルは、コンテナクエリ、流動的なタイポグラフィ、CSS Grid、モバイルファーストのブレークポイント戦略を用いて、モダンなレスポンシブレイアウトを実装します。コンポーネント単位のレスポンシブ対応、流動的なタイポグラフィとスペーシングスケール、CSS GridとFlexboxを用いた複雑なレイアウト、デザインシステムのためのブレークポイント戦略をカバーします。このスキルは、レスポンシブな画像・メディア、アダプティブなナビゲーションパターン、レスポンシブなテーブルやデータ表示にも対応します。
モバイルファーストでの開発、デバイスベースではなくコンテンツベースのブレークポイント、コンポーネント単位の適応のためのコンテナクエリを重視しています。このスキルには、タッチターゲット、国際化のための論理プロパティ、画像処理と遅延読み込みによるパフォーマンス最適化に関するガイダンスも含まれます。
UI コード
プロンプト例を見る ↗仕組み
- 01モバイルファーストで始める
デスクトップから down で進めるのではなく、モバイルスタイルを基盤として始め、大きな画面に向けて段階的に拡張していきます。
- 02コンテンツベースのブレークポイントを設定する
特定のデバイスサイズではなく、コンテンツが折り返す必要がある箇所を基準にブレークポイントを定義します。