CSSもモバイルファーストの時代へ

|

レスポンシブウェブデザインが登場し始めた頃、当初はPCサイトが主体でモバイルは副次的な扱いでした。そのため、まずはPCサイト用のCSSを先に記述し、その後ろの方でメディアクエリを使ってモバイル専用のCSSを記述する書き方だったと思います。

その後、モバイルユーザーが急増し、今やネットにアクセスする割合の半分程度がモバイル経由になってきています。

そのため、Googleでのインデックスもモバイルファーストとなり、現在ではモバイル版のページが主体になりました。これに伴い、CSSの記述についても、PC版を先に書くのではなく、モバイル版のCSSから書き始めるのがよいと考えています。

このCSSを書き変えるコツについてですが、まずはスマホ用の最小の「モバイル版のCSSのみ」を単体で完成してしまうことをおすすめします。

その次に「PC用のCSS」も単体で完成してしまうことをおすすめします。おそらく、このPC用については現在のCSSがそのまま使えるはずです。

次に、この二つを合体させて両方を併用して記載しておけばよいでしょう。

個人的にはスマホ用の記述を上書きするような書き方はしたくないため、それぞれを独立させた形で記載することにしています。

例えば、以下のように記述していたとします。

h1 {font-size:18px;}
@media screen and (min-width:481px) {h1 {font-size:28px;}}

この場合、スマホでアクセスした場合にはフォントサイズの18pxが適用され、PCからアクセスした場合には18pxが上書きされて28pxが適用されます。

個人的にはこのような上書きはしたくないため、以下のようにそれぞれを独立して書くことにしています。

@media screen and (max-width:480px) {h1 {font-size:18px;}}
@media screen and (min-width:481px) {h1 {font-size:28px;}}

もともとブラウザのデフォルトのCSSがあるため、どのみち上書きされることに変わりはありませんが、あまりコロコロ変わるようだとスマートではありません。

CSSの記述が多少長くなるよりも、ブラウザ側で再計算する必要がないように書く配慮が必要かと思います。おそらくは最終的に計算された結果、レンダリングが開始されるはずなので、そう大した違いはないかと思いますが、できるだけシンプルに記述することをおすすめします。