gihyo.jpサイトのロゴ

週刊Webテク通信

2010年11月第3週号1位は、この際だから覚えてしまいたいIE7からのCSSの小難しいセレクタやプロパティいろいろ、気になるネタは、Facebook、新メッセージサービスを発表

2010-11-25

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

1. この際だから覚えてしまいたいIE7からのCSSの小難しいセレクタやプロパティいろいろhttp://webdesignrecipes.com/css-selectors-and-properties-with-ie7/

Internet Explorerのターゲットブラウザをバージョン7以上とすることにより、使えるようになる便利なCSSのセレクタやプロパティを紹介しています。

Yahoo! JAPANがIE6のサポート終了を発表したこともあり、日本でも脱IE6化が加速しそうです。そこで、IE6を対象外にするとこんな風に便利な記述ができますよという記事なのですが、後半はIE7でも対応していない疑似クラスやバグっぽい挙動の報告になっています。

どっちにしろIEにはまだまだ悩まされそうですが、それでも脱IE6化によってWeb制作の現場が変わっていきそうで楽しみですね。

図1　IEでも7からなら使えるCSSのセレクタやプロパティいろいろ
図1　IEでも7からなら使えるCSSのセレクタやプロパティいろいろ

2. Illustrator’s Live Trace: Sketch to Vector - Smashing Magazinehttp://www.smashingmagazine.com/2010/11/15/illustrator-s-live-trace-sketch-to-vector/

Adobe Illustratorのライブトレース機能を使い、スキャンした下絵をトレースするためのノウハウと、色付けのときのテクニックを紹介しています。

ライブトレース、ライブペイントは、Illustrator CS2からの新機能なので今さら感もありますが、これを機におさらいしてみてはいかがでしょう。

図2　Illustratorのライブトレース機能のノウハウ
図2　Illustratorのライブトレース機能のノウハウ

3. 450+ Cool Photoshop Lens Flare and Glow Brusheshttp://www.1stwebdesigner.com/resources/photoshop-lens-flare-glow-brushes/

レンズフレアやグローを表現するためのPhotoshopブラシを多数紹介しています。

これらのブラシを使えば、キラキラした表現が簡単に作れそうです。これからのシーズンだと、クリスマス関連のビジュアル作りに役立ちそうです。

図3　レンズフレアやグローを表現するPhotoshopブラシいろいろ
図3　レンズフレアやグローを表現するPhotoshopブラシいろいろ

4. 20 Best And Fresh CSS Portfolio Websites Designhttp://www.webdesignish.com/20-best-and-fresh-css-portfolio-websites-design.html

ポートフォリオサイトのデザインショーケースです。「⁠Best And Fresh 」ということで、この手のギャラリーであまり見かけないフレッシュなサイトが多いようです。

図4　ポートフォリオサイトのデザインショーケース
図4　ポートフォリオサイトのデザインショーケース

5. 40 Great Examples Of Transparency In Website Design | SpyreStudioshttp://spyrestudios.com/40-great-examples-of-transparency-in-website-design/

透過する要素をうまく使ったWebデザインのギャラリーです。

透過PNG画像や、CSSのopacityプロパティを使い、背景画像が透けて見えるようなデザインを実現したサイトが多数紹介されています。

図5　透過を使ったWebデザインのギャラリー
図5　透過を使ったWebデザインのギャラリー

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

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

20 Things I Learned About Browsers and the Webhttp://www.20thingsilearned.com/

今回は、Webサービスではないのですがブラウザで読む電子書籍を紹介したいと思います。

「20 Things I Learned About Browsers and the Web」は、GoogleのChromeチームによるブラウザとWebに関する入門書です。

内容は英語なので読んでられないよという人も、このインターフェイスにはぜひ一度触れてみて欲しいです。HTML5で作られているのですが、電子書籍の見せ方としてはかなりの高レベルな仕上がりとなっています。

ページめくりの効果や図版のアニメーションといった動きのあるところが目を惹きますが、目次や背景色の切り替え、プリントなどの機能もよく考えられていると思います。

ブラウザのバックボタンでページが戻れるところもいいですね。途中で読むのをやめると、次にアクセスしたときに途中から再開できる機能もあります。

制作者側から見ると、ブラウザで見る電子書籍の「型」がこれで決まってしまった感もありますし、一気にハードルが上がってしまった気もします。

このフォーマットの電子書籍が簡単に作れるWebサービスがあればいいですね。

図6　Googleによるブラウザで読む電子書籍
図6　Googleによるブラウザで読む電子書籍

おすすめ記事

記事・ニュース一覧