[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ

Post on:2016年9月12日

sponsorsr

スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。

各デバイスのブレイクポイントに合わせたメディアクエリの書き方

スマホ、タブレット、ラップトップ、デスクトップごとのブレイクポイント、そしてiPhone, iPad, Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。

Simple CSS Media Queries

デバイスの種類や各デバイスをクリックすると、コードが表示されます。

複数のブレイクポイントを使ったメディアクエリの書き方

スマホに320px、タブレットに768px、デスクトップに1200px、という感じで自分で数値を設定し、複数のブレイクポイントを使ったメディアクエリを生成します。

Responsive breakpoints

ブラウザ上で見ながら設定できるので、分かりやすいですね。

人気のフレームワークのブレイクポイントの設定

ブレイクポイントはいったいどれだけの値で、いくつ設定すればいいのだろう、という時には、人気の高いフレームワークの設定が参考になります。

Media Queries -Bootstrap

Bootstrapではデフォルトをスマホにして、3つのブレイクポイントを設定しています。モバイルファーストですね。

Extra small: 768px未満: スマホ（デフォルト）; スマホは、Media Queries無しで記述。
Small: 768px以上: タブレット
Medium: 992px以上: デスクトップ
Large: 1200px以上: ワイドスクリーン

Bootstrapのメディアクエリの設定

/* Extra small devices (phones, less than 768px) *//* No media query since this is the default in 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) { ... }

/* Extra small devices (phones, less than 768px) */

/* No media query since this is the default in 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){...}

Responsiveness -Bulma

2016年にリリースされた人気のフレームワーク「Bulma」もモバイルファーストです。4つのブレイクポイントが用意されています。

Mobile: 最大768px: スマホ
Tablet: 769px以上: タブレット
Desktop: 980px以上: デスクトップ
Widescreen: 1180px以上: ワイドスクリーン

Mixinsでは7つ用意されており、上記の他に以下の3つが加わります。

tablet-only: 769px以上 979px以下: タブレットのみ
touch: 979px以下: タッチデバイス
desktop-only: 980px以上 1179px以下: デスクトップのみ

Media Queries -Foundation

Foundationではデフォルトで3つのclassが利用され、5つのブレイクポイントがem単位で用意されています。

Small: デフォルト
Medium: 640px以上
Large: 1024以上

Foundationのメディアクエリの設定

/* Small only */@media screen and (max-width: 39.9375em) {}/* Medium and up */@media screen and (min-width: 40em) {}/* Medium only */@media screen and (min-width: 40em) and (max-width: 63.9375em) {}/* Large and up */@media screen and (min-width: 64em) {}/* Large only */@media screen and (min-width: 64em) and (max-width: 74.9375em) {}

/* Small only */

@mediascreenand(max-width:39.9375em){}

/* Medium and up */

@mediascreenand(min-width:40em){}

/* Medium only */

@mediascreenand(min-width:40em)and(max-width:63.9375em){}

/* Large and up */

@mediascreenand(min-width:64em){}

/* Large only */

@mediascreenand(min-width:64em)and(max-width:74.9375em){}

レスポンシブの確認が簡単にできる最強ツール

設定した通りにデザインが各デバイスのサイズでどのように表示できるか簡単にする時は、このブックマークレットが便利です。

Responsive Design Bookmarklet

上部のアイコンをクリックすると、各デバイスのサイズでページが表示されます。ブックマークレットなので、どのブラウザでもブックマークから利用できます。

Movatterモバイル変換

[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ

各デバイスのブレイクポイントに合わせたメディアクエリの書き方

複数のブレイクポイントを使ったメディアクエリの書き方

人気のフレームワークのブレイクポイントの設定

レスポンシブの確認が簡単にできる最強ツール

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info