- 2007年7月29日 03:53
- html/css
ブログで記事を書いていて、見出し要素（h1?h6）などの先頭にアイコンを表示したい時ってありませんか？img タグでいちいち書くのもめんどくさいし…と悩むこともあるかもしれません。そんな時に使えるのが、今回紹介するTipsです。
本文中（entry-body）に h4 要素で見出しが宣言されているとして、h4 中の文字列 "Title" の左にアイコンを表示してみようと思います。これを踏まえたうえで、HTMLは以下のようなものであるとします。
<div class="entry-body">
<h4>Title</h4>
<p>Sentence</p>
</div>続いて、以下の手順でCSSを適用させます。
- text-indent で画像を表示させるスペースを空ける
- background で背景画像を指定する
- background で背景の表示位置を指定する
解説をすると、text-indent は正の値を指定してやると、要素の左側に値の幅だけインデントをしてくれます。そして、インデントで空いたスペースに background で指定した背景画像がピッタリ表示されるというわけです。更に、見栄えを良くするために画像の縦方向の位置を center に、横方向の位置を任意で決めてやります。
これをもとに作成したものが以下のCSSです（該当箇所はハイライト部分）。
body {
color: #333;
font-size: 13px;
background-color: #fff;
}
div.entry-body {
text-align: left;
background-color: #eee;
}
div.entry-body h4 {
text-indent: 18px;
background: #01B0F0 url(./images/rect.gif) no-repeat 3px center;
}他にも擬似要素の :before を使って表示させる方法もあるのですが、IE6やIE7などでサポートされていないため今回は background に背景画像として表示させてみました。僕はいつもこのやり方なんですが、他にもあるんでしょうかね？見つけたらまた書いてみたいと思います。
- Newer: Transformers
- Older: フォームから入力された16進コードで色を変更
