スマホ用のサイトができたので、それをPCで表示する時にレイアウトが崩れないよう、CSSを追加します。
なぜスマホ用のサイトを先に作ったかというと、PC用は画面が大きいためにFlexboxを使って横並びのレイアウトにすることが多いので、スマホ用を後に作ると、Flexboxを解除するためのCSSを追加しなければならないから、なんだそうです。
へえー！！
スマホ→PCの方が、cssコードが少なくて済むんですね。
まず、メディアクエリでブレイクポイントを一つだけ指定。
@media screen and (min-width: 920px) {
/*ここにPC用CSSを書く*/
}赤文字の部分に、必要なCSSを書いていきます。Flexboxで2カラムにする、リンクリストを横並びにする、余白や画像をPC用のサイズに修正する、などなど。
メモ
横幅指定を width : @@px ; ではなく max-width で指定している理由は、
「ブラウザの横幅をどれだけ広げても指定の値よりは大きくならず、縮めていった場合はブラウザの横幅にフィットして縮む」これだけで基本がしっかり身に付くHTML/CSS＆webデザイン p.260 という特性を持っているから。
あと今回すごかったのが、「PC用のみ改行をなくす」ということ。
あるキャッチコピーがあって、スマホ用だと改行されて2行になっているのですが、PC版でだけ改行をなくしたい。けれどhtmlの<br>を削除してしまうとスマホ版で困るので、「メディアクエリを利用してPCの時だけCSSで、<br>タグを非表示にする」という方法を取るんだそうです。
そんなことが…！？
魔法のようですね…！
具体な方法としては、
①HTMLの<br>タグにクラス名をつける
②CSSのPC用メディアクエリ内で、①のクラス名に対して display: none; を指定する
これだけでできてしまうんだそうです。すごいなあー。こういうの、はじめに思いつく人って、どういう頭してるんだろう…。
コメント