2013年10月第3週号 1位は、レスポンシブWebデザインの情報をまとめたポータル的なページ、気になるネタは、iPhone 5c純正ケースの丸い穴を使うゲームが登場

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2013年10月14日～10月20日の間に見つけた記事のベスト5です。

レスポンシブWebデザインの情報をまとめた、ポータル的なページです。

レスポンシブWebデザインに関するネット上のいろいろな情報が、以下の項目に分類されて掲載されています。

学習する、サンプルを探す、ツールやフレームワークを探すなど、レスポンシブWebデザインに関する情報が一箇所にまとめられた便利なページです。

画像を使わずに、CSSだけで作られたアイコン集です。

CSSだけで難しい絵を再現しただけの実験的なものではなく、実際のサイト制作に使用できるものとして用意されているようです。

CSSのコードとHTMLのコードをコピーするだけで使えるようになっており、ブラウザの対応状況も記載されています。

「Meet the Team」「⁠About Us」といった、いわゆるアバウトページの実例集です。

並んだ顔写真の全部の顔がカーソルを追うなど面白い作りのものが目立ちますが、一昔前に流行った手法という印象もしてしまいますね。

各種CSSエディターを紹介した記事です。基本的にはデスクトップアプリを取り上げています。タイトルには「フリー」とありますが、Espressoなど有料のものも混じっているようです。

一番手に紹介されていて、たぶん最もポピュラーだと書かれている「Stylizer」ですが、わたしは知りませんでした。各種ブラウザ用のプラグインが用意されていて、保存前のCSSの適用状態をすぐにプレビューできるそうです。

ナビゲーションやインターフェイスなどを実装するHTML＆CSSテクニックを、CodePenより紹介しています。

CodePenはコードを共有するサイトで、ブラウザ上でコードを変更して確認することもできます。

そのほか、最近の記事の中から、jQuery関連の記事を紹介します。

40 Amazing jQuery Plugins For 2013
jQueryプラグインを多数紹介しています
How to Create a Mobile Panel with jQuery Mobile
jQueryモバイルでスライドして横から現れるoff-canvasメニューを実装する方法
レスポンシブWebデザインに対応した「jquery.heightLine.js⁠」⁠ - to-R
レスポンシブ対応の、要素の高さを揃えるjQueryプラグインを紹介しています

先週の気になるWebサービス

OneTimeBoxは、非常にシンプルなファイル共有サービスです。ユーザー登録不要で、1GBまでのファイルを保存するボックスを作れます。

ボックスには固有のURLが割り振られるので、そのURLを教えた人がアクセスできます。パスワード保護などの機能はありませんし、アクセスした誰もが同じ権限なのでアップロードした人以外でもファイル削除ができてしまいます。

保存期間は1週間なので長期的な保存には使えません。1つのボックスに入れられるファイル数には制限はないようです。

ブラウザ上での画像プレビューなどの機能はなく、いたってシンプルな作りですが、メール添付するには大きなファイルの受け渡し用途に良さそうです。

穴のあいたiPhone 5c純正ケースを利用して遊ぶアプリが登場しました。以前はiPadのカバーを利用したアプリもありましたし、いろんなこと考える人がいるもんですね。

ケースの穴を画面側に付けると穴全部が活かされるわけじゃありませんし、画面も狭くなってしまうのですが、まあ早く出したもん勝ちのアプリと言えるでしょう。

この穴からうまく覗くように写真やグラフィックスを配置する「Case Collage」というアプリもありました。これは、作ったデザインをプリントアウトして、カバーとiPhoneの間に挟むんですね。

iPhone 5c純正ケース用「着せ替えシート」として、キャラクターもののシートを出すと売れるかもしれませんね。マンガやアニメのキャラクターたちが穴から顔を出しているのってカワイイんじゃないでしょうか。