We Blog Weblog

メディアクエリ

Web

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で追加

sm 576px~767px
md 768px~991px
lg 992px~1199px
xl 1200px~1399px
xxl 1400px~

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

まとめ

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

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP