目次
メディアクエリとは何か
メディアクエリとは、画面サイズや表示環境に応じてCSSを切り替える仕組みです。
レスポンシブデザインを実装するうえで、欠かせないCSSの機能のひとつです。
スマートフォン、タブレット、パソコンなど、異なる画面幅でも見やすいレイアウトを実現できます。
メディアクエリが必要な理由
1つのHTMLで複数の端末に対応するためには、表示条件ごとにスタイルを変える必要があります。
メディアクエリを使うことで、
- スマホでは縦並び
- PCでは横並び
- 文字サイズや余白の最適化
といった制御が可能になります。
メディアクエリの基本構文
基本的な書き方は以下の通りです。
@media screen and (max-width: 768px) {
body {
background-color: #f5f5f5;
}
}この例では、画面幅が768px以下のときだけ指定したCSSが適用されます。
min-width と max-width の違い
メディアクエリでよく使うのが、min-width と max-width です。
@media screen and (max-width: 768px) {
/* スマホ向け */
}
@media screen and (min-width: 769px) {
/* タブレット・PC向け */
}- max-width：指定した幅「以下」
- min-width：指定した幅「以上」
基本的には モバイルファースト の考え方で、min-widthを使う方法がおすすめです。
モバイルファーストの書き方
まずスマホ用CSSを書き、画面が広くなったら上書きします。
/* スマホ（共通） */
.card {
padding: 16px;
font-size: 1.4rem;
}
/* タブレット以上 */
@media screen and (min-width: 768px) {
.card {
padding: 24px;
font-size: 1.6rem;
}
}この方法は、管理しやすくSEOや表示速度の面でも有利です。
よく使われるブレイクポイント
一般的によく使われる画面幅の目安です。
- 480px：小型スマホ
- 768px：スマホ・タブレット境界
- 1024px：タブレット・PC境界
- 1200px以上：大型ディスプレイ
必ずしも固定ではなく、デザインが崩れる位置で設定するのが正解です。
実践例：ナビゲーションの切り替え
スマホとPCでナビゲーションを切り替える例です。
/* PC用メニュー */
.pc-nav {
display: none;
}
/* スマホ用 */
.sp-nav {
display: block;
}
@media screen and (min-width: 768px) {
.pc-nav {
display: block;
}
.sp-nav {
display: none;
}
}1つのHTML構造を使い回しつつ、表示だけを制御できます。
複数条件を組み合わせる方法
メディアクエリは条件を組み合わせることも可能です。
@media screen and (min-width: 768px) and (max-width: 1024px) {
.box {
background-color: #eee;
}
}この例では、タブレットサイズのみにスタイルを適用しています。
向きによる指定方法
画面の向きで条件分岐することもできます。
@media screen and (orientation: landscape) {
.image {
max-width: 60%;
}
}- portrait：縦向き
- landscape：横向き
タブレットやスマホで効果的です。
よくあるミスと注意点
初心者がつまずきやすいポイントです。
- メディアクエリの順番が逆
- 同じ指定を何度も書いている
- 幅を端末名で決め打ちしている
- PCでしか確認していない
CSSは後から書いたものが優先される点に注意しましょう。
メディアクエリを使わない選択肢
最近では以下のCSSもよく使われます。
- flexbox
- grid
- clamp
- min
- max
これらと組み合わせることで、メディアクエリの記述を減らすことも可能です。
まとめ
メディアクエリは、レスポンシブ対応の基本中の基本です。
- 基本構文を理解する
- min-width中心で考える
- 崩れるポイントで調整する
- 書きすぎないことを意識する
HP Build Studioでも、実案件では必ずメディアクエリを設計段階から組み込んでいます。
まずは小さな調整から試し、少しずつ応用していきましょう。