モバイルファーストのレスポンシブデザインの設定をする方法

モバイルファーストでCSSメディアクエリを設定するには

今回はCSSを設定する際、レスポンシブデザインをモバイルファーストで設定する方法を紹介するぞ！

レスポンシブデザインとは

レスポンシブデザインとは、各デバイスに合うようにコンテンツを表示させる手法だ。

例えばPCならサイドバーを表示させ、スマホならサイドバーをメインコンテンツの下に表示させたりと、デバイスに適したデザインで表示させる手法だぞ。

モバイルファーストとは

以前はレスポンシブデザインといえば、PCのデザインを優先して作り、そのデザインをスマホに合うように変形させるものだったが、最近ではスマホからのアクセスのほうが多くなったので、スマホデザインを優先して作るようになった。それがモバイルファーストだ。　

ちなみに、モバイルファーストとは作る順番がモバイルのほうが速いという意味ではなく、モバイルのUIを優先するということである。

例えば、先程PC版で表示させていたサイドバーをコンテンツの下に表示させるという例を紹介したが、そもそもモバイルを優先するならサイドバーという概念が必要ないはずである。このようにモバイルを優先したデザインを作成し、そのデザインをPCに適用する。

モバイルファーストのメディアクエリ

モバイルファーストの場合、上からスマホ、タブレット、PCの順になる。
実際のコードは以下のとおりだ。

メディアクエリの指定方法はmax-widthではなくmin-widthなことに注意するのだぞ。

//モバイルのデザイン内容をここに

@media screen and (min-width: 600px) {
//タブレットのデザイン内容をここに
}

@media screen and (min-width: 1025px) {
//PCのデザイン内容をここに
}

デバイス幅は毎年、刻一刻と変化しているので注意する

お主らも知るように、毎年新たなデバイスが登場しておるので、この書き方ならすべてのデバイス幅に対応している。というブレイクポイントの指定方法はない。

特にiPhoneなんかは毎年様々なサイズのモデルが出ているだろう？そのあたりの情報はフロントエンドエンジニアを目指すならチェックしておく必要があるであろうな！

以上がモバイルファーストでレスポンシブデザインを設定する方法だ。