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

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

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

モバイルファースト

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

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

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

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

デスクトップファースト

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

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

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

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

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

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

・メディアクエリの変数

$breakpoint: (
  sm: 'screen and (min-width: 600px)',
  md: 'screen and (min-width: 768px)',
  lg: 'screen and (min-width: 1024px)',
  xl: 'screen and (min-width: 1280px)',
);

@mixin mq($bp) {
  @media #{map-get($breakpoint, $bp)} {
   @content;
  }
}

・CSS

@include mq(sm) {
        background-color: red;
    }
    @include mq(md) {
        background-color: blue;
    }
    @include mq(lg) {
        background-color: green;
    }
    @include mq(xl) {
        background-color: yellow;
    }

ポイントはこちら。

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

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

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

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

・メディアクエリの変数

$breakpoint: (
  sm: 'screen and (max-width: 600px)',
  md: 'screen and (max-width: 768px)',
  lg: 'screen and (max-width: 1024px)',
  xl: 'screen and (max-width: 1280px)',
);

@mixin mq($bp) {
  @media #{map-get($breakpoint, $bp)} {
   @content;
  }
}

・CSS

@include mq(xl) {
        background-color: red;
    }
    @include mq(lg) {
        background-color: blue;
    }
    @include mq(md) {
        background-color: green;
    }
    @include mq(sm) {
        background-color: yellow;
    }

ポイントはこちら。

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

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

まとめ

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