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

CSSのlist-style-imageプロパティでリストマーカーに画像を指定する方法

CSSのlist-style-imageプロパティを使用すると、リスト項目の先頭に表示されるマーカー（ビュレット）として、任意の画像を指定できます。デフォルトの「・」や「○」などの記号の代わりに、オリジナルのアイコンやロゴ画像を表示できるため、デザインの自由度が大きく向上します。

構文

CSSのlist-style-imageプロパティの構文は以下のとおりです。

セレクタ {
    list-style-image: /*値*/
}

値にはurl("画像のパス")の形式で画像ファイルの場所を指定します。また、noneを指定すると画像マーカーが無効になります。

サンプルコード1

以下の例では、ul要素に対してlist-style-imageプロパティを適用し、リストマーカーとして画像を表示しています。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    width: 150px;
    list-style-image: url("https://www.tutorialspoint.com/images/Servlets.png");
    background: goldenrod;
}
li {
    text-align: center;
    background: lavenderblush;
    margin: 5px 30px;
}
</style>
</head>
<body>
<h2>Servlets</h2>
<ul>
<li>Client Request</li>
<li>Server Response</li>
<li>Cookies Handling</li>
<li>Session Tracking</li>
</ul>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSのlist-style-imageプロパティでリストマーカーに画像を指定する方法

サンプルコード2

続いて、別の例を見てみましょう。こちらではフォントサイズや余白を調整しながら、異なる画像をマーカーに指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    margin-left: 20px;
    list-style-image: url("https://www.tutorialspoint.com/images/hibernate.png");
}
li {
    font-size: 1.3em;
    text-align: center;
    background: burlywood;
    margin: 3px;
}
</style>
</head>
<body>
<h2>Hibernate Tutorial</h2>
<ul>
<li>Sessions</li>
<li>Persistent Class</li>
<li>Mapping Files</li>
<li>Mapping Types</li>
<li>Annotations</li>
</ul>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSのlist-style-imageプロパティでリストマーカーに画像を指定する方法

補足：使用時の注意点

list-style-imageプロパティを使う際には、以下の点に注意するとよいでしょう。

  • 画像サイズが大きすぎるとレイアウトが崩れるため、適切なサイズのアイコン画像を用意するのがおすすめです。
  • マーカーの位置を細かく調整したい場合は、list-style-positionプロパティ（inside / outside）と組み合わせて使います。
  • より柔軟な配置を行いたい場合は、::marker疑似要素や背景画像（background-image）を使う方法も検討できます。
  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>