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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • Webサイト制作でコーディングをするときに頻繁に使用するメディアクエリのコードを知りたい
  • iPadPro、iPad、スマートフォンのときのメディアクエリはどうやって書くか知りたい

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

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

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

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

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

iPadProのメディアクエリ

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

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

iPad(Tablet)のメディアクエリ

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制作案件をする際に必須のスキルとなりますのでぜひ覚えていきましょう〜!

 

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

コメントを残す

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