MENU
CLOSE
システム Edit : 2018.08.14 Update : 2024.11.07

レスポンシブサイトに必要なMedia QueriesのCSS表記について

本日はレスポンシブのサイトを制作する際のCSSでのMedia Queriesの指定数値について考えてみました。
多くの人に綺麗な状態でウェブサイトを見てもらうために、CSS内で画面の横幅の数値を定め、その値以下(または以上)でデザインの指定を変えていく方法です。
まず、日本人が使っているスマートフォンの種類について調べてみました⭐️

https://webrage.jp/techblog/sp_share/
上記のサイトによると、2017年6月の日本で使用されているスマートフォンのシェア率は以下になっています。

順位 機種名 名前 メーカー シェア率
1位 iPhone iPhone Apple 63.24%
2位 SO-02G Xperia Z3 Compact SONY 1.25%
3位 SO-01J Xperia XZ SONY 1.14%

 
iPhoneでサイトを閲覧する人が大多数です。
また、8位までSONYのXperia、3位以下のスマートフォンのシェア率は1%を切っていることから、上記の機種を意識して作れば日本で見られるスマートフォンに対応したレスポンシブサイトが作れるといえます。
 

Contents
  1. 画面幅一覧

画面幅一覧

iphone5 iphone6 iphone6+ ipadmini Xperia
320px 375px 414px 768px 360px

 



どのスマートフォンデバイスからみても崩れがなく、きれいなウェブサイトをつくるには、Media Queriesのcss指定数値を上記の主要な画面幅に設定すればいいと思います!
表示チェックをおこない、特定のデバイスで余白などが思ったような表示がされない…といった場合には個別で細かく指定してあげることで解消できるとおもいます😀✨

KOHIMOTO LABO

東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。