[CSS] モバイルファースト、デスクトップファーストでのメディアクエリの使い分け

モバイルファーストとデスクトップファーストのメディアクエリの使い分けについて解説します。
メディアクエリについては、こちらの記事で詳しく解説しています。

モバイルファースト

モバイルファーストとは、小さな画面サイズ向けのスタイルを最初に定義し、画面が大きくなるにつれてスタイルを追加・上書きしていく手法です。
 
モバイルファーストのCSSを書くポイント

1．ベーススタイルをモバイル向けに記述
小さな画面サイズを基準に、基本のスタイルを定義します。

2．メディアクエリでスタイルを拡張
画面幅が広がるにつれて、必要なスタイルを追加または上書きします。

3．記述順を「小さい条件」から「大きい条件」にする
大きい条件を後に記述することで、上書きがスムーズになります。

4．主に使用するメディアクエリは min-width
画面幅が指定の値以上の場合に適用されます。

 

デスクトップファースト

デスクトップファーストとは、大きな画面サイズ向けのスタイルを最初に定義し、画面が小さくなるにつれてスタイルを追加・上書きしていく手法です。

 
デスクトップファーストのCSSを書くポイント

1．ベーススタイルをデスクトップ向けに記述
大きな画面サイズを基準に、基本のスタイルを定義します。

2．メディアクエリでスタイルを調整
画面幅が狭くなるにつれて、小さい画面向けのスタイルを追加または上書きします。

3．記述順を「大きい条件」から「小さい条件」にする
小さい条件を後に記述することで、上書きがスムーズになります。

4．主に使用するメディアクエリは max-width
画面幅が指定の値以下の場合に適用されます。

 

 

モバイルファーストとデスクトップファースト、それぞれに適したメディアクエリを使い分けることで、柔軟なレスポンシブデザインを実現できます。
プロジェクトや目的に応じて最適なアプローチを選びましょう。