【2020年3月】レスポンシブ CSSブレイクポイント・メディアクエリ（@media）

CSS ブレイクポイント・メディアクエリ（@media）受難

サイト（algorism.co.jp）のリニューアルにともなって、HTMLソースはシンプルに、またCSSも別のメインサイト（seojuku.com）では、ポリシーもなく場当たり的、重厚長大、コテコテにしてグダグダになってしまったことを悔い改めて、身軽にするよう努めたい

ありがちなのは、パソコンでWebページを作成しCSSを記述するので、モバイルファーストではなくデスクトップファーストにならざるをえない

ブレイクポイント・メディアクエリ混乱 レスポンシブ崩壊

みなさんも、iPhoneやAndroidなどの実機で自サイトを閲覧すると、かなり崩れていると驚くだろう

弊社の管理サイトも、Mac XcodeのiOSシミュレーターや、ブラウザーのレスポンシブ表示確認すると、えらいことになっていて心が折れそうになる
とくに、新型大型のスマートフォンやタブレットの場合で

スマートフォンやタブレットの画面サイズ

なまじデバイスを複数そろえていると、つい確認したくなる
確認すると、細かいところが気になってしかたがない

面倒臭いので、簡易版のメディアクエリを採用するために、あらためて新型大型を含むスマートフォンやタブレットの画面サイズを確認しておきたい

ちなみに、iPhoneだけでも、2018年からは、大ごとになっている

iPhone X以降と、iPad Pro以降で、まとめ直してみた

メディアクエリ混乱 レスポンシブ崩壊

スマートフォン デバイスが変化し続けるため、iPhone XS Max/XRのように想定外のスマホ画面になってしまうと、画面の横幅（max-width）だけのメディアクエリでは、既存のCSSでは対応できなくなっている可能性がある

かつては、余裕があるときは、複数のスマホ、縦や横の画面でも見栄えをよくすることがあった
が、モグラ叩きのようでまったく生産性がない…

ブレイクポイント・メディアクエリの例

algorism.co.jpのブレイクポイント・メディアクエリは、シンプルを目指して次のようにしている

ブレイクポイントは「スマホ横」「スマホ縦」がメイン

小型スマホの横と縦は、それなりにユーザーもいるので、念のため設定

「896px」は、1000px、あるいは900pxでもいいかもしれない
「568px」は、600px
「480px」は、500pxだろうか

実際、スマホ横も不要で、スマホ縦のみのブレイクポイントで済ますことが理想かな？
あるいは、スマートフォンは縦画面に固定するように設定するか…

あとは、モバイルファースト（ないしモバイルオンリー）というポリシーで、パソコンなどの表示で少しくらいデザインが気に入らないとか、損切りする覚悟もありだろう

2コラム、3コラムの注意点

WordPressなどのテンプレートでは、サイドバー箇所のサイズ・横幅を設定して、残りをコンテンツ箇所に割り当てるものが多く、タブレットの縦画面や大型スマホの横画面で、サイドバーがコンテンツ幅をいちじるしく狭くしてしまうこともあり、注意するべきである

レアなメディアクエリ：デバイスの縦や横、CSSファイルそのもの

レアな情報としては、デバイスの縦や横で提供されるCSSの書き方もある。

@media screen and (orientation:portrait) {/* 縦向き */}
@media screen and (orientation:landscape) {/* 横向き */}

あるいは、CSS内ではなく、川上というかhead要素でメディアクエリをやる方法もある。

<link rel="stylesheet" href="sp.css" media="screen and (max-width:480px)">

1枚のCSSよりも、デバイスごとの表示も安定し、サイト運営側の生産性が高まる可能性もある

モバイルファーストのメディアクエリなら

Googleは、とにかく「モバイルファースト」を推奨、推進している

まったく体感できていないが、モバイルファーストのCSSメディアクエリでは、スマホでの表示が速くなると強調されている

とりあえず、モバイルファーストのメディアクエリの書き方もさらっと書いておこう

モバイルファーストのメディアクエリ 簡易版

モバイルファーストでは、まず、全デバイスで共通のCSSを書いておいてから、横画面の小さいものから記述していく

メディアクエリなし 【スマートフォン縦】
@media screen and (min-width: 481px) { } 【スマートフォン横】
@media screen and (min-width: 769px) { } 【タブレット縦以上】

また、最大を示す「max-width」でななく、最少の「min-width」を指定する

さらには、最小と最大を厳密に指定する書き方もある

@media screen and (min-width: 481px) and (max-width: 768px) { }

いずれにせよ、設計が重要であり、複数が携わったり、担当者が変わったり、方向性が浸透しなければならない

ChromeのデベロッパーツールやFirefoxの開発ツール

GoogleのChromeのデベロッパーツール、ElementsでHTMLソース指定の箇所を選択すると、画面でも該当箇所がハイライトされ、Elementsの下のStylesで効いているCSS、ファイル名と行番号が表示される

これは、どれが問題なのか瞬時に分かって、非常にありがたい

デベロッパーツールは、Ctrl + Shift + I、それからCtrl + Shift + Mでレスポンシブ確認できる。（Macなら、command + shift + ○）

Firefoxの開発ツールも、ほぼ同じである
こちらは、いきなりCtrl + Shift + Mでレスポンシブ確認できる
また日本語化されている

ChromeもFirefoxも、レスポンシブの画面サイズだけでなく、ユーザーエージェントも切り替わるデバイスモードになる

なお、実機とは違った表示のときもあるので、注意