どうも7noteです。レスポンシブサイト作成時にCSSを切り分け方について
まず関連するワードについて一覧表をご覧ください。
| ワード | 意味 |
|---|---|
| レスポンシブサイト | パソコンやスマートフォンなど、デバイス毎に表示が切り替わるサイトのこと |
| リキッドレイアウト | レスポンシブサイトを作る際、様々な要素の大きさが割合（%）で計算されて、ウィンドウサイズが変わっても常に同じ見え方になるデザインや組み方の事。 |
| ソリッドレイアウト | リキッドレイアウトの対義語と思っていただければ。pxなどで値を固定するため、要素よりも小さなウィンドウで見た際に見切れて表示される。 |
| メディアクエリ | CSS3のモジュール。簡単に言うと、レスポンシブサイトを作るのに必須。ウィンドウの解像度（大きさ）を基準として、使用するCSSを切り分けることができる。 |
| ○○ファースト | モバイルファースト、PCファーストなどと呼ばれることがあり、CSSの優先をPCにするかスマホにするかの違い。詳しくは下で説明。 |
これらを踏まえた上で、作り方を解説していきます。
PCファーストにするかモバイルファーストにするか、それとも・・・
レスポンシブサイトを作る際にまず1つ決めることがあります。
それは
「スマホデザインを先に作るか」
「PCデザインを先に作るか」
です。
スマホデザインを先に作る場合、モバイルファーストと言い、PCデザインから作ることをPCファーストと言います。
これによって、メディアクエリの書き方が変わるので先に決めておきましょう。
どちらもそこまで大きな差はないのでどちらを選んでもレスポンシブサイトを作る事はできます。
ただ好み的にはモバイルファーストの方がいいと思います。
違いはなに？
違いとしてはモバイルファーストの方が比較的上から積み上げられるようなデザインが多いので、htmlのタグの順番を決めやすいことです。そしてPCデザインをする際は比較的融通が効きやすいことが多いのでデザインの見た目とタグの順番が変わっていても対応しやすいというメリットがあります。
といっても、多少の気持ち程度なので本当にどちらでもいいと思います。サイトやページによって、PCファースト・モバイルファーストが混合してしまうとややこしくなったりするので自分がやる場合はこっち！というのを先に決めておきましょうというだけです。
○○ファーストってどういうこと？
例えばモバイルファーストでレスポンシブサイトを作るとなった場合で考えましょう。
この場合、スマホ用に記述したCSSがPC表示の時にも反映されます。
モバイルファーストの場合
/* スマホ用CSS（PCにも効く） */p{color:#F00;/* 文字色を赤に。 */font-size:1rem;}@mediascreenand(min-width:828px){/* PC専用CSS */p{font-size:18px;}}上記の場合ですと、このようになります。
- スマホの時は赤色で、文字サイズは1rem。
- PCの時(ウィンドウサイズが828px以上)は赤色で、文字サイズは18px。
つまりモバイルファーストの場合、共通のCSSとしてまず先にスマホ用のCSSを全て記述します。
その後、PC用に書き換えたい値だけ、PC専用のCSSの個所に記述します。
この書き方モバイルファーストでレスポンシブサイトを作る時の書き方です。
逆のPCファーストであれば、反対の事を行います。
（PCファーストの場合、メディアクエリの指定はmin-widthではなく、max-width: 828pxと書きます。）
PCスマホとも完全独立で書くことも可能
@mediascreenand(max-width:828px){/* スマホ用CSS（PCにも効く） */p{color:#F00;/* 文字色を赤に。 */font-size:1rem;}}@mediascreenand(min-width:828px){/* PC専用CSS */p{color:#F00;/* 文字色を赤に。 */font-size:18px;}}ただし見ての通り文字色を変える場合、2個所の記述が必要になります。
こうなってしまうと保守管理に若干の手間がかかってしまうので、何か理由がない限りはあまりPCスマホの完全独立で記述するのはおすすめしません。
まとめ
よくホームぺージ制作しますよ！といったサイトなどに「レスポンシブ対応」とか、「レスポンシブサイト」と書いていますがそこまで難しい事をしているわけではありません。
レスポンシブサイトは単純にCSSを書き分けているだけで、経験を積めばだれでも簡単にレスポンシブサイトを作ることができます。
あとはレスポンシブサイトを作成する時に
内にビューポートの指定を忘れないようにしましょう。「ビューポートの指定」<meta name="viewport" content="width=device-width, initial-scale=1" />
おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）