モバイルファーストとデスクトップファーストの書き方について

今回は、「モバイルファーストとデスクトップファーストの書き方」について紹介します。

モバイルファーストとデスクトップファーストとは?

それでは2つのコーディング手法の違いを見ていきましょう。

モバイルファースト

よくモバイルファーストは「スマホのデザインデータからただ作るだけ」と考えられがちです。

モバイルファーストとは、スマホを利用するユーザーの気持ちを考えて最も快適な状態のデザイン構成をすることです。

Googleは数年前からモバイルファーストインデックスを発表しており、SEOの観点からもモバイルファーストは今後ますます重要になっていくでしょう。

WEBデザイナーもコーダーも理解しておきたいところです。

デスクトップファースト

デスクトップファーストとは、デスクトップ用のデザインからコーディングする手法です。

モバイルファーストの逆の手順でコードを書いていきます。

今でもPCのデザインデータだけもらってコーディングすることもあるので、まだまだ必要なコーディング手法です。

モバイルファーストの書き方

モバイルファーストでは、以下の書き方をします。

scssの変数を使ってメディアクエリをスマホから順に書いてみました。

・メディアクエリの変数

・CSS

ポイントはこちら。

・メディアクエリはmin-widthで書く

・PCからでなくスマホのスタイルから書いて、ブラウザ幅が大きくなるにつれてスタイルが上書きされるように

デスクトップファーストの書き方

デスクトップファーストでは、以下の書き方をします。

・メディアクエリの変数

・CSS

ポイントはこちら。

・メディアクエリはmin-widthで書く

・スマホからでなくPCのスタイルから書いて、ブラウザ幅が小さくなるにつれてスタイルが上書きされるように

まとめ

以上が、「モバイルファーストとデスクトップファーストの書き方」でした。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事