on:2016年9月12日sponsorsスマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。Queries(メディアクエリ)の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。Queriesデバイスの種類や各デバイスをクリックすると、コードが表示されます。複数のブレイクポイントを使ったメディアクエリの書き方スマホに320px、タブレットに768px、デスクトップに1200px、という感じで自分で数値を設定し、複数のブレイクポイントを使ったメディアクエリを生成します。breakpointsブラウザ上で見ながら設定できるので、分かりやすいですね。人気のフレームワークのブレイクポイントの設定ブレイクポイントはいったいどれだけの値で、いくつ設定すればいいのだろう、という時には、人気の高いフレームワークの設定が参考になります。-BootstrapBootstrapではデフォルトをスマホにして、3つのブレイクポイントを設定しています。モバイルファーストですね。Queries無しで記述。-Bulma2016年にリリースされた人気のフレームワーク「Bulma」もモバイルファーストです。4つのブレイクポイントが用意されています。ワイドスクリーンMixinsでは7つ用意されており、上記の他に以下の3つが加わります。-FoundationFoundationではデフォルトで3つのclassが利用され、5つのブレイクポイントがem単位で用意されています。{}レスポンシブの確認が簡単にできる最強ツール設定した通りにデザインが各デバイスのサイズでどのように表示できるか簡単にする時は、このブックマークレットが便利です。Bookmarklet上部のアイコンをクリックすると、各デバイスのサイズでページが表示されます。ブックマークレットなので、どのブラウザでもブックマークから利用できます。