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

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

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

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

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

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

after 疑似要素で CSS ロールオーバー

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

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

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

“after 疑似要素で CSS ロールオーバー” の続きを読む

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

CSS ロールオーバーのアクセシビリティを少し考えてみた

グラフィカルなメニューなどでhover時に違った画像に変化させる際に、text-indent: -9999px; でテキストを飛ばして画像を置換する方法が過去のもの[1] になっているようです。このような場合はテキストではなく普通にimg要素を配置する方がよいと思います。

画像をそのまま配置した場合、昔のように(もっとコードは洗練されていますが) JavaScriptを使って画像置換する方法が復活していますね。でもそれはなるべくCSSでやりたいなぁと思った自分はアクセシビリティをなるべく確保するようにした画像置換方法がないか考えてみました。

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

“CSS ロールオーバーのアクセシビリティを少し考えてみた” の続きを読む

  1. 画像OFF時に何も見えなくなりアクセシビリティ的にかなりよくない [back]

WCAN 2007 summer レポート

画像:WCAN 2007 summer

久しぶりのエントリです。

試験勉強やらに追われていてこちらは疎かになってるのですが、今日は息抜きもかねてWCAN 2007 summerに参加してます。

今回も電源の近くの席をゲットしたので、書けるだけライブで書きます!

関連記事追加しました。

“WCAN 2007 summer レポート” の続きを読む

CSS Nite in Nagoya 2007 レポート

画像 : CSS Nite in Nagoya 2007

今やってます。CSS Nite in Nagoya 2007今回はMacを持ち込んでるのでバッテリの持つ限りなるべくライブで更新します。テーマ2まで更新して、バッテリ切れました_| ̄|○ 残りは翌日に書いています。

[テーマ1] CSSの基本とブラウザ互換
[テーマ2] ディレクションとワークフローの見直しと新たな視点
[テーマ3] CMSツールとして使われるblog、その実際と活用例
[スペシャルセッション]
[テーマ4] アクセシビリティ概論と実装テクニック
[その他]

(フォローアップ資料などの参考資料リンクは、後日ある程度揃ってから追加更新します。)

“CSS Nite in Nagoya 2007 レポート” の続きを読む