週刊Webテク通信

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

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

ネットで見かけた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によるブラウザで読む電子書籍

今週の気になるWebネタ

Facebook,新メッセージサービスを発表--「Social Inbox」などを採用へ - CNET Japanhttp://japan.cnet.com/news/service/story/0,3800104747,20422888,00.htm

Facebookが新たなメッセージングシステムを発表したそうです。

電子メールやFacebookメッセージ,インスタントメッセージやソーシャルメディアでのやりとりなどを統合的に扱えるもののようです。

電子メールを置き換える存在になるんじゃないかと期待していたGoogle Waveは開発終了となってしまいましたが,Google Waveの開発に携わったLars Rasmussenという人がFacebookに転職していたという事実を発見しました。このFacebookのメッセージングシステムは,Google Waveのリベンジなのかもしれません。

個人的には電子メールの再発明を早くどこかがやってくれないかと思っているので,Facebookのこのシステムには注目していきたいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入