CSSのメディアクエリまとめ【Webサイト制作案件でよく使うサンプルコード】

2020/07/24

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくがふだん、実際のWebサイト制作案件で使用しているものです。

メディアクエリはできることならあまり増やしたくない、というのが本音ですが、デザインによってはそうもいかない場合が多々あります。

デザイン崩れを起こさないように、柔軟にメディアクエリを設定していきましょう。

メディアクエリの設定で躓いている方の助けになれれば幸いです！

iPadProのメディアクエリ

iPadProサイズのメディアクエリはこちら！

index.css

@media screen and (max-width: 1025px) and (min-width: 769px) {
  /* iPadPro〜iPad */
}

iPad（Tablet）サイズのメディアクエリはこちら！

＊Tabletというのは、Chromeのデベロッパーツールでレスポンシブ表示をしたときの名前

index.css

@media screen and (max-width: 768px) and (min-width: 481px) {
  /* iPad（Tablet）〜スマホ */
}

スマートフォンサイズのメディアクエリはこちら！

index.css

@media screen and (max-width: 480px) {
  /* スマホ */
}

iPhone6,7,8ではうまく表示できていても、それよりも小さいiPhoneSEだとデザイン崩れが起きることがよくあります。

そういうときはSE用のメディアクエリを新規で作成して対応するのがいいでしょう。

（早くSEなくなってくれないかな…）

以上、iPadPro、iPad、スマートフォンのときのメディアクエリをまとめて紹介しました。

レスポンシブ対応は、Web制作案件をする際に必須のスキルとなりますのでぜひ覚えていきましょう〜！

コーディングスキルアップシリーズはこちら！