[SESSION-1] CSS3＋jQueryで行こう！
益子 貴寛　さん　(株式会社サイバーガーデン)

益子さんによるCSS3とそれに絡めたjQueryのお話。なんかCSSのテクニック系のセッションって久しぶりだなぁと感じました。

CSS3とJavaScriptで思い出されるのが、2006年のCSS Nite in Nagoyaでのヤスヒサさんのセッション「CSS3をJavaScriptで先取り実装！」でしょうか。当時「nth-childすげー！」といっていた頃からもう2年半ほど立ちますが、未だにCSS3を実務にときくとまだかな、という感があります。しかし、今回のお話のように:nth-child()のような一部の仕様はjQueryで簡単に実装できるようになったので、敷居はだんだんと下がっている気がします。

前置きは長くなりましたが、今回のお話は今すぐつかえるCSS3という切り口でのCSS3の話題です。結構駆け足でお話が進んでいったため、CSS3はどう書けばいいか、ではなく、CSS3(とjQuery)でどんなことができるか、というある意味オーバビュー的なセッションだったと感じました。

僕が気になったCSS3に関する部分を箇条書きで。

• CSS3のブラウザサポート状況は、実は結構多い(Internet Fucking Explolerファミリ以外)
• CSS3はcss3.cssのような別ファイルでの管理がいいよ
• 今すぐ使えるセレクタやプロパティ
  • [attr^="value"]は印刷CSSで、:afterやcontentプロパティと組み合わせて
  • hover時に背景に色を付けて画像などにopacityプロパティを設定することで、色が変わったような効果がでてメニューなどに使える。IEはfilter: alphaで対応。
  • border-radiusプロパティはデザインのアクセントに
  • text-shadowプロパティはグロー効果でも使える

特にopacityプロパティの使い方はすごく今風だなと思いました。これは今すぐ使えそう！
続いてjQueryに関することを。

• IEで使えない:hover, :focusはjQueryでクロスブラウザ対応に
• マウスオーバーにウインク効果を。fadeTo関数を使うことでリッチに表現
• ロールオーバーはhover時にimg要素のsrc属性を直接書き換えることで実現可能
• 他の人の拡張ライブラリを利用する場合はdocument.writeでJavaScriptの読み込みを書くとheadを汚さずできる
• Google AJAX APIはいざというときがあるのでクライアントワークでは使わない方がいいかも

document.writeでJavaScriptの読み込みを書くのは初めて知りました。確かに後から追加するのが楽になるので便利かもしれませんね。どっちみちJavaScriptですし。

[SESSION-2] CSSレイアウト：IE 6対応のかんどころ
小林 信次　さん　(株式会社まぼろし)

小林さんによる、わがままなInternet Fucking Explolerくん応対講座。CSS Niteの再演ということで、以前にスライド等はチェックしていました。
hamashunさんのついったー発言や、矢野りんさんの擬人化IE^[2]で会場笑。ぼくは過去を棄てたIE8 beta氏が最高に好きです。

後半は非常に実践的な内容でかつ簡潔にまとまっていて、IEのバグを復習するにはかなりよいお話だったのではないでしょうか。

しかしながら、僕の関心はどうしてもこちらに向いてしまうのでした･･･。

正式版として真に覚醒した(と信じたい)IE8氏の姿が見たい。あーでもどちらにせよ昔どこぞやに繋がれてたプラグの跡がちらほら見えるんだろうなぁ。

Lightning Talks

今回のLightning Talksは事前に応募されていた3名の方が以下の内容でお話されました。

• HTML+CSSで組まれたトーナメント表を生成・管理できる「はなまるトーナメントメーカー」
• ID・パスワードやダミーテキストの自動生成ツールなどの「Web小物ツール」
• カラーデザイン勉強会の導入と紹介

特にカラーデザイン勉強会の紹介は、はじめ映画の宣伝か何かかと思っていたら、映画(ヨーロッパの歴史もの?)の背景を汲んで出演者のドレスのカラーが選ばれてる、という流れにもっていき、最後にこんな内容を勉強会で話しているので興味があったらどうぞ、という素晴らしい話のもっていきかたでびっくりしました。

[SESSION-3] デザインビュー派？ コードビュー派？ Dreamweaverでのコーディング再点検
鷹野 雅弘　さん　(株式会社スイッチ)

鷹野さんのDreamweaverの効率的な使い方から仕事の効率化のお話。前半は特にDreamweaverの話というよりもむしろライフハック的な、「ムリ・ムダ・ムラ」を省くためのテクニックのお話で面白かったです。

ムダを省くために、制作環境から気をつけることとして、

• IMEはATOK最強、ATOK Syncでパソコン間で自分が育てた辞書を共有
• モニタの明るさ、部屋の明るさ
• モニタやフォント
• キーボードやマウス

フォントのお話では、鷹野さんはCodaに同梱されているPanic SansをDwに設定しているとのことでした。僕はDroid Sans MonoをskEditに設定して使っています。

これらはBitstream Vera Monoというフォントをベースとした派生フォントですが、他にもEspressoに同梱されているEspresso Monoや、DejaVuなどがあります。それぞれ微妙に違っていますが、どれも視認性が高く、コーディングにはもってこいのフォントです。ぜひお試しあれ。

また「コード入力のムダを省く」として、Dreamweaverのお話では、デザインビューを利用することによるコーディングの手間を省く方法などが紹介されていました。Dw使いではない僕には詳細は把握できませんが、デザインビューとコードビューの左右分割での作業はとても便利だなぁと思いました。

最後の方でお話されていた、環境やツールのテクニックで制作の効率化は図れるものの、Webで成果を出すためにはリアルに関わっていくことが重要、ということにはとても納得しました。あと、セッション頭のリラックス法などプレゼンのスタイルで学ぶところが多いセッションでした。

[SESSION-4] ブランディングの正体
古庄 正尚　さん　(モンキーワークス株式会社)

モンキーワークスの古庄さんによるブランディングのお話。「ブランディング」というカテゴリのお話は多分はじめて聴いた気がします。難しいお話もありましたが、新鮮な話題で楽しかったです。

今回のお話の中で、個人ブランディングの重要性についても触れられていました。「個人ブランディング表」というものが参加者に配られ、下記の項目を埋めることで自分のブランドを確認しようというものです。ううーん、まさに言ってしまえば自己分析。今の僕の十八番です;-P

何者(ドメイン)

就活でいう 自己紹介

得意技・ウリ(コアコンセプト)

就活でいう 自己PR

保証(バリュープロミス)

就活でいう 自分の強み・長所

キャッチコピー(ステートメント)

これはそのまま

デザインコンセプト

就活でいう やりたいことの軸

ロゴ

就活でいう 証明写真とか自分を表している写真？

できれば就活前に聴きたかったお話だったなぁというのが個人的な感想です。笑

懇親会

これまで好例の世界の山ちゃんで。ある方が、この数ヶ月に一度の山ちゃんが中毒性を帯びてきている、とおっしゃっていてドキっとしました。僕も最近無性に山ちゃんの手羽先が食べたくなって行ったりしていたので･･･。

今回密かに期待してたトライデントさんの学生さんたちは、みんな未成年とのことで、結局懇親会でもお話することはできませんでした。勉強会でも話してる時間なかったし、残念でした。次回に期待。

久しぶりに益子さんや鷹野さんとお話できたり、一度社会に出て、現在スクールに通ってWebを勉強されている学生さんをお話できたり、もうすぐWCAN婚する2組の方とお話したりと、やっぱり懇親会は楽しい。
就職活動でも思ったけれど、やはりコミュニケーションの基本は人と人が対面して対話する、ということに尽きますね。インターネットを日々創っているWeb屋といっても、やはり人と話す機会は最も重要だと再確認しました。

関連記事

• [開催情報] WCAN x CSS Nite 2009 SPRING
• [報告] WCAN x CSS Nite 2009 SPRING
• [報告] WCAN x CSS Nite 2009 SPRINGが終了しました – CSS Nite公式サイト
• [SESSION-1] CSS3＋jQueryで行こう！
• [SESSION-2] CSSレイアウト：IE 6対応のかんどころ
• [SESSION-3] デザインビュー派？ コードビュー派？ Dreamweaverでのコーディング再点検
• [SESSION-4] ブランディングの正体