既存Webサイトのフォント指定を、アレコレいじくる事のできるサイト。画面左上の入力フォームにURLを突っ込む事でサイトがロードされ、場所ごとにフォント指定を変更する事ができます。場所の指定はタグで行い（デフォルトはAタグ）、次にFont Faceやサイズ、スタイルなどを変更します。Font FaceについてはGoogle Fontsがロードされているようです。変更するフォント指定ができたら、ページ右上にある「Share / Export」ボタンからフォント指定のタグを取得する事ができます。サイトのフォント類を再考したい時なんかに、見た目を確認しながら作業できるのがイイですねこれ。
各種タッチデバイスのディスプレイ仕様を一覧で見る事のできるサイト。というかトップページはココで、そちらでは自分が使っているブラウザの仕様を見る事ができるというものなんだけど、個人的にこっちのデバイス確認ページの方が便利だなーと思ったのでこちらを紹介。論理ピクセル数、物理ピクセル数に加えて、ピクセルレシオやPPIについても紹介されています。表のヘッダーをクリックするとソートし直しもできます。モバイルサイトデザインする時の指標として使えそうです。
WebサイトのURLを入力する事で、対象サイトのロードタイムを計測してくれます。結果はパフォーマンスをグレードやロードタイム、ページの総容量、リクエストの数で評価してくれます。またこのサイト便利なのが、コンテンツの種類ごとにサイズを分けて表示してくれたり、どのファイル（外部スクリプトなども含みます）がボトルネックになっているのかまで調べてくれるという点。結果画面一番下の「File requests」のエリアを「Load time」でソートすると、どのファイルがクソ重いのか1発で分かります。Webサービスなどでページパフォーマンスチューニングする際に超使えそうです。ナイスですねー。
クッソ使える（このへんの訳で合ってんのかなこれ）コードスニペット4つを紹介した記事。かっちょいいローディングバー、Pure CSSなパララックスピクセル、Pure CSSなカルーセル（イメージスライダー）、マウスオーバーで拡張するフォトギャラリーの4つが紹介されています。Codepenを使って紹介されているので動作確認も導入もサクっとできそうです。JSいらずのカルーセルとかイイっすね。
様々なマウスオーバーエフェクトのギャラリー。各サムネールにマウスオーバーする事でアニメーションが再生され、Show Codeをクリックする事でコードを確認できます。フレームワークとしてBootstrapが使われているようなので、Bootstrapベースのサイトでならサクっと実装できそうです。Twitter、Facebook、Instagram、Dribbbleへの投稿ボタンが用意されているものもあります。かっちょいいエフェクト多めです。
クールなCSSデザイン作例やTipsを紹介するギャラリーサイト。アニメーションする作例についてはGifを使って紹介されているので、動きも含めて閲覧できます。わりと最近始めたばかりのTumblrブログのようで掲載数こそ少ないけど、紹介のされ方がなかなかナイスなので、今後掲載作例が増えていくとイイなーと思いました。ちょっとしたCSS装飾のネタ帳としても便利そうです。パラダイスですしね。
指定したサイトがモバイルフレンドリー（モバイル対応済み）なのかどうかを調べてくれるGoogleのサービス。使い方は簡単で、入力フォームに調べたいサイトのURLを突っ込むだけ。ちょっとだけ待たされた後で結果を出してくれます。モバイルフレンドリーでないと診断された場合は、どうすれば対応扱いとなるのかまで教えてくれます。モバイル対応の可否って検索結果にも関連してくるので、最近じゃSEO的にも無視できないですからね。レスポンシブレイアウトでサイト作った時の、結果の確認にも使えそうです。
Star Warsのあらすじ説明のイントロを再現したCSS。JSとか使わずにCSSだけで再現しているようです。あらすじについてはもちろんテキストで書かれていて、最後に出てくるダウンロードボタンはちゃんとクリックする事ができます。ネタとはいえしっかりと作られててスゲーなぁと思いました。フォースの導きがありそうな作例ですな。
