レスポンシブレイアウト スキル

このスキルは、すべてのページとコンポーネントが本当の意味でレスポンシブであることを保証します。単に「モバイルで崩れない」というレベルではなく、あらゆるビューポートに対して意図的に設計されたサイトを目指しています。$10,000 相当のサイトは、デスクトップから縮小したものではなく、すべてのビューポート向けに本来意図されたデザインを感じさせるべきです。

レスポンシブデザインのコアルール

1. モバイルファーストの開発

• モバイルスタイルを最初に書きます。 max-width メディアクエリで縮小するのではなく、min-width メディアクエリを使ってスケールアップします。
• ブレークポイントシステム:
  • sm: 640px — 大きいスマートフォン / 小さいタブレット
  • md: 768px — タブレット
  • lg: 1024px — 小さいノートパソコン
  • xl: 1280px — 標準的なデスクトップ
  • 2xl: 1536px — 大型ディスプレイ
• テスト対象: 375px (iPhone SE)、390px (iPhone 14)、768px (iPad)、1440px (MacBook Pro)、1920px (デスクトップ)。

...