お問い合わせはコチラから

media queryの画面サイズ指定と実際の画面サイズの対応

サイト運営

メディアクエリを使って、ブレークポイントごとにCSSを分けるのは今では一般的に行われています。

メディアクエリの書き方には、max-widthとmin-widthがあります。

ここで指定する画面サイズと実際のブレークポイントの対応をいつも混乱するので、まとめておこうと思います。

max-widthやmin-widthの画面サイズはそのサイズを含む

メディアクエリの画面サイズを指定する時に、≧、≦、<、>なのかというのをいつも悩みます。

結論から言えば、常にそのサイズを含む、というのが正しいです。

max-width:1000pxなら、width≦1000pxです。

min-width:1000pxなら、1000px≦widthです。

なので、同じwidthをmax-widthとmin-widthで指定すると、どちらも有効になりますので、後に書かれた方が有効になってしまいます。

1つのブレークポイントでmax-widthとmin-widthを記述する時には、同じ値を指定してはいけない。

境界でダブらないように画面サイズを指定するには?

min-widthはmax-widthよりも+1px大きくしてすれば、もれなくカバーできることになります。

min側 = max側 + 1px

@media screen and (max-width:1000px) { 
/*~1000pxの設定*/

}
@media screen and (min-width:1001px) { 
/*1001px~の設定*/

}
/*
@media以外の所は全てのサイズで読み込まれます。
*/
p {
 color:red;
}
@media screen and (min-width:480px) { 
    /* 画面サイズが480pxからはここを読み込む */
p { color:#ededed;}
}
@media screen and (min-width:768px) and ( max-width:1023px) {
    /* 画面サイズが768pxから1023pxまではここを読み込む */
p {}
}
@media screen and (min-width:1024px) {
    /* 画面サイズが1024pxからはここを読み込む */
 
}

まとめ

media queryは、最初に画面サイズ毎に分けて書いてしまえば混乱することも無いのですが、既存のサイトのカスタマイズでメディアクエリを書き足す時に漏れなくダブりなく書くときに混乱するのでまとめておきました。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました