ホーム WEBデザイン Bootstrap3のグリッドシステムと、CSS3のMedia Queriesを整理する。
WEBデザイン 5,462
WEB, レスポンシブ, CSS, Bootstrap, グリッドシステム, ブレイクポイント
Bootstrap3のグリッドシステムと、CSS3のMedia Queriesを整理する。
Bootstrap(ブートストラップ)のグリッドシステムはブラウザのウィンドウの幅に応じて12分割されたカラムを調整できる便利な機能です。
レスポンシブでWEBサイトを制作するのに今や必須のグリッドシステムですが、Bootstrap3のデフォルトのブレイクポイントとCSS3のMedia Queries(メディアクエリ)の情報を整理して紹介しておきます。
スポンサーリンク
Bootstrap3のクラス、ウィンドウサイズ、CSSの書き方一覧
class | col-xs- | col-sm- | col-md- | col-lg- |
---|---|---|---|---|
width | 〜767px | 768px〜991px | 992px〜1199px | 1200px〜 |
CSS | @media screen and (max-width: 767px) { } | @media screen and (max-width: 991px) { } | @media screen and (max-width: 1199px) { } | 指定なし |
上位の行から読み込まれますので、CSSを上から
/* col-lg- 1200px以上はそのまま */ /* col-md- 1199px以下 */ @media screen and (max-width: 1199px) { } /* col-sm- 991px 以下 */ @media screen and (max-width: 991px) { } /* col-xs- 767px 以下 */ @media screen and (max-width: 767px) { }
のように記述していけば、Bootstrap3のグリッドシステムの各ウィンドウ幅での動きと連動して変化します。
スポンサーリンク
Twitter でbbpをフォローしよう!
Follow @https_bbp_jpこんな記事もあります。
コメント
プロフィール
bbb
はWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。