【CSS】@mediaで指定するカラム幅どうしよう…なあなたに贈るテンプレート｜ProgLearn

みなさん、こんにちは。どんぶラッコです。

CSSを書いていると、必ず出てくる問題がスマホ対応ですよね。

名無しさん

スマホ、タブレットによって画面を切り替える…何ピクセルで設定すればいいのか毎回迷ってしまいます。。

そこで今回は、Bootstrapの基準を参考に、@mediaのサイズ切り分け方について考えていきましょう！

Bootstrap の Grid System を見てみよう
サンプル
- コード
Dashのスニペットに登録しておくと便利！

Bootstrap の Grid System を見てみよう

BootstrapはTwitter社が作成している有名なCSSフレームワークです。

その中にGridSystemという考え方があります。

その中に、GridOpitons として、画面サイズごとに表示を切り替える機能がついています。

それぞれの大きさと画面大きさの目安はこんな感じです。

名称	大きさ(px)	デバイス(目安)
Extra small	<576px	スマートフォン
Small	≥576px	スマートフォン
Medium	≥768px	タブレット
Large	≥992px	ノートパソコン
Extra large	≥1200px	デスクトップパソコン

今回はこのレギュレーションに沿って @mediaを作ってみましょう。

サンプル

See the Pen eYZYjpj by cha1ra (@cha1ra) on CodePen.

サンプル画面を表示させてWebブラウザの表示幅を変えてみてください。

表示が切り替わっているのが確認できます。

コード

/* xs */

/* sm */
@media (min-width: 576px) {
  
}

/* md */
@media (min-width: 768px) {
  
}

/* lg */
@media (min-width: 992px) {
  
}

/* xl */
@media (min-width: 1200px) {
  
}

min-width: ***pxという書き方で、画面幅が ***px以上なら … という指示になります。

なので、 @media で囲われていない部分に記述する物が xs サイズのスタイルになります。