リストの先頭記号の背景画像を印刷させる方法

リストの先頭記号が背景画像で作られているとき、ブラウザ側の設定に関わらず常に印刷されるようにする方法。

 

こんなリスト。

 

元の表記(必要な部分のみ抜粋)

HTML

 

CSS

リストの先頭記号はbackground-imageとして挿入されている。

 

変更後の表記

HTML

テキスト部分を<span>タグで囲う。

(2行をひとかたまりにすることで、テキストの行頭を揃える)

 

CSS

background-imageからlist-style-imageに変更し、display: list-itemにする。

list-style-positionをinsideにしたのは、レイアウトを保つため。

(デフォルトのoutsideだと下線からはみ出してしまう。)

 

 

 

参考URL

http://ameblo.jp/linking/entry-10057836400.html

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です