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

スマホやタブレット、ラップトップ、デスクトップ、最近は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以上: ワイドスクリーン

サイトのキャプチャ

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以上

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

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

サイトのキャプチャ

Responsive Design Bookmarklet

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

sponsors

top of page

©2024 coliss