モバイルファーストのデザインを意識したスタイルシートを作成

従来は、パソコン向けのサイトをベースにしたスタイルシートを作成していましたが、スマートフォンの普及でパソコンからの閲覧数や滞在時間が逆転した現在では、モバイル向けのサイトをベースにしたスタイルシートの作成が求められています。2019年09月25日

p {
  font-size: medium;
}

@media screen and (max-width: 640px) {
    p {
      font-size: small;
    }
}

パソコンからのアクセスが主流だった時代のスタイルシートです。メディアクエリのmax-widthを使用して、パソコン向けのサイトをベースにしたスタイルシートを作成していました。

p {
  font-size: small;
}

@media screen and (min-width: 640px) {
    p {
      font-size: medium;
    }
}

スマートフォンからのアクセスが主流となった時代のスタイルシートです。メディアクエリのmin-widthを使用して、モバイル向けのサイトをベースにしたスタイルシートの作成が求められています。

Kawaninon.com