25日に行われた WCAN mini Markup Vol. 2 に参加してきました．

CSS Nite LP, Disk 3 と併催された コーディングコンテスト Vol. 1 での課題をここでも取り扱う，ということで，遅ればせながら私も挑戦してみました．（コンテストへの提出はしてませんが．）

さらに，各参加者 （のうち課題作成者） によるミニプレゼンを行う，との連絡が 1週間強前に入り，人前で話すのが苦手な私にとっては，急遽心の準備をすることになりました．

課題とその特徴

作成した課題へのリンクを次に張ってみます．（Opera9 と Firefox2 でのみ確認．Safari，IE7 については未確認．IE6 では微妙かと．）

• index.html
• products.html

作成にあたっての特徴といいますか，まぁそのようなものを次に挙げます．

• 実は CGI だったり．
• (X) HTML をテンプレートとして分割管理，再利用．
• コーディングについては，テキストエディタ xyzzy のみ．
• 設計の都合で左に 45px ズレ．

また，作業環境として，OS に Windows と Debian さんを，画像の切り出しに Photoshop CS2 を使用しています．

発表

当日は，だいたい上記の内容について発表しました．（クジ引きで一番手を引いてしまいました．）

このときにネットワークの都合で Safari で表示することになりましたが，ヘンな表示崩れは無かったように見えました．ひと安心．．．

なるほど

以下，他の方の発表やディスカッションの中での個人的な気づきをいくつか．

• 画像の切り出し方もコーディングのうち．
• 急ぎのときは画像の切り出し方も工夫してみよう．
• 印刷時のことも考慮しよう．
• 印刷時，見た目のとおりに出すか，まったく別物にするか．
• Mac – Win 間のデータのやりとりは LZH で．（@ 3次会）

マウスオーバー画像表示 CSS での気づき

あと，ちょっとしたことなんだけど今まで全然気づかなかったのが，マウスオーバー画像を表示させるときの CSS の書き方．

高さが 20px の画像についてマウスオーバーエフェクトをつけるような場合，通常，マウスオーバー画像を順に縦に （私の場合，横でも無問題） くっつけて CSS で制御するのが定番かと思いますが，その CSS を，今までは次のように書いてました．

a.img {
  display: block;
  height: 20px;
  overflow: hidden;
  background: url(...) no-repeat;
}
a.img:hover {
  background-position: 0 -20px;
}

で，この a.img:hover を次のようにすればいいじゃん，ということです．

a.img:hover {
  background-position: 0 bottom;
}

おお，確かに．これなら，読んでわかりやすいし画像のサイズ変更の際の CSS の修正個所も減るし，と，ハッピーになれそうです．

今後は積極的に使ってみますかね．まずはこのサイトのナビゲーションからかな．

その後

2次会，3次会にて談笑し，終わったのは翌 4時頃でした．id:choco-snack さん，ホント感謝です．

おわりに

今回は，皆さんのお仕事のお話なんかも聞けて，今後自分が行動していく上での参考になる部分もありました．最初から最後までがいい勉強になりました．

参考リンク

• WCAN [ Web Creators Association Nagoya ] WCAN mini Markup Vol.2
• WCAN mini Markup vol.2｜まめ蔵
• WCAN mini Markup Vol.2 行ってきました。 | サルブロ