週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけた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にファイルを保存するためのサービス

今週の気になるWebネタ

Facebookポイントが日本でも決済システムとして利用可能に - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1106/16/news037.html

Facebook内で利用できる仮想通貨Facebook Credits(日本ではFacebookポイント)が,日本を含む13カ国で使えるようになるそうです。

以前ハワイのスーパーマーケットでiTunesカードと並んでFacebook Creditsのカードが売っているのを見ました。日本でも発売されるんでしょうか。

Facebook関連の用語って,英語版と日本語版とで違っているものが多いようです。チェックインクーポンは英語では「Check-In Deals」⁠Facebookスポットは「Facebook Places」です。カタカナを使っているのに英語版と違うというのが気になりますね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入