レスポンシブ CSSメディアクエリ(@media)ブレイクポイントまとめ

レスポンシブ CSS メディアクエリ ブレイクポイントまとめ

レスポンシブもCSS次第ではあるが、パソコン、タブレット横縦、スマホ大横縦、スマホ横縦と、表示確認とCSS記述で試練の時代。メディアクエリも、デスクトップファーストならmax-width、モバイルファーストならmin-width

レスポンシブはCSSのメディアクエリ(@media)
複数デバイス、縦横で確認と修正追記(つらい…)

あくまでも自社用として、必要なことだけのまとめ。
検索しても、スバリの情報がなかなか見つからない。また、無視してもいいことに惑わされる者がいて、現場が騒がしくなって混乱したりすることもある。

その自社であるが、ポリシーもなく場当たり的でいろいろなサイズの画像があり、うかつにもwidthを設定していたり、CSSもぐだぐだ。

パソコンにつないだフルHD(1920×1080)モニターで確認しながらWebページを作成しCSSを記述するので、モバイルファーストではなくPCファーストのメディアクエリとなっている。

なお、PCファーストは、Apple信者には腹立たしいかもしれないがMacも含まれ、またデスクトップファーストとも呼ばれている。
ノートパソコンであっても、デスクトップと一括される(笑)

スポンサーリンク

レスポンシブ メディアクエリ 簡易版

ほんとうは、下記の簡易版でレスポンシブのサイトはつくるべきだろう。

タブレット 縦からは @media screen and (max-width: 800px)
スマホ 横からは @media screen and (max-width: 768px)
スマホ 縦からは @media screen and (max-width: 480px)

達人なら、「767px」1つ、もしくは「480px」を加えた2つのようだ。

レスポンシブ メディアクエリ 詳細版(iOS)

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

 

デバイス 「横」の画面幅 「縦」の画面幅
デバイスの横・縦 横で見る画面の幅 縦で見る画面の幅
iPad 1024px 768px
iPhone 7/6 Plus 736px 480px
iPhone 7/6 667px 375px
iPhone 5/SE 568px 320px
iPhone 4(以下) 480px 320px

余裕があるときは、複数のスマホ、縦や横の画面でも見栄えをよくすることがある。

レスポンシブ メディアクエリ 実際版

画像いろいろ、画像に限らず横幅や縦幅を絶対指定しているから、結局は次のような実際には煩雑極まりないメディアクエリとなっている。

768:iPad縦 / iPhone 7/6 Plus横 @media screen and (max-width: 768px)
667:iPhone 7/6横 @media screen and (max-width: 667px)
568:iPhone 5/SE横 @media screen and (max-width: 568px)
480:iPhone 7/6 Plus縦 @media screen and (max-width: 480px)
375:iPhone 7/6縦 @media screen and (max-width: 375px)
320:iPhone 5/SE/4以下縦 @media screen and (max-width: 320px)

ファブレットというか、大画面スマホの横画面にピンポイントで対応する場合は、専用に
@media screen and (max-width: 767px)
を加える。

WordPressのテンプレート(テーマ)によっては、タブレットの縦でサイドバー左右がコンテンツ幅をいちじるしく狭くしていたり、ファブレット(iPhone 7/6 Plusなど)でナビゲーションがうっとうしいことが多い。

CSS書き加えも必要である。

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

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

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

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

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

あまり一般的ではないことに飛びつくと、将来的なリスクになりかねない。

HTML5やCSS3の仕様も変化(進歩?)するだろうし、レスポンシブWebデザインそのものも新しく、レガシーとはなっていない。

今はないデバイスが登場して、既存のスマートフォンを駆逐する可能性もなきにもしあらず。

あまり凝ったことはやるべきではないだろう。

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

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

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

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

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

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

メディアクエリなし
@media screen and (min-width: 480px) { } @media screen and (min-width: 768px) { }

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

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

@media screen and (min-width: 480px) and (max-width: 767px) { }

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

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

とにかく、モバイルファーストを徹底する。
スマホ縦を標準として、次にタブレット縦、最後にPC(デスクトップ/タブレット横)と記述していく

すべてのデバイス/画面サイズに共通
かつ 480:iPhone 7/6 Plus縦
 
768:iPad縦 / iPhone 7/6 Plus横 @media screen and (min-width: 480px)
920:PC(デスクトップ/タブレット横) @media screen and (min-width: 768px)
920以上:PC(デスクトップ) @media screen and (min-width: 920px)

最後のPC(デスクトップ)は、お好みで

980:@media screen and (min-width: 980px) { }
1020:@media screen and (min-width: 1020px) { }

レスポンシブでも、デスクトップファーストと、モバイルファーストでは、じつは大きな決定的な違いがあるが、それはまた別の機会に。

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

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

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

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

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

Chromeのデベロッパーツールは、レスポンシブの画面サイズだけでなく、ユーザーエージェントも切り替わるデバイスモードという感じだ。

CSSメディアクエリの表示確認だけなら、どちらも同じだが、デバイス振り分けをしている場合はChromeが重宝する。

WordPressで記事を投稿するときは、公開前にプレビューを、デベロッパーツールなどで確認する。

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

スポンサーリンク