このサイトの定番ネタです。「え、いまさら？」という声が聞こえてきそうな気がする画像置換ですが、今回は3年ほど前に大流行した「テキストをCSSの背景画像で置き換えて、text-indentですっ飛ばすアレ」にCSS3の要素を加えてじゃっっかん今風?にしたものです。

ちなみにこの手法は、大流行から1年ほどで「テキストをtext-indentで飛ばすのはアクセシビリティ的によくないし、CSSの背景画像じゃなくて画像と代替テキストという自然な(本来の)マークアップをすべき」みたいな思想が広まって一時期廃れたかに思われましたが、近年の表示速度最適化ブームに乗って、CSS Spriteを実現する手段として復活を遂げている、という経緯があったような気がします。いや、詳しくは忘れちゃいましたが;P

あいかわらず今回もCSS Nite LP3の課題の画像を利用させていただいています。

3月13日(土)にあったWCAN 2010 SpringのLightning Talkで「明日から使える inline-block」というタイトルで発表させていただきました。

実は14日から15日まで学会で不在なので、「明日から使える」と言っておいて月曜までにフォローアップできていないのはダメだなと思ったのでスライドをとりあえず公開して学会行ってきます。
WCAN本番では時間の都合上、2例の紹介だったのですが、紹介したかった例をもう一つ加えた3例版になっています。また、参考サイトも紹介していますのでぜひご活用ください。

後日、SlideShare版や、懇親会できかれたテーマの裏話とかスライドの作り方とかについて追記したいと思います。続きに追記しました。

1. Licensed under BY-NC-SA Creative Commons License [back]

Firefox 3.5 から、アルミMacBookから採用されているマルチタッチトラックパッドでマルチタッチができるようになりました。これまではMultitouchを使ってFirefoxでも利用できましたが、これからはネイティブで使えます。

Firefoxのデフォルトでは、左右のスワイプ(3本指)に戻る/進むが割当てられており、ピンチイン/アウト(2本指)にズームの縮小/拡大が割り当てられています。今回はこれらのジェスチャーをカスタマイズする方法を紹介します。
カスタマイズは自己責任でお願いします。

以前、画像のCSSロールオーバーについてアクセシブルな方法はないかと考えてみたことがありました。あれから約2年、新しいサイトのHTML組んでたら、たまたま違う方法を見つけたので覚え書きしておきます。

ブラウザの対応は、おそらくafter疑似要素(contentプロパティ)に対応するブラウザなら表示されると思います。つまり、IE7以前はそもそもロールオーバーにならないってことです。まぁそこはこの際いいんです^[1]。

今回も画像はCSS Nite LP3の課題のものを利用させていただいています。

1. JavaScriptでなんとかするとかすれば [back]

ついにMacworldで，薄型のMacBook「MacBook Air」が発表されました。拡張端子の大幅な省略^[1]や本体にバッテリを内蔵したことは、人によって評価が分かれる部分でしょうね。^[2]今回SSD搭載というモデルを出してきたわけですが、SSDの価格も下がっていくでしょうからむしろこれからが楽しみなラップトップなのかもしれません。

また、同MacWorldで2月のSDK公開に先駆けてiPod touchにiPhoneのソフトウェアが有償でインストールできるというソフトウェア・アップグレードが発表されました。僕もアップグレードして早速Mailの便利さに感動してます:-D

1. 特にFireWireとEthernetが省かれたのが衝撃でした [back]
2. ちなみに僕には値段が高くて手が出ませんorz [back]