【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
本日はレスポンシブのサイトを制作する際の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%を切っていることから、上記の機種を意識して作れば日本で見られるスマートフォンに対応したレスポンシブサイトが作れるといえます。
iphone5 | iphone6 | iphone6+ | ipadmini | Xperia |
---|---|---|---|---|
320px | 375px | 414px | 768px | 360px |
KOHIMOTO LABO
WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。
INDEX
PICK UP