アルファチャンネルで画像置換

この記事は「after 疑似要素で CSS ロールオーバー」の続きです。

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

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

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

“アルファチャンネルで画像置換”の続きを読む

コーディングコンテストで優秀賞をいただきました

CSS Nite LP9 連動 第2回コーディングコンテスト

先日開催されたCSS Nite LP9の連動企画第2回コーディングコンテストにて、優秀賞(Firefox賞)をいただきました
僕が応募したものは、CSSのグラデーションじゃなくて普通にpngでやってたり、CSS3をばりばり使っていなかったのですが、選ばれてびっくりです。

“コーディングコンテストで優秀賞をいただきました”の続きを読む

CSS Nite LP9 第2回コーディングコンテストに応募しました

CSS Nite LP9 連動 第2回コーディングコンテスト

来る4月17日に開催されるCSS Nite LP, Disk 9「Coder’s Higher」の連動企画として、CSS Nite LP9 連動 第2回コーディングコンテストが開催されます。〆切は3月23日でした。僕も一応作ってみたので公開してみます。今晒しておけばのちのち恥ずかしくならないからね・・・!

“CSS Nite LP9 第2回コーディングコンテストに応募しました”の続きを読む

明日から使える inline-block

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

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

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

“明日から使える inline-block”の続きを読む

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

VERSIONFIVE Renewal!

画像 : VERSIONFIVE リニューアル

versionfive.jpに移転してから2年と3ヶ月。まだ完全ではありませんが、やっっと、リニューアルできました!

一番はじめのカンプを作ったのが2007年8月で、気に入らなくなって作り直しては寝かせ、を繰り返していたのと、これまで利用させていただいていたVicunaがとても使い心地のよいテンプレートでしたので、記事を書くだけでこれまでのそのそとやってきてしまいました・・・。

まだ月別アーカイブページと404ページ、検索結果用のテンプレート、そしてプロダクトページができていないのですが、とりあえず公開してみました。3月中に完成させますが、不具合などあればぜひコメントやTwitter等でお知らせいただければと思います。
今後ともこのサイトよろしくお願いします!

続きに技術的な話など。

“VERSIONFIVE Renewal!”の続きを読む