CSSでレイアウトをデザイン！サイズを考えよう！

CSSでレイアウトをデザイン！サイズを考えよう！

前回は、CSSを記載する際の考え方を記載いたしました。

今回は、CSSの記載の前に色々なデバイスのサイズを読み解き、
諸々の以下、サイズの指定方法記載してみたいと思います。

・スマートフォン、タブレット、パソコンの画面サイズ
・スマホ・タブレット・PCに表示するサイトサイズ（横幅）
・各デバイスのブレークポイントおよびメディアクリエ

上記を記載する際の考え方を自分なりにまとめてみます。

スマートフォン、タブレット、パソコンの画面サイズ

私がいつも使用しております、Google Chromeの疑似的な
サイズを下記にまとめて記載してみます…。

windowsであれば、F12キーで、Developer Toolsに切り替わります。

スマートフォン縦	320pxから414px
タブレット端末縦	ipad:768px,ipad pro:1024px
パソコン	1280px以上

おおよそのサイズで、上記に分けてみました。

私は、スマホの横サイズに合わせたレイアウトは
現在行っておりません。

というか、個人的にキリがないと思っています…。

上記サイズを考えてみますと、
スマホ・タブレット・PCと
おおよそ3種類にスタイルを分けて考えていきます。

スマホ・タブレット・PCに表示するサイトサイズ（横幅）

それではサイトサイズをモバイルファーストでスマホから…、

iphone5の縦で見た際の横幅320pxと
iphone6/7/8の縦で見た際の横幅375pxコレは記載していく際
別スタイルとなってしまいますが、私の場合は、
通常横幅100％でデザインをおこなっていきます。

続きまして、タブレット！！

と行きたい所ですがッ、私の場合PCになります…。

タブレットを飛ばして、PCになる理由は、
ユーザーの使用頻度になります。

スマホ　＞　PC　＞　タブレット

上記の順で、ユーザー環境が多くなってきていますので、
タブレットは後回しにしてしまいます。

もちろん、後回しにしたからといって可笑しな表示になる訳ではございません。

それではPCサイズ…。

コレはデザインにより多少異なってきますが、
パソコンのブラウザサイズを考慮いたしますと、

ipad proの1024pxが収まる、960pxから1280px、また960px以下のブラウザサイズであれば、
100％で表示することを考慮します…。

それでは最後、タブレット！！

先ほど少し記載いたしましたが、960px以下になりますので100％。
実はこれには簡単に記載する技がございます…。

私の場合は、上記の順でスマホとPCのサイズを考えて、
最後にタブレットサイズを考慮して、スタイルを行います。

コレであれば、デザインをおこす際のワイヤーフレームも2枚で、事たります。

タブレットに対応させる、簡単な技は次で…。

各デバイスのブレークポイントおよびメディアクリエ

それでは、各デバイスに対応させるためのCSS：メディアクリエ

・@media screen and (max-width: 320px) {}

・@media screen and (min-width:768px) {}

・@media screen and (min-width:769px) {}