height:0;で画像置換(背景置換)するっス

  • このエントリーをはてなブックマークに追加
  • LINEで送る

画像置換用画像

前置き(おもひで)

なんでもかんでも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でやるやつ。

[html classname=”html-sh”]
<p id="irsample1">乱雑モックアップ</p>
[/html]
[css classname=”css-sh”]
#irsample1{
width:480px;/*画像の横幅;*/
height:0;
padding-top:100px;/*画像の高さ;*/
overflow:hidden;
background:url(画像url) no-repeat;
}
[/css]

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

乱雑モックアップ

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

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

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

[html classname=”html-sh”]
<p id="irsample2"><a href="#">乱雑モックアップ</a></p>
[/html]
[css classname=”css-sh”]
#irsample2{
width:480px;/*画像の横幅*/
height:100px;/*画像の高さ*/
}
#irsample2 a{
width:100%;/*ボタンの横幅*/
height:0;
padding-top:100px;/*ボタンの高さ*/
overflow:hidden;
display:block;
background:url(画像url) no-repeat 0 0;
}
#irsample2 a:hover{
background-position:0 -200px;/*bottomは IE6-7で範囲外のフォントのbottomからになるのでズレる*/}
#irsample2 a:active{
background-position:0 -100px;
}
[/css]

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

乱雑モックアップ

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

[html classname=”html-sh”]
<ul id="irsample3">
<li class="ranzatsu"><a href="#">乱雑</a></li>
<li class="mock"><a href="#">モック</a></li>
<li class="up"><a href="#">アップ</a></li>
</ul>
[/html]
[css classname=”css-sh”]
#irsample3{
width:480px;/*画像の横幅*/
height:60px;/*画像の高さ*/
padding:0;
margin:0;
}

#irsample3 li{
display:inline;/*ie6-7*/
}
#irsample3 a{
float:left;
width:160px;/*ボタンの横幅*/
height:0;
padding-top:60px;/*ボタンの高さ*/
overflow:hidden;
display:block;
background:url(画像url) no-repeat;
}

#irsample3 .ranzatsu a{
background-position:0 0;
}
#irsample3 .mock a{
background-position:-160px 0;
}
#irsample3 .up a{
background-position:-320px 0;
}

#irsample3 .ranzatsu a:hover{
background-position:0 -60px;
}
#irsample3 .mock a:hover{
background-position:-160px -60px;
}
#irsample3 .up a:hover{
background-position:-320px -60px;
}
[/css]

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

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

[css classname=”css-sh”]
/*clearfix追加*/
#irsample4{
/zoom:1
}
#irsample4:after{
content:”;
display:block;
clear:both;
height:0;
}

#irsample4 li{
/*display:inline; 削除してfloatに変更*/
float:left;
}
#irsample4 a{
/*float:left; 必要ないので削除*/
width:160px;
height:0;
padding-top:60px;
overflow:hidden;
display:block;
background:url(http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100901-1.png) no-repeat;

}
[/css]

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

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

追加

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

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

[css classname=”css-sh”]
#irsample5 li{
display:inline;
}
#irsample5 a{
float:left;
}[/css]

全部書くとこんな感じ

[css classname=”css-sh”]
#irsample5{
width:160px;
height:180px;
}

#irsample5 a{
width:160px;
height:0;
padding-top:60px;
overflow:hidden;
display:block;
background:url(http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100901-1.png) no-repeat;

}
#irsample5 .ranzatsu a{
background-position:0 0;
}
#irsample5 .mock a{
background-position:-160px 0;
}
#irsample5 .up a{
background-position:-320px 0;
}

#irsample5 .ranzatsu a:hover{
background-position:0 -60px;
}
#irsample5 .mock a:hover{
background-position:-160px -60px;
}
#irsample5 .up a:hover{
background-position:-320px -60px;
}

#irsample5 .ranzatsu a:active{
background-position:0 -120px;
}
#irsample5 .mock a:active{
background-position:-160px -120px;
}
#irsample5 .up a:active{
background-position:-320px -120px;
}
[/css]

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.