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

メディアクエリもCSS次第、新型大型のiPhoneやiPad Proなどが登場で、レスポンシブのメディアクエリ・ブレイクポイントもグダグダ。モバイル ファーストのハードル高し

SEO塾/株式会社アルゴリズム

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

メディアクエリもCSS次第、新型大型のiPhoneやiPad Proなどが登場で、レスポンシブのメディアクエリ・ブレイクポイントもグダグダ。モバイル ファーストのハードル高し
【2020年3月】レスポンシブ CSSブレイクポイント・メディアクエリ(@media)

【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以降で、まとめ直してみた

デバイス“横”画面幅“縦”画面幅
iPad Pro(12.9)1366px1024px
iPad Pro(11)1194px834px
iPad Pro(10.5)1112px834px
iPad1024px768px
iPhone XS Max/XR/11/11 Pro Max896px414px
iPhone XS/X/11 Pro812px375px
iPhone 8/7/6s/6 Plus736px414px
iPhone 8/7/6s/6667px375px
iPhone 5s/5/SE568px320px
iPhone 4(以下)480px320px
Nexus 5 / XPERIA640px360px
Nexus 5X/6/6P732px412px
Pixel 2731px411px
Pixel 2 XL823px411px
Kindle Fire HDX1280px800px
Nexus 101280px800px

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

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

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

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

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

タブレット 横は
パソコンと同じ
タブレット縦 / スマホ横
@media screen and (max-width: 896px)
小型スマホ横
@media screen and (max-width: 568px)
スマホ縦
@media screen and (max-width: 480px)
小型スマホ縦
@media screen and (max-width: 320px)

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

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

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

タブレット 横は
パソコンと同じ
タブレット縦 / スマホ横
@media screen and (max-width: 900px)
小型スマホ横
@media screen and (max-width: 600px)
スマホ縦
@media screen and (max-width: 500px)
小型スマホ縦
@media screen and (max-width: 320px)

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

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

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も、レスポンシブの画面サイズだけでなく、ユーザーエージェントも切り替わるデバイスモードになる

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

»