メディアクエリ

2021年11月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「メディアクエリ」についてです。

メディアクエリとは

メディアクエリ（media query）とは、端末の種類や画面の幅によってレイアウトを変更するためのしくみです。

画面の幅によって異なるスタイル（CSS）を適用したい時に使います。

このCSSが切り替わる画面幅（ピクセル）をブレークポイント（breakpoint）といいます。

レスポンシブデザインとは

レスポンシブデザイン（Responsive Web Design：RWD）とは、画面の幅によってレイアウトが変わるデザイン手法のことです。

レスポンシブデザインでは画像の幅などを指定する時にピクセル（絶対単位）ではなくパーセント（相対単位）で指定します。

書き方の例

まずはヘッダー内に以下の記述をすることが必須です。

<meta name="viewport" content="width=device-width, initial-scale=1">

基本は以下のような感じです。

@media (〇〇-width: 〇〇px){
  ここにcssを書く
}

例① 画面幅768px以上では表示させない

@media (min-width: 768px){
.ex1{
  display: none;
}
}

例② 画面幅1199pxまでは縦並びにする

@media (max-width: 1199px){
.ex2{
  display: block;
}
}

例③ 画面幅768pxから1199pxの間だけ横並びにする

@media (min-width: 768px) and (max-width: 1199px){
.ex3{
  display: inline;
}
}

Bootstrapでは

Bootstrapでは、ブレークポイントがあらかじめ定義されています。
※xxlはBootstrap5で追加

例えばさっきの例①は「d-md-none」
例②は「d-xl-inline」
例③は「d-md-inline」「d-lg-block」
といったクラスを組み合わせることで実現可能です。

まとめ

レスポンシブデザインのために
メディアクエリで
ブレークポイントを設定しよう

スマホの横向き時の挙動とかをもっと勉強します！