読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

Bootstrapでメディアクエリを書き加える時の指定方法について整理する

Bootstrap WebDev

 max-widthかmin-widthかで、境目の数字が異なるので、そこが混乱の元なんですな。自分でも今日とぼけて間違って指定してしまっていたので、ここに整理しておきます。
 参照するのは、Bootstrap公式サイトのCSSのページの中のgrid optionsです。
 まず、おさらいも含めて、Bootstrapがどのように指定しているのかを見ます。だいたい次のようなかたちです。

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

 Bootstrapはモバイルファーストでコーディングされています。そのため、min-widthを使って順次上書きすることでマルチデバイス対応を行っています。min-widthを自分で足す時は、モバイルのスタイルとそれよりも大きいサイズでも共通して使われるスタイルをまず書いてから、768px、992px、1200pxからいずれかを選んで適宜書いていけばいいわけです。
 一方、max-widthを使いたいときがあります。例えば、モバイルファーストでコーディングされていないCSSファイルを拡張したいときがそれに該当します。この時、注意が必要なのは、max-widthの値に指定するpxの値です。これをそのまま使ってしまうと、境目の幅でCSSの指定がダブってしまうことになります。そうならないように、数字を1減らして指定します。minとmaxを並べると、次のようになります。

/*min-widthの指定 (「数字に指定したところから」と覚える) */

@media (min-width: 768px) {/*幅768px以上で適用されるスタイル*/}
@media (min-width: 992px) {/*幅992px以上で適用されるスタイル*/}
@media (min-width: 1200px) {/*幅1200px以上で適用されるスタイル*/}

/*max-widthの指定 (「数字に指定したところまで」と覚える)*/

@media (max-width: 1199px) {/*幅1199px以下で適用されるスタイル*/}
@media (max-width: 991px) {/*幅991px以下で適用されるスタイル*/}
@media (max-width: 767px) {/*幅767px以下で適用されるスタイル*/}

 最後に、コーディングするにあたっての注意点を述べると、max-widthを使って可変対応するときは、カスケーディングがモバイルファーストの逆の流れになりますから、大きい数字から上書きすることと覚えておいてください。
 と、ざっとまとめてみましたが、この仕組みは元からわかっているわけです。わかっているけれど、767や768がごっちゃになる。もうこれは仕方ないとして、筆者自身も忘れたらこの記事に戻るようにします。