KompoZerのCSSエディタでリストマーカの変更をする方法
HTMLのリストには、項目を箇条書きにしたタイプのリストと、番号を割り振るタイプのリストがあります。
CSSを使えば、それぞれのリストのマーカー（項目の頭に表示される印）を丸型にしたり四角型にしたり、マーカーに画像を割り当てたり、様々な指定ができます。
KompozerのCSSエディタでは「リストタブ」を使って、HTMLのリストタグのマーカの種類を指定します。
HTMLのリストの作成方法についてはリストの作成方法を、リストの余白などの設定はHTML要素の高さや幅、余白を指定するにはをご覧ください。
リストマーカの種類
リストマーカの種類は、番号なし項目リストに適用できる設定と、番号つき順序リストに適用できる設定があります。
それぞれ、どのような見た目になるのか見ていきましょう。
番号なし項目リスト
番号なしの項目リストでは、以下の3種類から設定をすることができます。特に何も指定していない場合は、黒丸のマーカが使われます。
- 黒丸
- 中抜き丸
- 四角
番号つき順序リスト
番号つき順序リストでは、以下の9種類から設定をすることができます。特に何も指定していない場合は、アラビア数字のマーカが使われます。
- アラビア数字
- アラビア数字（桁数を揃えて）
- ローマ数字（小文字）
- ローマ数字（大文字）
- ギリシャ文字（小文字）
- 英小文字
- 英大文字
- アルメニア数字
- グルジア数字
リストマーカの画像
リストのマーカには画像を使用する事もできます。このページで使用している画像は0円のWEB素材屋さんの透明リストアイコンを使用させていただきました。
- こんな感じでリストマーカを画像にすることができます
- リストマーカを画像に指定すると、デザインの幅も広がります
リストマーカの位置
「リストマーカの位置」は、リスト項目の中にマーカを入れるか、外に出すかの指定です。
言葉で説明してもなかなか分かりにくいと思いますので、以下のサンプルをご覧ください。
何も設定しない場合は「リスト項目外」にマーカが表示されます。
- リスト項目内
- リスト項目外
ツイート
RSS
RSSでも更新情報を配信中です。よろしければ読者登録をお願いします！
関連記事
最終更新日：2012/01/14
