前回は、CSSを記載する際の考え方を記載いたしました。
今回は、CSSの記載の前に色々なデバイスのサイズを読み解き、諸々の以下、サイズの指定方法記載してみたいと思います。
上記について記載していこうと思います...。
私がいつも使用しております、Google Chromeの疑似的なサイズを下記にまとめて記載してみます...。
windowsであれば、F12キーで、Developer Toolsに切り替わります。
| スマートフォン縦 | 320pxから414px | タブレット端末 縦 | ipad:768px,ipad pro:1024px | パソコン | 1280px以上 |
おおよそのサイズで、上記に分けてみました。
私は、スマホの横サイズに合わせたレイアウトは現在行っておりません。
というか、個人的にキリがないと思っています...。
上記サイズを考えてみますと、スマホ・タブレット・PCとおおよそ3種類にスタイルを分けて考えていきます。
それではサイトサイズをモバイルファーストでスマホから...、
iphone5の縦で見た際の横幅320pxと、iphone6/7/8の縦で見た際の横幅375pxコレは記載していく際、別スタイルとなってしまいますが、私の場合は、通常横幅100％でデザインをおこなっていきます。
続きまして、タブレット！！
と行きたい所ですがッ、私の場合PCになります...。
タブレットを飛ばして、PCになる理由は、ユーザーの使用頻度になります。
スマホ ＞ PC ＞ タブレット
上記の順で、ユーザー環境が多くなってきていますので、タブレットは後回しにしてしまいます。
もちろん、後回しにしたからといって可笑しな表示になる訳ではございません。
それではPCサイズ...。
コレはデザインにより多少異なってきますが、パソコンのブラウザサイズを考慮いたしますと、ipad proの1024pxが収まる、960pxから1280px、また960px以下のブラウザサイズであれば、100％で表示することを考慮します...。
それでは最後、タブレット！！
先ほど少し記載いたしましたが、960px以下になりますので100％。
実はこれには簡単に記載する技がございます...。
私の場合は、上記の順でスマホとPCのサイズを考えて、最後にタブレットサイズを考慮して、スタイルを行います。
コレであれば、デザインをおこす際のワイヤーフレームも2枚で、事たります。
タブレットに対応させる、簡単な技は次で...。
それでは、各デバイスに対応させるためのCSS：メディアクリエ
私の場合、上記3つのメディアクリエを使うことがほとんどで、正確には、メディアクリエなどは多ければ多いほどイイ！
といいますが、流石にそこまで手間をかけられない！
また、上記3つのメディアクリエで、アナリティクスのアクセスを読み解きますと、90％以上のユーザーに日本国内であれば、対応できるかと思います。
それでは順にご説明したいと思います...。
まずは、すべてに共通するCSSの記載をおこなっていき、私の場合では、実機であるiphone6/7/8のブラウザで確認を行っていきます。
次に、それよりも一回り小さいサイズ、iphone5の320pxの確認を行います。
そこで、スマホ用の共通レイアウトを記載する場合は、ほぼパーセント表示で記載をおこないますが、
基準となるFont-sizeなどは、どうしても変更せざるを得ない場合があります。
そこで、
・@media screen and (max-width:320px) {}
共通のレイアウトが崩れてしまうiphone5の320pxは、コレを記載していきます。
そして順番としては、min-width:768pxを指定する順番ですが、
ここはあえて、PCの
・@media screen and (min-width:769px) {}
ここで、共通のスタイルシートからPC用に、CSSを上書きしていきます。
でッ最後にタブレット用
・@media screen and (min-width:768px) {}
をmax-width: 320pxとmin-width:769pxの間に記載します。
なぜ？この順番かともいしますと...、
タブレット用min-width:768pxが、一番上書きするCSSが少ないから、
もちろん次に少ないのは、max-width:320pxで、タブレット用とほぼ同じくらいです。
共通（スマホ） → スマホ小さいブラウザ → タブレット → PC
の順で、上から記載していきます...。
この記載順序も、実はコーディングを行う人によって異なる事と思いますが、私の記載方法が参考になればと思います...。
個人的には、この記載方法が一番早いと思っています。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
