岩家ぶろぐ

« 前の記事
ポップアップ版 W3C Markup / CSS Validator ブックマークレット

次の記事 »
[svn] ひとつのリポジトリを分割して複数のリポジトリを作成する

WCAN mini Markup Vol.2

2007.5.28（月） 1:42 タグ: イベント

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

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

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

課題とその特徴

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

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

実は 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 さん，ホント感謝です．

おわりに

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

参考リンク

本日の一語：備忘録

忘れたときのための用意に、要点を書きとめておくノート。メモ。忘備録。
びぼう-ろく ―ばう― 2 【備忘録】 - goo 辞書

こっちが正しいみたい．

この記事へのトラックバック

トラックバック URI
http://blog.iwa-ya.net/2007/05/28/014248/trackback/

WCAN mini Markup vol.2…

WCAN　の小規模・専門版の WCAN mini Markup の2回目に関する内容です。 (more…)

トラックバック by まめ蔵 — 2007.6.3（日） @ 9:57:02

この記事へのコメント »

マウスオーバー画像表示 CSS ですが、もう少し余裕をもたせておいた方がオススメですよ。 Safari で見ると HAPPY LIFE マシンの横の画像が1つ半見えています。また、縦に並べるより横の方が安全かもしれません。

コメント by やまもとかずみち — 2007.6.3（日） @ 9:33:24
＞やまもとかずみちさん
ご指摘ありがとうございます．まだまだテクニックといえるものをあまり身につけていないもので．．．勉強になります．

やはり Safari での表示確認は見落とせない，ということですね．まずは Apollo のブラウザアプリとかを使うところから始めてみることにします．

コメント by issm — 2007.6.3（日） @ 16:25:47
トラックバックありがとうございます！！

3次会まであったんですねぇ～
僕も帰らずに残ればよかったです。。。

コメント by tagawa — 2007.6.4（月） @ 15:18:10
＞ tagawa さん
近々（？）名古屋に越されるそうですね．
そうなれば，もう終電を心配する必要がなくなりますよ，多分（笑）

今後もお会いできる機会が増えそうで楽しみです．

コメント by issm — 2007.6.5（火） @ 2:28:10
今さらではありますが、ふと思い出しましたので。。。

background-positionに数値とキーワードを同時に指定しますと、
NN7.1では背景が表示されないらしいです。
これはNN7.1がCSS2.0までしか対応していないのが原因らしく、
CSS2.1に対応しているブラウザでは数値とキーワードを同時に指定できるそうです。

NN7.1をターゲットブラウザとしないのであれば問題ないのですけれども。。。

すでにご存知でしたら申し訳ありません(*- -)(*_ _)ペコリ

コメント by tagawa — 2007.6.13（水） @ 20:21:45
＞ tagawa さん

あ，NN のことは完全に頭にありませんでした．

NN をターゲットにすることは今のところ考えていませんが，せめてもの気遣いとして，数値・キーワード同時指定をできるだけ避けるくらいはした方がいいかもですね．

コメント by issm — 2007.6.17（日） @ 19:14:05