CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのlist-style-imageプロパティで画像をリストマーカーとして使う方法

CSSでは、list-style-imageプロパティを使用することで、リストの先頭に表示されるマーカー(黒丸や番号など)を、お好みの画像に置き換えることができます。サイトのデザインに合わせてオリジナルのアイコンを使いたい場合に便利なプロパティです。

基本構文

list-style-image: url('画像のURL');

url()の中に、マーカーとして表示したい画像ファイルへのパスを指定します。ul要素(順序なしリスト)でもol要素(順序付きリスト)でも同様に適用できます。

使用例

以下の例では、ul要素とol要素の両方に対して、同じ画像をリストマーカーとして設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
<li>India - Qualified for WordCup</li>
<li>Australia - Qualified for WordCup</li>
<li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
<li>Virat Kohli</li>
<li>David Warner</li>
<li>Steve Smith</li>
</ol>
</body>
</html>

実行結果

このコードをブラウザで表示すると、通常の「・」や数字の代わりに、指定した画像が各リスト項目の先頭に表示されます。ul要素・ol要素のどちらのリストにも同じように画像マーカーが適用されていることが確認できます。

CSSのlist-style-imageプロパティで画像をリストマーカーとして使う方法

補足：使う際のポイント

  • 画像サイズが大きすぎると、テキストとのバランスが崩れるため、小さめのアイコン(16px〜24px程度)の使用がおすすめです。
  • list-style-positionプロパティを組み合わせると、マーカーの表示位置(内側か外側か)を調整できます。
  • 古いブラウザでの位置ずれが気になる場合は、background-imageとpaddingを使った代替手法もあります。
  1. CSSで箇条書き（ビュレット）なしのulリストを作成する方法

    HTMLの<ul>要素はデフォルトで黒丸（ビュレット）が表示されますが、CSSを使えば簡単にこれを非表示にできます。ナビゲーションメニューやカスタムデザインのリストを作成する際によく使われるテクニックです。ポイント：list-style-typeプロパティ箇条書きを消すには、list-style-typeプロパティにnoneを指定します。あわせてmarginとpaddingを0に設定すると、ブラウザ標準の余白も取り除けます。コード例<!DOCTYPE html> <html> <head> <style> body {

  2. CSSで基本のリストをリストグループに変換する方法

    CSSを使えば、シンプルなHTMLのリストを、境界線で区切られた見栄えのよい「リストグループ」へと変換できます。各項目（li要素）に枠線・背景色・パディングを指定するだけで、視覚的にまとまりのあるリストを簡単に作成できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>