今回やりたいのは「見出しの先頭に画像の設定する」ことです。

こんなかんじ

具体的にはまず以下のようにCSSに記載します。

[cc lang="css"]#xxx {
background-image: url( xxx.gif );/*画像URL*/
background-repeat: no-repeat;/*繰り返ししない*/
background-position: left center;/*背景画像を「左端の（上下の）中央」に表示*/
padding-left: 62px;/*見出しの文字列の開始位置を62pxずらす*/
}[/cc]

それからid=”xxx”を表示したいタグに入れるだけです。
上の例だと
[cc lang="php"]

こんなかんじ

[/cc]

間違ってたら教えてください。

＜参考＞
→CSSで見出しの頭に画像を加える(後編) – [ホームページ作成] All About

使用しているCSSを軽量化しようと探したて見つけたのが、無料のWEBサービス「CSS Compressor」。
「Compression Mode」を5つから選択し、「Compression Options」にチェックをお好みで入れて、「CSS Input」に圧縮したいCSSをペーストしたら最後に「Compress」ボタンを押すだけで、CSSを圧縮してくれる。

CSSにもよるが僕の場合約30％のダイエットに成功した！
あとは実際の表示をチェックするだけだが、ここでうまく表示できないようだったらコードを見るのではなく、圧縮モードやオプションを変更してみるといいのではないだろうか。

コードとしては見づらくなるので、元のファイルは残しておいて修正はそのファイルで行い、修正した後に「CSS Compressor」で圧縮という流れをオススメします。

→CSS Compressor

「Pirka’r（ピリカル）」はさまざまなWebブラウザーで共通の見栄え・動作を実現する“クロスブラウザ”対応Webサイトの開発を支援するソフトだ。

主な仕様

・CSSがWeb標準に準拠して記述されているかチェックすることができます。
・HTML/CSS/JavaScriptにブラウザに依存する記述がないかチェックすることができます。
　(このチェックを利用するにはサーバアプリケーションが必要です。)
・一つのページを複数のブラウザで同時に表示し、各ブラウザを起動して確認する面倒な作業から解放します。
　（利用OSごとに表示可能ブラウザは異なります）
・多機能エディタで編集・保存した内容を自動でマルチブラウザビューに反映し、各ブラウザをリロードする作業から開放します。
・HTML/CSS/JavaScriptのエディタです。「コード補完」、「シンタックスハイライト」、「構文チェック」などの便利な機能があります。
・指定URLのサイトのコンテンツを収集します。階層指定も行えます。

＜ダウンロード＞
→オフィシャルサイト

＜ネタ元＞
→窓の杜