標準で定義されている記号や数値表現に変更する場合のコードはこちらの記事を参照してください。
ULタグやLIタグで作成したリストの項目の先頭の記号を画像に変更するコードと実行結果を紹介します。
ULタグやLIタグで作成したリストの項目の先頭の記号を画像に変更する場合は、スタイルシートのlist-style-imageプロパティを用いて変更します。
スタイルシートに以下の書式で記述をします。
下図の画像を準備します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="ListImageBullet.css" />
<meta charset="utf-8" />
</head>
<body>
<div>画像を設定した、リストのデモ</div>
<ul>
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
<li>項目D</li>
<li>項目E</li>
<li>項目F</li>
</ul>
</body>
</html>
ul li {
list-style-image: url("mark.svg");
}
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
項目の記号が指定した画像になりました。ただしサイズが小さいです。
先に紹介した list-style-image を利用して画像に変更した場合、画像のサイズによってはアイコンがずれて表示されてしまう場合があります。
また、先の例では画像が小さく表示され、もう少し画像を大きく表示したい場合もあります。
background-imageを利用すると画像の大きさや位置の調整ができます。
background-image を利用する場合の書式は以下の通りです。
この記述では項目の行が複数行になった時に画像の位置がずれたり画像のサイズが変化してしまいます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="ListImageBulletBack.css" />
<meta charset="utf-8" />
</head>
<body>
<div>画像を設定した、リストのデモ</div>
<ul>
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
<li>項目D</li>
<li>項目E</li>
<li>項目F</li>
</ul>
</body>
</html>
ul {
padding: 0 0 0 1rem;
}
ul li {
font-size:1.2rem;
margin-left: 0px;
list-style: none;
padding: 0.4rem 0.25rem 0.25rem 3.0rem;
background-image: url("mark.svg");
background-position: left center;
background-repeat: no-repeat;
}
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。画像の大きさを調整できました。
LIタグ内が複数行になった場合の結果が下図です。画像の大きさが変化してしまいます。
<ul>
<li>項目A</li>
<li>項目B</li>
<li>項目C1<br />項目C2</li>
<li>項目D</li>
<li>項目E</li>
<li>項目F</li>
</ul>
先の改行時の問題を解決する場合には、before疑似クラスと content プロパティを利用する方法があります。
以下のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="ListImageBulletBefore.css" />
<meta charset="utf-8" />
</head>
<body>
<div>画像を設定した、リストのデモ</div>
<ul>
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
<li>項目D</li>
<li>項目E</li>
<li>項目F</li>
</ul>
</body>
</html>
ul {
padding: 0 0 0 2rem;
}
ul li {
list-style:none;
font-size:1.2rem;
}
ul li::before {
display: inline-block;
margin: 0 0 0 0;
padding: 0 0.5rem 0 0;
width: 1.2rem;
content: url("mark.svg");
}
before疑似要素を記述することで、項目の手前をスタイルシートで表現できます。
before疑似要素の詳細はこちらの記事を参照してください。
今回の実装では content: url("mark.svg"); を記述して画像をLI要素の手前に表示します。
ul li::before {
display: inline-block;
margin: 0 0 0 0;
padding: 0 0.5rem 0 0;
width: 1.2rem;
content: url("mark.svg");
}
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。項目の先頭記号が画像で表示されています。
リストの項目が改行された場合の表示を確認します。
<ul>
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
<li>項目D1<br />項目D2</li>
<li>項目E</li>
<li>項目F</li>
</ul>
改行された場合も画像の大きさは変化しないことが確認できます。
