CSS

モバイルファーストで開発

viewportの幅が狭い方から書き始めて、必要なスタイルだけあとで上書きしていく手法について学びます。

  • メディアクエリーの設定

メディアクエリーの設定

・まずはどの要素にも適用されるスタイルをメディアクエリの外に書いていきます。

・パッと見でわかりやすいように一番上に/* common */と書いてあげると親切です。

・ Viewport の幅に応じてスタイルを変えればいいのですが、最初にスタイルが切り替わるのは 600px のときなので、 0px から 599px までのスタイルは共通のスタイルに書いてあげれば良いので削り、順番で書いていけば下のメディアクエリも 800px になったら下のスタイルで上書きされるだけなので、わざわざ条件を書く必要はないので削ります。

・スタイルはわかりやすいようにコメントでsmall screen、medium screen、large screenなどカテゴリ分けをししておくとわかりやすくなります

これらの設定はCSS はあとから書いたもので上書きされるという仕組みを使っているので、ブラウザ幅の条件を小さい順に書いたときだけ使えるという点に注意しましょう。

・小さいスタイルを書いていくのが最近は主流です。この方法をモバイルファーストと言います。

-広告-

 

 






-CSS