読者です 読者をやめる 読者になる 読者になる

16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

【CSS】h1,h2などの文字列の先頭に画像を入れたい

タイトルが意味不明。

ですが、イメージ的にはこんな感じのことをしたいのです ↓


f:id:sakuramochi702:20130717115521j:plain
赤色の長方形が画像です。


で、具体的に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超初心者なのでよくわかりませんね。教えてえらいひと。


終わり.