KompoZerでHTMLリストを作成する方法

リストには番号つきの「順序リスト」と、番号なしの「項目リスト」の2種類のリストがあります。

KompoZerでは、リストに設定したい箇所をドラッグして選択したあとにツールバーにある「リストボタン」をクリックする事でリストを作成することができます。

リストの種類

HTMLのリストには、「番号つきリスト」と「番号なしリスト」の2種類があります。

番号つき順序リスト

「1.2.3」や「I.II.III」、「a.b.c」などの表示方法でリストを表示する方法です。
何かの手順などの順番が重要な要素となるリストを作成する時に使います。

数字の表示方法などを変更したい場合は、リストを設定した部分を右クリックして「リストのプロパティ…」をクリックします。

番号なし項目リスト

「●」「○」「■」などの表示方法でリストを表示する方法です。箇条書きの項目にする場合に使います。

項目の先頭にあるマークの種類を変更することもできます。マークの変更は、リスト部分を右クリックして「リストのプロパティ…」画面から行います。

リストのプロパティ画面

リストを設定した部分を右クリックする事で、リストのプロパティ画面を呼び出す事ができます。
この画面ではリストの項目のマークや、数字の種類を変更する事ができます。

また、リストのプロパティ画面で設定した内容は、リスト全体に適用するか、一部にのみ（選択している部分のみ）に適用するかを選択することができます。

通常は一部に適用する事はないと思いますが、途中からリストの番号を変えたり、項目のマークを変えたりする事も可能です。

• リストの種類

  順番なしリストを順序リストに変更したりする事ができます。プルダウンからリストの種類を選択します。

• マーク/数字

  順番なしリストの場合は「マーク」、順序リストの場合は「数字」が表示されます。数字の場合は、開始番号を設定する事ができます。リストは通常「1」や「a」から始まりますが、開始番号を設定する事で「10」や「f」などの途中の番号からリストを開始する事ができます。

• 
• 

CSSを使えば、さらに細かくリストに表示されているマーク（リストマーカ）を変更する事もできます。

CSSを使ってリストマーカの変更をする方法

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

リストの余白などの設定はKompoZerのCSSエディタで余白を指定する方法をご覧ください。

CSSエディタで指定できるリストマーカの種類

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

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

番号なし項目リスト

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

• 黒丸
• 中抜き丸
• 四角

番号つき順序リスト

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

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

リストマーカの画像

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

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

リストマーカの位置

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

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

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

「役にたった」と思ったらシェアお願いします