リストを作りました。リストの前の星画像を小さくするcssを教えてください。よろしくお願いいたします。html*********\u0026lt;div id=\u0026quot;comment1\u0026quot;\u0026gt;\u0026lt;ul\u0026gt;\u0026lt;li\u0026gt;こんにちは\u0026lt;/li\u0026gt;\u0026lt;li\u0026gt;こんにちは\u0026lt;/li\u0026gt;\u0026lt;li\u0026gt;こんにちは\u0026lt;/li\u0026gt;\u0026lt;li\u0026gt;こんにちは\u0026lt;/li\u0026gt;\u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt;css*********ul{ margin: 0; padding-left: 1.4rem; /* マーク分のスペース */ line-height: 1.75; list-style-image: url(\u0026quot;star.png\u0026quot;); font-size: 1.1em;}

1件の回答

回答を書く

1198996

2026-07-18 07:55

+ フォロー

例えば::beforeの疑似要素を利用すれば、画像はそのままでもサイズを自由に変更できます。



#comment1 ul {

list-style: none;

}



/* ::beforeの疑似要素を利用し、li要素の前に星を配置 */

/* 疑似要素の幅と高さを16pxに設定し、星を背景画像に設定して、背景サイズをcoverにして要素全体に広げる */

#comment1 ul li::before {

content: \u0026quot;\u0026quot;;

display: inline-block;

width: 16px;

height: 16px;

background-image: url(star.png);

background-size: cover;

margin-right: 5px;

}

うったえる有益だ(0シェアするブックマークする

関連質問

Copyright © 2026 AQ188.com All Rights Reserved.

博識 著作権所有