[レポ]大阪無料イベント：ユーザーテスト。CSSエディタの使い方＠アップルストア心斎橋

内容として、下記です。

• ユーザーテスト『ゲリラ ユーザーテスティング』を行う為のソフトウェア『Silverback』の使い方
• Yahoo UIの Reset CSSとエリック・メイヤーのEric Meyers Resetの紹介
• CSSエディタ『Style Mater』の紹介

ユーザーテスト『ゲリラ ユーザーテスティング』を行う為のソフトウェア『Silverback』の使い方

『Silverback』については、ユーザーテストを行うためのソフトウェアというのは、知っていたのだが、ユーザーテストを行うソフトというよりも『Silverback』のwebサイトで使われているCSSテクニックのほうでよく耳にしていた。（この場合は、大体がwebでの情報収集になるので、目と言ったほうが正確なのかもしれない。）

その『Silverback』のCSSテクニックというのは、『Silverback』には、複数の画像が背景画像として設置されている。

その複数の画像を使った背景画像の設置方法ということで、知られている。

『Silverback』のサイトの上部にある葉っぱが連なっている箇所は、一つの画像では無くて、複数の画像をCSSで表示している。

簡単にソースを書くと・・・

body{
	background: url(hoge.png);
}

#main {
	background: url(hog2.png);
}

#main2 {
	background: url(hog3.png);
}

↑　全く参考にならん（汗）

3Dバックグラウンドイメージという名でいろんなトコで目にした。

正直、ユーザーテストというよりも、CSSのほうでよく知っていたという感じでした。

Yahoo UIのReset CSSとエリック・メイヤーのEric Meyers Resetの紹介

2つとも、ものすごく有名なReset CSS

これらのReset CSSについての紹介でした。各ブラウザに設定されているユーザースタイルシートをリセットして、自らCSSをデザインしようという感じでした。

エリック・メイヤーに関しては、エリック・メイヤーのReset CSS以外にも、Diagnostic CSSも有名です。

Diagnosticは、診断という意味で、マークアップのときに、非推奨とされる要素や空の要素、空の属性などを視覚的に表示してくれるというCSSです。

Diagnostic CSSに関することはコチラから

CSSエディタ『Style Mater』の紹介

このセッションは、非常に興味深い印象を持ちました。

まず、アイコンがFirefoxに似ているということと、CSS3に完全対応しているということ、さらにDebugの高度さ、また、各セレクター等が、どのブラウザに有効なのか、その場でわかるということです。

通常、Dreamweaverや秀丸を使っているので、このStyle Materの機能にはたまげました。CSSのみのエディタも珍しいものです。さらに言えば、これさえあれば、非常に作業がスムーズになるような気さえします。非常に、ほしいエディタです。

贅沢を言えば、CSS以外にも使えたらいいのになぁ～とも感じました。

このセミナーは、INSIDE WebDirectionｓEastということで、11月に開催されるWebDirectionsEastのチケットが抽選で1名にあたるという特典がありました。

ともかく菊池さんとオリさん、スピーチお疲れ様でした。

最後に、菊池さんが「WebDirectionｓEastで待っています。あ、待っているのは、君達だよね（チケット）。」という嫌みったらしいセリフをはいて去っていったのが若干イラッとしました。