Bootstrapを使う前にメディアクエリの指定方法を覚えておこう

今回はBootstrapでメディアクエリを設定する方法について紹介します。

Bootstrap内でのメディアクエリ

Bootstrapでは主にグリッドシステムでメディアクエリが使われています。

Bootstrapではモバイルファーストを意識されているので、
次のように画面幅の狭いデバイスから順にメディアクエリが設定されています。

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

768px未満ではメディアクエリを指定せず、768px以上はそれぞれのブレイクポイントに応じてメディアクエリが設定され、スタイルが上書きされていくイメージです。

ブレイクポイントの初期値は以下のとおりです。

スマートフォン タブレット デスクトップ(中) デスクトップ(大)
ブレイクポイント 768px未満 768px以上 992px以上 1200px以上

メディアクエリの指定方法

自分でメディアクエリを設定する場合は、公式サイトにあるようにデバイスごとにメディアクエリを指定するのがスマートでオススメです。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

先ほど紹介したBootstrapのルールに則って、モバイルファーストでの指定方法を採用してもいいですが、
CSSが冗長になりやすく、ライブラリとの一貫性はあっても、実は自分で用意するメディアクエリにはあまり関係がないので、
好きなほうを選んでもらって構わないと思います。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.