50代からのHTML / CSS / Java Scriptチャレンジ No.42 メディアクエリーでスマホ向けレイアウトを作る。

お疲れ様です。前回のwebフォントについては、Google fontsのサイトが変わっていたので、ちょっと分かりずらかったのですが、それはおいおい復習したいと思います。今日は、メディアクエリーについて学習します。昔はなかったなぁ・・・＾＾；そもそも、スマホなかったしなぁ＾＾；

上の画像が前回までの状況。PC用としては出来上がった状態。これをスマホで見たらどうなるかちょっと試してみる。googleを使っていると開発者ツールっていうのを使って、スマホ用の画面を見ることができる。googleの設定を開いて、（右上の点々のところ）その他のツール→デベロッパーツールをクリック。

デベロッパーツールのここをクリック。

クリックすると画面が変わる。

左側の上をクリックして、レスポンシブルになってることを確認。（これが一番使いやすいらしい）

で、これで、左の画面で幅の変更ができて、どのように見えるか確認することができる。

そしたら、スマホになった時にどのように見せるかっていうのを調整していく。
で、スマホの場合は、幅が狭いので、ジャケットの写真と説明の文章が横並びじゃきついので、回り込みを解除したい。要は、画面の幅が狭い時だけという条件で回り込みを解除する。これを可能にするのが、メディアクエリーというテクニック。

メディアクエリー

cssファイルの一番下に、次のように記述する。

そしたら、保存して、リロード。回り込みが600pxを下回ると解除されるはず。なんだけど＾＾；自分のは解除されない＾＾；なんでだ？？？

幅は320pxなんだけどなぁ・・・回り込みの解除がされない＾＾；

というわけで、今日はここまで＾＾；ちょっと調べます。