CSSでUL,LIリストのアイコンを変更して、ずれてしまう位置を調整する.

 

CSSでUlやLIを指定をすると通常以下のようなリストのアイコンになってしまう.(文章の内容は関係ありません. http://www.thothchildren.com/chapter/5b5465ce103f2f31687150af より)

スクリーンショット 2018-07-31 22.07.57.png

これだとちょっとダサいので、これを以下みたいに変更する.(これは最終形)

スクリーンショット 2018-07-31 22.09.22.png

list-style-imageを変更する(ただし位置ずれ)

これを行うにはliに「list-style-image」を変更すれば良い.でもただ変えただけだと位置が微妙なことがある….

かえるとこんな感じ

スクリーンショット 2018-07-31 22.13.04.png

 

(https://stackoverflow.com/questions/21427199/list-vertical-align-text-middle-with-list-style-image とか参考)

位置ずれを直すには

調べたところlist-style-imageでは位置ずれの調整はできない模様.

なので、liの背景画像として設置した上でその背景画像を左にずらすということを行う.

このようにすると始めに書いた形になる.

スクリーンショット 2018-07-31 22.09.22

Inspectorで見てみると以下のようになる.

スクリーンショット 2018-07-31 22.20.33.png

 

About the author

コメントを残す