• 【KompoZerの使い方】
• 2012年01月14日　

KompoZerのCSSエディタでリストマーカの変更をする方法

• 
• @lbleveryをフォロー

HTMLのリストには、項目を箇条書きにしたタイプのリストと、番号を割り振るタイプのリストがあります。
CSSを使えば、それぞれのリストのマーカー（項目の頭に表示される印）を丸型にしたり四角型にしたり、マーカーに画像を割り当てたり、様々な指定ができます。
KompozerのCSSエディタでは「リストタブ」を使って、HTMLのリストタグのマーカの種類を指定します。

HTMLのリストの作成方法についてはリストの作成方法を、リストの余白などの設定はHTML要素の高さや幅、余白を指定するにはをご覧ください。

リストマーカの種類

リストマーカの種類は、番号なし項目リストに適用できる設定と、番号つき順序リストに適用できる設定があります。

それぞれ、どのような見た目になるのか見ていきましょう。

番号なし項目リスト

番号なしの項目リストでは、以下の3種類から設定をすることができます。特に何も指定していない場合は、黒丸のマーカが使われます。

• 黒丸
• 中抜き丸
• 四角

番号つき順序リスト

番号つき順序リストでは、以下の9種類から設定をすることができます。特に何も指定していない場合は、アラビア数字のマーカが使われます。

1. アラビア数字
2. アラビア数字（桁数を揃えて）
3. ローマ数字（小文字）
4. ローマ数字（大文字）
5. ギリシャ文字（小文字）
6. 英小文字
7. 英大文字
8. アルメニア数字
9. グルジア数字

リストマーカの画像

リストのマーカには画像を使用する事もできます。このページで使用している画像は0円のWEB素材屋さんの透明リストアイコンを使用させていただきました。

• こんな感じでリストマーカを画像にすることができます
• リストマーカを画像に指定すると、デザインの幅も広がります

リストマーカの位置

「リストマーカの位置」は、リスト項目の中にマーカを入れるか、外に出すかの指定です。

言葉で説明してもなかなか分かりにくいと思いますので、以下のサンプルをご覧ください。
何も設定しない場合は「リスト項目外」にマーカが表示されます。

• リスト項目内
• リスト項目外