Jump to the content

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

Bootstrap

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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×