週刊Webテク通信

2010年5月第1週号1位は、CSS3の新機能をIEでも実現させる方法、気になるネタは、1年で70億枚の顔写真をスキャンしたFace.comが顔認識APIを無料で一般公開

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

1. CSS3 Solutions for Internet Explorer - Smashing Magazinehttp://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

CSS3の新機能と同様のことをInternet Explorerでも実現するためのテクニック集です。

透明度、角丸、ドロップシャドウ(テキスト/ボックス⁠⁠、グラデーション、複数の背景画像、回転を、IEでも実現するためのコードや注意点が解説されています。

テキストに影をつけるtext-shadowプロパティに関してはjQueryプラグインを使ってJavaScriptで実現していますが、ほかのものはIE独自のfilterプロパティやbehaviorプロパティを使った例を紹介しています。

IE独自のプロパティを使うと標準に準拠したCSSではなくなるなど、それぞれの欠点や制限もくわしく説明されています。

回転やグラデーションについては、filterを使ってもCSS3で可能なことの全てはカバーしきれないそうです。

図1 CSS3の新機能をIEでも実現する方法
図1 CSS3の新機能をIEでも実現する方法

2. 15 In-Depth Examples of Addictive User Experience | Design Shackhttp://designshack.co.uk/articles/inspiration/15-in-depth-examples-of-addictive-user-experience

印象深いユーザー体験を与えるインターフェイスデザインを集めた記事です。

Webサイトに限らずiPhoneアプリやデスクトップアプリケーションからもピックアップされています。

使っていて心地よさを感じるソフトは特別な存在になったりしますよね(わたしにとってはCSSEdit、Espressoがそう⁠⁠。Webサイトでも心地よいユーザー体験を与えてファンになってもらえるのが理想かもしれません。

図2 くせになりそうなインターフェイスデザイン集
図2 くせになりそうなインターフェイスデザイン集

3. 30 Useful Web-Based Applications for Designers | Most Inspired: Design Inspiration Bloghttp://www.mostinspired.com/blog/2010/04/27/30-useful-web-based-applications-for-designers/

デザイナーの役に立つオンラインアプリを紹介した記事です。

カラーパレット作成ツール、CSS編集ツール、メニュー/背景パターン/ダミーテキストのジェネレーターなどが紹介されています。

図3 デザイナーのためのオンラインアプリいろいろ
図3 デザイナーのためのオンラインアプリいろいろ

4. Excellent Tutorials to keep Your Css Skills Up to date | Designer Wall | The Best of Css, Web Design, Tuts & Inspirationhttp://designerwall.co.za/2010/04/excellent-css3-tutorials-to-keep-your-css-skills-up-to-date/

CSSのスキルアップに役立つ、おすすめのCSS3チュートリアル集です。

CSS3の新機能のレクチャーや、今までJavaScriptを使っていたような効果をCSS3だけで実現したもの、jQueryと組み合わせた高度なインタラクションなど、いろいろなチュートリアルが紹介されています。

図4 CSS3のチュートリアル集
図4 CSS3のチュートリアル集

5. 97 Beautiful Navigation for your Inspiration | TutToasterhttp://www.tuttoaster.com/97-beautiful-navigation-for-your-inspiration/

グローバルナビゲーションメニューを中心とした、美しいナビゲーションを大量にまとめたショーケースです。

図5 美しいナビゲーションのショーケース
図5 美しいナビゲーションのショーケース

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

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

Fonts.com Web Fontshttp://webfonts.fonts.com/

Fonts.comがウェブフォントサービスを始め、現在ベータ版として公開されています。

Web Fontsを使いサーバー上のフォントをCSSで読み込ませるため、ユーザーの環境にインストールされていないフォントを、ブラウザ上で表示できるサービスです。

このFonts.com Web Fontsは、日本語のフォントにも対応しているのがうれしいところ。今のところ、平成明朝、平成角ゴシック、平成丸ゴシックの3書体が使えます。

全てのメジャーなブラウザに対応していて、Internet Explorer 4以上に対応しているところもいいですね。

使い方も簡単で、どのセレクタに対しどの書体を指定するのかはブラウザ上で設定します。HTMLに追加するのは生成されるJavaScript一行だけで、CSSファイルをいじる必要もありません。

一度JavaScriptを追加してしまえば、その後のフォントの変更や追加は全てFonts.com Web Fontsの管理画面からできてしまいます。便利ですね。

使い方などは、ついにウェブでも有名書体が使える!ウェブフォントサービス Fonts.com Web Fonts β版が運用開始 - フォントブログに詳しく説明されています。わたしも参考にさせていただきました。

日本語フォントの使えるウェブフォントサービスとして、デコもじという日本のサービスもスタートしましたね。こちらはブログをやっている個人向けのようで、手書き風文字などかわいい文字がそろっています。

図6 Fonts.comによるウェブフォントサービス
図6 Fonts.comによるウェブフォントサービス

おすすめ記事

記事・ニュース一覧