テキストの前後にアイコン画像を表示させたい時のCSS

HTML・CSS, WEB制作の小技や機能 | 2010.11.09

リストの頭にアイコン画像をつけて、なおかつテキストの終わりにも画像をつけたい時のCSSをメモしておきたいと思います。（あまり使う場面はないかもしれませんが・・・）

構造としては、リストタグ＜li＞にリストの頭につける画像を表示させ、中のテキストを＜a＞または、＜div＞や＜span＞でくくって、その背景に右寄せで画像を表示させます。

例えば、＜li＞には、以下の様なCSSを充てます。
padding:0 0 0 14px;
background-image:url(../img/icon01.gif);
background-repeat:no-repeat;
background-position:0px 4px;
list-style:none;

で、中のテキストには、以下の様なCSSを充てます。
padding:0 24px 0 0;
background-image:url(../img/icon02.gif);
background-repeat:no-repeat;
background-position:right 3px;

ちょっとした画像によって種類分けをする事は、コーディングをする際には見た目以上にひと手間かかり、面倒な事も多いですが、
小さなことの積み重ねでWEBサイトの見やすさ・分かりやすさに「差」が出てきます。
使えるCSSソースなどは活用できるようにストックしておき、分かりやすさの為にひと手間かかるサイトコーディングも素早くできるようにしたいものです。