ページ内のブレイクポイントを一覧にしてくれるブックマークレット。ページ内の「Breaq」って書いてある青いブックマーク部分をお気に入りなどにドラッグして使います。ブレイクポイントを調べたいページを表示した状態で、事前にブックマークに登録しておいたBreaqをクリックすると、ページ内のブレイクポイント一覧がブラウザウィンドウ右下に出力されます。境目や各BPの位置付けなどが分かりやすく、シンプルに知りたい情報だけに機能が絞られてる点がとってもナイス。常用ブックマークレットフォルダに突っ込んでおきました。
デバイスごとにメディアクエリーを生成してくれる便利なサイト。例えばiPhone 6 Plusを選ぶと、max-width : 720px and max-height : 1280pxという形でCSSを出力してくれます。デバイスキメ打ちでメディアクエリー書きたい時に便利ですね。またサイト上部には一般的なスマホやタブレット向けのメディアクエリー生成ボタンも用意されており、またOSごとに抽出する事もできます。レスポンシブレイアウトでコーディングする時に役立ちそうです。
レスポンシブレイアウトの動作確認ツール。確認したいサイトのURLを放り込むだけで、様々なデバイスでの表示シミュレーションができます。指標としてはXLがPC、LGがiPadのランドスケープ、MDがiPadのポートフォリオ、SMがiPhoneのランドスケープ、XSがiPhoneのポートフォリオという感じです。Bootstrapとかの表示切り分けclassと基本的に同じ命名ルールなので分かりやすいです。サクっと複数デバイスでの確認をしたい時に便利ですね。
マウスオーバーでアニメーションするハンバーガーアイコンの作例が多数紹介されています。それぞれアニメーションや、マウスオーバー後の形が異なるので、用途によって使い分ける事ができます。導入方法についても詳しく解説されており、class名を変更するだけでアニメーションを変更できるようです。スマホ版のナビゲーション作る時に使えそうです。
レスポンシブレイアウトしたサイトの挙動を、様々な端末でまとめて確認できる便利なサイト。画面最上部にある「Enter your site」に確認したいサイトURLを入力すれば、iPhoneやAndroid、iPadなどのタブレット端末の解像度で一気にレンダーしてくれます。縦持ち時だけでなく横持ちの際にどう表示されるかも確認できるのが便利。このサイト使って一気に確認すれば、物理的に端末持ち替えて確認するよりかなり手間が省けそうです。
メディアクエリーの、各デバイスごとのブレイクポイントをまとめた記事。レスポンシブレイアウト組む際、デバイスごとに微調整するのに使えそうです。紹介されているデバイスはiOS系では各種iPhoneとiPad、Android系ではGalaxy S3, S4, S5。まぁ一般的という意味でAppleとSamsungの各種デバイスが紹介されています。自分の場合は最近はブレイクポイント1箇所、ランドスケープでPCレイアウトで見せたい場合は767px以下、ランドスケープでもスマホレイアウトで見せたい場合は480px以下にしてます。ブレイクポイント何個も作ると作るのめんどいんですよね。
レスポンシブレイアウトのパターンというか、手法をまとめたサイト。レイアウト、ナビゲーション、画像、ビデオなどのメディア類、フォーム、テキスト、モジュール類に分けて、それぞれ「PCサイトではこういう表示、スマホではこんな感じ」という感じで複数の手法を紹介しています。例えばレイアウトの項目では、スマホ表示時にどのようにカラムを落とすのか。また落としたカラムを隠すのであれば、どういう再出現手法があるのかなど細かく紹介しています。レスポンシブレイアウトでスマホ対応する際に、表現手法について顧客と相談する際にめっちゃ役に立ちそう。とってもナイスです。
レスポンシブ・レイアウトで、かつパララックス・スクロールにも対応したHTML5テンプレート。需要の多いこの2つに対応しているってのはなかなかナイスです。静的なHTMLテンプレートは無料で、Wordpressテーマとなっているものは48ドル（今現在）で販売されています。またマップのパーソナライズや、グリッドレイアウト、カルーセル（イメージスライダー）にも対応しているので、モダンなコンテンツ表示手法にはひと通り対応しているという印象。なかなかイイんじゃないでしょうかこれ。
