週刊Webテク通信

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

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

1. Responsive Design Knowledge Hubhttp://www.ugurus.com/responsive-design

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

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

  • 定義
  • サンプル、ギャラリー
  • 考え方
  • チュートリアルとツール
  • フレームワーク
  • ワークフロー

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

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

2. UIPlayGround | CSS 3 Icons | CSS 3 Icons Generator | CSS 3 Icons Code Generatorhttp://www.uiplayground.in/css3-icons/

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

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

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

図2 CSSだけで作られたアイコン集
図2 CSSだけで作られたアイコン集

3. Creative "Meet the Team" & "About Us" Pages | CSS Matterhttp://cssmatter.com/blog/creative-meet-the-team-about-us-pages/

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

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

図3 アバウトページの実例集
図3 アバウトページの実例集

4. Review of Top Free CSS Editors - eWebDesignhttp://ewebdesign.com/free-css-editors/

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

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

図4 各種CSSエディターを紹介
図4 各種CSSエディターを紹介

5. 25 Popular HTML/CSS Code Snippets from CodePen - Flashuserhttp://www.flashuser.net/25-html-css-code-snippets-codepen

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

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

図5 CodePenで共有された便利なコードを紹介
図5 CodePenで共有された便利なコードを紹介

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

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

先週の気になるWebサービス OneTimeBoxhttp://www.onetimebox.org/

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

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

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

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

図6 シンプルなファイル共有サービス
図6 シンプルなファイル共有サービス

おすすめ記事

記事・ニュース一覧