画像置換用画像

前置き(おもひで)

なんでもかんでもcssでやりたがる時代の終わり頃に、text-indentに負の値を指定してテキストを画面外に飛ばし背景画像のみを表示させる画像置換(Image Replacement)が流行りました
(FirefoxのアドオンWeb Developerでcssを外したりして、文字だけのシンプル(質素)な表示になるコーディングに喜びを感じてた人も居たはず)。

その方法のメリットはうろ覚えだけどjavascriptを使わずにロールオーバーを作れて、音声ブラウザにも読み上げられて、”画像にalt”より”生のテキスト”の方がSEOに有利なんじゃないかとかそんな感じでしたっけ?

デメリットは、印刷設定で”背景を印刷しない”になっている(印刷用cssも用意されてない)場合に置換した部分が印刷されなかったり、画像無効css有効なブラウザブラウザだと画面外に飛ばしたテキストも背景も表示されないなど、これで不具合でるのって特殊な環境だからたいしたデメリットでもないよね?仕方ないよね?みたいな扱いだったような。

その後SEO界隈のtext-indentに負の値てスパムになるんじゃない?みたいな話題が絡んで、altをちゃんと入れておけばわざわざ画像置換しなくてもいいらしいですぜとか、jQuery便利!javascriptを自分でoffにしてる人の事なんてしったこっちゃないよ(最低限の情報が表示されれば問題ない)的な風潮になってcssで画像置換する機会が減ったり減らなかったりの毎日で、今の主流はどんな感じなんでしょうか。

とりあえずtext-indentさせずに画像置換するメモ

appleのサイトで使ってる感じのheight:0;overflow:hidden;paddingでやるやつ。

背景画像で置換した表示結果

乱雑モックアップ

上記使用font / セプテンバー-教漢(無料お試し版)

(関係ないけどURLはURIの一部だから今までのURLはURIと書くのが正しいような事を聞いた気がするけどbackground:urlなんですよね、これはなぜだろう、うちの勘違いなだけでしょうか?)

hoverとactiveを指定してロールオーバーさせる

“hoverとactiveを指定してロールオーバーさせる”の表示結果

乱雑モックアップ

横並びメニューにしてみる / display:inline

“横並びメニューにしてみる / display:inline”の表示結果

横並びメニューにしてみる / float:left

“横並びメニューにしてみる / float:left”の表示結果

<li>を横並びさせる場合、display:inline+floatfloat+clearfixはどっちが定番なんだろう?

追加

縦並びメニューにしてみる

htmlは同じで横並びメニューのcssから以下の部分を削除するだけでいいはず。

全部書くとこんな感じ


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.