IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opa｜名古屋の隅っこでつぶやいてます。 のエントリーで知ったのですが、E・Firefox・Opera・Safari と、どれでも使えそう（表記は違うけど）なので、仕事で使えるかどうか社内のスタッフに調べてもらおうと思います。
簡単なテストとしてインラインで書いてみました。アルファ 50%での表示になっていますかね？
参考
昨日は、CSS Naked Day という事で、ちょっとだけコードを見直ししたのですが、久しぶりに Windows IE で確認してみると恥ずかしい状態だった事に気がつきました。ちょっと反省しております。
まぁ、仕事では Windows IE の確認は外せないのですが、私の個人サイトという事でサボっておりました。 今晩くらいに少し修正しようかと思います。
アクトリンク株式会社の菊池さんという方が iPod Touch 向けの Web制作についてアップルストアでお話されるという事で聞いてきました。
Webクリエイターのための勉強会SwapSkillsのセミナーイベントがアップルストアで開催されるそうです。
銀座のイベントは告知期間が10日間程の短い期間だったの ですが、100名以上の方が集まったそうです。凄く忙しいのですが、allWebクリエイター塾の人には会ってみたいと前々から思っていたので、夕食休み？として仕事を抜けていって参加してみようと思っています。
【日時】：2008/03/14 19：00-20：00
【場所】：アップルストア 名古屋 栄
【費用】：無料
【定員】：20名（先着順）
【内容】：iPodtouchが与えたもの、iPodtouchから学ぶモバイルCSS
銀座のアップルストアのようなセミナールームが栄にもあったらいいのにねぇ...
CSS clip で検索してみても、どう使ったらいいのか書かれているところが見当たらないので、書き残しておきます。320x240サイズの写真の一部を120x120に見せるためのHTMLとCSSの書き方になります。 a-blog の photolog ? の機能では、縮小表示させて切り取る部分を最小にして表示させるという方法をとってます。
データ上は、正方形じゃないものでも、なんとか正方形に見せて表示させる事ができるようなCSSの記述をおぼえました。上の写真が下のようになります。結構、無理矢理書いてますので、ブラウザによってはダメかもしれませんけど...
フォトギャラリーでサイズが違ってデコボコしてた部分をこれでキレイに見せる事ができそうです。ちなみに以下のように書いてあります。
<div class="img" style="width:60px; height:60px;"> <img src="/dev/archives/2005/07/images/1120271492.jpg" width="80" height="60" style="position: absolute; clip: rect(0px 70px 60px 10px); margin-left: -10px;"></div>
この clip を利用したimgタグは縦横のサイズが無いような扱いになるようで、それだとレイアウトするのに困るという事からdivで囲ってサイズを指定してあります。
また、センターでトリミングしてあるのでずらした分は、margin-left や margin-top をマイナス指定して位置をあわせてやらないとレイアウトが崩れます。ちょっと、スマートじゃないですが、プログラムの方で自動で出来るようなものを書いてあるので、今後は楽にできそうです。
