前回までで、スマホ幅のコーディングが完成しました。
コーディングの順序は?
今回のようにモバイルファースト設計であれば、CSSは画面幅の小さい順から書いていくのがオーソドックスです。
これは、メディアクエリの書き方が関係しています。 今回のように表示領域が〇〇px以上という書き方をした場合、上書きされないスタイル指定はより広いブレイクポイントにも引き継がれます。
例えば、下の例では768px以上で文字を太字にする指定をしています。 1200px以上の場合も、このスタイル指定は上書きされないので有効です。
ですので、今回もスマホ幅のレイアウトが完成→タブレット幅のコーディング……と進めたいところではあります。 ですが、今回のご依頼ではPC幅とSP幅のデザインしかありません。 タブレット幅は、程よく見えるように設定して欲しいという話なのですね。
各幅のデザインがない場合
中間点のデザインが無い場合は、下記２パターンのどちらかでコーディングします。
- PC幅を作ってから、タブレット幅だと見にくい部分を調整する
- タブレット幅のデザイン（配置）を想像して先に作る
クライアントから特に指定がなければ、どの方法で作っても構いません。 CSSが複雑化せず、どの幅でもページが見やすければ問題ありません。作りやすい方でコーディングしましょう。
課題と解説について
今回、解説では「PC幅を作ってから、タブレット幅だと見にくい部分を調整する」という方法で進めていきます。
PC幅（カンプを再現するスタイル指定）を先に作りますが、CSSは@media (min-width: 768px) {}の中に書いていきます。
これは@media (min-width:1200px) {}の中に書いてしまうと、それ以下の幅には適用されないためです。タブレット向けのCSSは@media (min-width: 768px) {}の中にCSSをイチから書かなければならず、調整というよりも書き直しになってしまいます。
二重にCSSを書くのは手間ですし、不必要な重複も起こります。 ですので、解説では下記のような順序でCSSを書いていきます。
課題で作成されるページは、上のような順序ではなく、お好きな方法でコーディングして頂いて構いません。
実際のコーディングでも、明らかにタブレットで無理なサイズがあれば、最初からTBサイズとPCサイズに分けて書いたりします。逐一@media (min-width:1200px) {}の中にカット＆ペーストしていくのは大変ですので。
解説の進行上、最後にタブレット幅用の調整を行います。 ですが、最終的に * 幅1200px以上 →カンプ通りの表示 * それ以下（TB幅)→崩れがなく見やすいレイアウト
になっていればOKです。 最初からTB,PCと分けてCSSを書いて調整しても良いです。