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素材屋さんの透明リストアイコンを使用させていただきました。

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

リストマーカの位置

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

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

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

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

WebCampPro（3ヶ月の超ガッチリ型）

3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。

しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

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