https://teatree-blog.com

CSS

メディアクエリーの実践的な設定方法

より実践的なメディアクエリーの設定方法について学びます。

  • 完成版の想定
  • 条件の設定

完成版の想定

・ブラウザ幅が狭いときは画像の領域の下にテキストの領域が来ていて、ある程度の幅になると横並びになって、さらに幅が広くなるとある程度の幅を持って中央揃えになりつつ、広告のための領域が右側に表示される、といったレイアウトを作ってみたいと思います。

・スタイルが切り替わるときの、 viewport の幅をブレイクポイントと呼びます。

・今回 600pxのときと800px のときでスタイルを切り替えるようにして幅が小さいときは縦並びに大きくなるに連れ横並びを増やしていきたいと思います

条件の設定

・3 つのパターンがあるので、@media(min-width: 0px) and (max-width: 599px){ }、@media(min-width: 600px) and (max-width: 799px){}、@media(min-width: 800px) and (max-width: px){}とそれぞれ指定幅を設定してあげます。

メディアクエリー

・ CSS ではあとから書いたものが優先される、という仕組みを使って共通のスタイルは先に書いておいて、必要な分だけあとから上書きしていく、というテクニックがよく使わるので小さい方からスタイリングを勧めていくのが一般的です。

・このテクニックについては明日詳しくやっていきたいと思います。

-広告-

 

 






-CSS