週刊Webテク通信

2009年3月第1週号 1位は,CSSハックしてはいけない5つの理由/気になるネタは,AsusのキーボードPC は価格4-6万円で5月か6月発売!

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

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

1. CSSハックしてはいけない5つの理由 | エンタープライズ | マイコミジャーナルhttp://journal.mycom.co.jp/news/2009/03/05/040/index.html

Sitepointの「5 Reasons to Avoid CSS Hacks and Conditional Stylesheets」という記事では,CSSハックは短期的には効果があるが,長期的には問題が起きる可能性があるので使わない方がいいということが5つの理由で解説されています。

その記事を元に,さらに別のヒントも加えてまとめたのが,このマイコミジャーナルの記事です。

わたしはあまりClearfix(定番のCSSハックのひとつ)を使わないので,IE7が出てClearfixが効かないと騒ぎになったときにも対策に追われずに済みました。その時のように,CSSハックを使っていることによる問題が起きる可能性は確かに低くはないでしょう。

でも,ネットでの有志によりIE7対応版のClearfixもすぐに広まったので,定番のCSSハックを使っている限り,何か問題が起きてもいずれなんとかなるという気もしますね。

「CSSハックしてはいけない5つの理由」を肝に銘じつつ,CSSハック部分を別ファイルにしておくなど,メンテナンス性を考えて必要最小限の箇所に使うというのが現実的なのではないでしょうか。

なお,SitePointではこの記事に関連して,IE6の問題をvalidな(文法的に正しい)HTML/CSSで解決する方法を解説した10 Fixes That Solve IE6 Problemsも発表しています。マイコミジャーナルでも,それを受けての記事IE6問題に対処する10のテクニックがアップされていました。

2. Safari 4が対応したCSSの新機能:グラディエント,反転,マスク - builder by ZDNet Japanhttp://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20389157,00.htm

WebKitが採用したCSSの新機能「グラディエント」,「反転」,「マスク」をSafari4(ベータ版)でサポートしているそうで,それらの機能の解説記事です。

また,同コーナーで過去に紹介されているCSSによるトランスフォーム(回転,拡大・縮小,スキュー,移動)も要チェックですね。

CSS3による角丸,ドロップシャドウなどとあわせ,IE以外だと「よりリッチ」というページが今後増えていくのかもしれません。

なお,この辺のWebKitの独自拡張に関しては,シリーズ妄想 (1) - アップルはWebKitをFlash対抗プラットフォームに進化させようとしているのか | 謎解きウェブ | BLOG × WORLD ENDINGによる考察も興味深いです。

図1 グラディエント,反転,マスクの簡単な作例を紹介しています

図1 グラディエント,反転,マスクの簡単な作例を紹介しています

3. 費用をかけずにウェブページを最適化 Googleウェブサイトオプティマイザー活用術:MarkeZine(マーケジン)http://markezine.jp/article/detail/6673

LPO(ランディングページ最適化)という言葉を聞くようになって久しいですが,このLPOでの仮説・検証を行うのに役立つGoogleウェブサイトオプティマイザーの使い方の紹介記事です。もちろんランディングページ以外のページでも利用できます。

Googleウェブサイトオプティマイザーでは,画像違い,キャッチコピー違いなど複数パターンのページを生成し,どのページがコンバージョン率が高いかを検証することができます。この手のツールは有料のものが多いのですが,Google版は無料なのでお手軽に試すことができますね。

Googleウェブサイトオプティマイザー自体は昔からあるサービスですが,使ったことはないという人が多かったのか,この記事はソーシャルブックマークのブックマーク数も多いようです。

4. 10 Blog Designs with Innovative Layouts | Web Design Ledgerhttp://webdesignledger.com/inspiration/10-blog-designs-with-innovative-layouts

斬新なレイアウトのブログデザイン10選です。新聞風のレイアウトが多いですね。

一番目に紹介されているSpaceCollectiveというサイトのエントリー一覧から個別エントリーの表示の仕方はスゴイです。一昔前ならこういった表現はFlashなしでは考えられなかったでしょうね。

SpaceCollectiveもそうですし,他のサイトでもテキスト,画像を含めたひとまとまりのブロック全体をクリッカブルにしているケース(いわゆるリンクボックス)が多いようです。ちなみに,わたしは最近リンクボックスを作るのにFittedというjQueryのプラグインを利用しています。

図2 紹介されているサイトはどれも必見です

図2 紹介されているサイトはどれも必見です

5. How To Use Icons To Support Content In Web Design | Design Showcase | Smashing Magazinehttp://www.smashingmagazine.com/2009/03/03/how-to-use-icons-to-support-content-in-web-design/

Webデザインでのアイコンの使い方についてのレクチャー記事です。 アイコンをうまく使っているページのショーケースも豊富で,アイコンデザインやレイアウトの参考にもなりそうです。

アイコンの効果的な使い方を実例から学ぶチュートリアル | コリスに意訳されていました。

以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

そのほか,先週の記事の中から気になる情報をピックアップして紹介します。

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

25 Websites To Have Fun With Your Photos | Web 2.0http://www.hongkiat.com/blog/25-websites-to-have-fun-with-your-photos/

今回は,写真を合成したり加工したりして楽しめるWebサービスをいろいろ紹介しているサイトを取り上げます。

写真画像データを使って楽しんじゃおうという面白系のものがほとんどです。子供の写真や彼女・彼氏の写真を使うと盛り上がりそうですね。

これらのサービスを見ていて思ったのですが,写真を自動的に面白写真にして表示してくれるデジタルフォトフレームがあったら楽しいかもしれません。

図3 スクリーンショットを見れば,それぞれどんなサービスかすぐに分かると思います

図3 スクリーンショットを見れば,それぞれどんなサービスかすぐに分かると思います

今週の気になるWebネタ

AsusのキーボードPC は価格4-6万円で5月か6月発売! : Gizmodo Japan(ギズモード・ジャパン), ガジェット情報満載ブログhttp://www.gizmodo.jp/2009/03/asuspc_4656.html

Eee PCでおなじみAsusからパソコン内蔵キーボードが発売されるそうです。右側にはタッチパネルの液晶モニタが付いています。これを見て,液晶を右にするか左にするかで悩んだんだろうなぁとか思ったのですが,テンキー部分を液晶にするという発想だったんですね。

こういう形のポメラというのもいいかもしれません。パソコンとつなぐとデータを転送しつつキーボードにもなるとか。

Asusは他にも,ニンテンドーDSを大きくしたようなデュアルタッチパネルのノートPCを試作したりと,なかなか面白い動きを見せています。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入