【CSS】h1,h2などの文字列の先頭に画像を入れたい
タイトルが意味不明。
ですが、イメージ的にはこんな感じのことをしたいのです ↓
※赤色の長方形が画像です。
で、具体的にCSSでどう書くのか調べてみると、
h3 { background-image: url("red_square.jpg"); background-size: 8px 50px; background-repeat: no-repeat; padding: 0px 0px 0px 12px; /* 以下略 */ }
こんな感じのが出てきました。
要するに何をやってるかというと、
1.まず挿入したい画像を用意し(ここでは"red_square.jpg")、
2.それを背景画像に設定し、
3.そのサイズを決め(ここでは横幅8px、縦幅は適当)、
4.画像の繰り返しを行わないようにし、
5.画像の幅の分paddingでスペースを空けている。
のです。
・・・めんどくせえ。
先頭に画像を入れるんだから、文字列はその分自動で左にずらして欲しいわけだし、
そもそもアイコン的な使い方なんだから、"no-repeat"なんてわざわざ書きたくないわけです。
要するに、こんな「背景画像として設定して、文字列はその分ずらす」なんて離れ業じゃなくて、
「文字列の先頭に画像を挿入する」という直接的で直感的な書き方がしたいわけです。
そういう書き方ないの? ばかなの? しぬの? CSS。
~~~
そんなはずはないと思い、もうちょっと調べてみると、今度はこんなのが出てきました。
h3:before { content: url("red_square.jpg"); }
要するに、「h3の前にurlの画像を入れる」というスタイル記述。
これは直感的、わかりやすい! なんでこっちが先に出てこないんだ? と思ったら、
「IE6では動きませんよ」という注意書きが。
なるほど、これが検索でこっちが先に出てこなかった理由か。
つまり、IE6では動かなかったから、
当時(記事が書かれていたのは2004年とかでした)この記述では使い物にならなかったわけです。
だからみんなわざわざ1個目に挙げたような離れ業を使って、先頭の画像を設定していたわけです。
しかし、時代は変わり、今ではchrome,firefox,IE8、全てのブラウザがこの記述に対応しています。
であれば、先頭に画像を挿入したい場合の書き方としては、
1個目の離れ業よりも、2個目のbefore疑似要素を使った方法の方がもはや適切なのでは?
と思うのですが、
その辺どうなんでしょう?
正直僕はCSS超初心者なのでよくわかりませんね。教えてえらいひと。
終わり.