[CSS] @media メディアクエリ まとめ

メディアクエリ

レスポンシブ対応のサイト制作で不可欠なのがメディアクエリ(@media)の記述です。私自身、曖昧なまま使っていた所があり、すんなり思い通りにならない、コンパクトに書けなかったしています。実践しやすい様に、まとめてみました。気になるiPhone12のサイズもご紹介します。

メディアクエリとは

初心者向けに説明すると、レスポンシブ対応サイトでは画面のサイズによって、デザインやレイアウトが変わる様にしますよね?それをどの画面サイズで変えるかどうか、@media・・・を使って指示を出します。

メディアクエリをどの様に書くかは、[Bootstrap] ブレイクポイント @media で紹介しています。

ちなみに、@media()となっている場合と、@media screen and ()とか書いてある事がありますが、「screen」はスマホ、PCなど画面的な物への指示という事です。「print」とした場合は、印刷した際にどう見せるとという事になります。

ブレイクポイント

大体こんな感じです。参考まで。

/* 小さなデバイス (スマホ,576pxとそれ以上)*/
@media (min-width: 576px) { ... }

/*中間のデバイス (タブレット, 768px とそれ以上)*/
@media (min-width: 768px) { ... }

/* 大きなデバイス(デスクトップ, 992px とそれ以上)*/
@media (min-width: 992px) { ... }

/* もっと大きなデバイス (大型画面のPC, 1200px とそれ以上)*/
@media (min-width: 1200px) { ... }
/* とっても小さなデバイス  (小さなデバイス,576pxとそれ以下)*/
@media (max-width: 575.98px) { ... }

/* 小さなデバイス  (スマホ, 768pxとそれ以下)*/
@media (max-width: 767.98px) { ... }

/* 中間のデバイス(タブレット, 992pxとそれ以下)*/
@media (max-width: 991.98px) { ... }

/* 大きなデバイス (デスクトップ,1200pxとそれ以下)*/
@media (max-width: 1199.98px) { ... }

Appleあれこれ

画面サイズの種類が多すぎてストレス!どこまで追うかは貴方次第です。殆どの場合、縦で閲覧しているだろうと割り切る事も大事かもしれませんね。

参考サイト            
iPhone 5320 x 568
iPhone 6/7/8375 x 667
iPhone 6/7/8 Plus414 x 736
iPhone X/11375 x 812
iPad Pro1024 × 1366
iPad1024 × 768

iPhone12 と Airのサイズ

たとえば、iPhone12 mini専用のブレイクポイントを設定する場合は、下記の表を参考にこの様に書けばOKです。

@media screen and (max-width: 375px;){ ... }
         
iPhone 12 mini375 × 667
iPhone 12390 x 844
iPhone 12 Pro390 x 844
iPhone 12 Pro Max428 x 926
iPadAir 4820 × 1180

ipad対策

ipadのデザインがどうしてもシックリこないので、追加するしかない場合

/* タブレット 1024pxとそれ以下*/
@media screen and (max-width: 1024px) {・・・}

皆のメディアクエリ

2021年1月現在の、いろいろなサイトのおすすめの組み合わせ。どれがベストなのでしょう?

@media screen and (max-width: 480px) {...}
@media screen and (max-width: 896px) {...}
@media screen and (max-width: 1024px) {...}
@media screen and (max-width:599px) {...}
@media screen and (min-width: 767px) and (min-width: 600px) {...}
/*タブレットとスマホ 異なるMAX値*/
@media screen and (max-width: 1068px) and (min-width: 768px) {...}
@media screen and (min-width: 1069px) {...} 
@media screen and (max-width: 768px) {...}
@media screen and (max-width: 1024px) {...}
@media screen and (min-width: 481px) {...} 
@media screen and (min-width: 769px) {...} 

andの使い方

screen andとしか使えない事はありません。サイズの指定を増やす事も可能です。

375px 以上で、768px 以下としたい場合は、

@media (min-width:375px) and (max-width:768px) {...}

< や >の記号の使い方

AよりBが大きい、又は小さいなどに使う記号(?)を使う事が出来ます。

576px より小さい画面。つまり、画面の横幅< 576px と書く感じ。

@media screen and (width < 576px) {...}

600pxまたは、それより大きい

@media screen and (width >= 600px) {...}

また、上記2つの使い方をミックスする事も出来ます。

画面の横幅が576px より大きくて 768px未満

@media screen and (320px <= width < 768px) {... }

, カンマの使い方

カンマで区切ると、又は(or)の意味になります。

576px 以上又は、768px 以上としたい場合は、

@media (min-width:576px),(min-width:768px) { ... }

@media onlyについて

古いブラウザで、誤解が生じない様に使用していた模様です。現在は必要性が無い様です。

参考

もっと複雑な書き方も掲載されていますが、結論としてはじめの章でご紹介した一般的なブレイクポイントで書いた方が分かり易くて良さそうです。すっきり書こうと、アレコレ書いてしまうと、後で訳が分からなくなってしまう事になります。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください