週刊Webテク通信

2011年6月第3週号1位は、HTML5とCSS3によるフレームワークいろいろ、気になるネタは、Facebookポイントが日本でも決済システムとして利用可能に

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

1. 15 Handy HTML5/CSS3 Frameworks For Web Developers | Splashnologyhttp://www.splashnology.com/article/15-handy-html5css3-frameworks-for-web-developers/994/

HTML5とCSS3を使ったWebサイトを作るためのフレームワークを15個紹介しています。最近この手の便利なフレームワークが増えているようです。

これらのフレームワークは一般的なブラウザできちんと表示されるような対策がされているので、IE対策などに費やされる時間を短縮できるはずです。今後JavaScript界でのjQueryのような、スタンダードな存在が出てくることを期待したいですね。

電子書籍用、モバイル用、ゲーム用のフレームワークも紹介されていました。

図1 HTML5とCSS3によるフレームワークいろいろ
図1 HTML5とCSS3によるフレームワークいろいろ

2. Five Useful Interactive CSS/jQuery Techniques Deconstructed - Smashing Magazinehttp://coding.smashingmagazine.com/2011/06/16/five-useful-interactive-css-jquery-techniques-deconstruted/

Webサイトでよく使われるテクニックを、CSSとjQueryで実現する方法を詳しく解説した記事です。

紹介しているのは以下の5つのテクニックです。

  1. 立体的なテキスト
  2. アニメーションする背景画像
  3. メガドロップダウンメニュー
  4. アニメーションするスライドショーのナビゲーション
  5. アニメーションするアイコン
図2 CSSとjQueryで作る便利なインタラクション
図2 CSSとjQueryで作る便利なインタラクション

3. How a Good Facebook Fan Page Should Look Like: Tips, Best Designs | Inspired Magazinehttp://www.inspiredm.com/facebook-fan-page-tips-designs/

Facebookページを作る上でのTipsと、優れたデザインのFacebookページのギャラリーです。

Tipsとしては、以下の6つが紹介されていました。

  1. ページ名をよく考える
  2. 独創的なプロフィール画像を使う
  3. 面白くてわかりやすいランディングページをデザインする
  4. Facebookアプリを追加する
  5. Google Analyticsを設置する
  6. 高品質なコンテンツを提供する
図3 Facebookページを作るのに役立つTipsとギャラリー
図3 Facebookページを作るのに役立つTipsとギャラリー

4. Media Querieshttp://mediaqueri.es/

CSS3のMedia Queries(メディアクエリ)を使い、ウィンドウサイズにあわせてレイアウトが可変するサイトのギャラリーです。

かなりたくさんのサイトが可変レイアウトを採用しています。日本ではまだあまり見かけませんが。

図4 Media Queriesを利用した可変レイアウトのギャラリー
図4 Media Queriesを利用した可変レイアウトのギャラリー

5. Fresh Examples of Clean and White Web Designs | Mustifiedhttp://mustified.com/2011/06/11/fresh-examples-of-clean-white-web-designs/

すっきりした白ベースのWebデザインのギャラリーです。

ミニマルなスタイルのもの、イラストを使ったものが多いようです。

図5 白ベースのWebデザインのギャラリー
図5 白ベースのWebデザインのギャラリーー

そのほか、先週の記事の中から、気になるニュースを3つ紹介します。

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

URL Droplethttp://urldroplet.com/

URL Dropletはオンライン上でDropboxにファイルをダウンロードできるサービスです。

ファイルの保存されているURLを入力して「Save」ボタンを押すと、Dropbox上にファイルが保存されます。

スマートフォンを使ってファイルをダウンロードするのによさそうです。

出先でスマートフォンでファイル保存の処理をしておけば、家や会社でPCに向かったときには既にファイルがダウンロードされていて便利そうです。自分のネット接続環境に依存せずに、大きなファイルをダウンロードできることもいいですね。

図6 Dropboxにファイルを保存するためのサービス
図6 Dropboxにファイルを保存するためのサービス

おすすめ記事

記事・ニュース一覧