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