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が冗長になりやすく、ライブラリとの一貫性はあっても、実は自分で用意するメディアクエリにはあまり関係がないので、
好きなほうを選んでもらって構わないと思います。

プログラミング学習につまづいていませんか?

自分の力で勉強していく独学は大変です。ゼロからだとなおさら辛いはず。

一人でやっていると、誰かに教えてもらいたい、もっと効率的にプログラミングを学びたい、という場面が必ずあります。

ということならばスクールを検討してみてはいかがでしょう。

オンラインで完結するプログラミングスクール「TECH::CAMP」

TECH::CAMP

TECH::CAMPは人気・評判がともに高く、月額12,800円から受講できるオンライン対応のプログラミングスクールです。

TECH::CAMPでは、ネットで受講できて講師にも質問し放題なので、好きなときに必要な知識を重点的に勉強できます。
オンラインスクールを利用すれば、住んでる場所に関係なくプログラミングスキルが磨けますよ

独学がちょっと苦しくなってしまった……という方は、オンラインでの受講を考えてみてはいかがでしょうか。