今回はHTMLで箇条書きのリストを作成する方法とその調整方法について解説します。リストは要点だけを簡潔に記述したり、目次を作ったりといろいろなところで利用できます。
HTMLの記述方法
基本的な書き方
箇条書きのリストを作成するには、<ul>タグ、<ol>タグ、<li>タグを使用します。
See the Pen
lit-tag_2 by そーたろう (@soh-files)
on CodePen.
それぞれのリストの項目は<li>～</li>の中に記述し、複数ある<li>の項目を<ul>～</ul>、または<ol>～</ol>で囲んでいます。このように親要素として<ul>、または<ol>を記述して、その中の子要素としてリストの項目数分<li>タグを追加します。
<ul>と<ol>の違い
リストを作成する際、<li>は必ず使用しますが、作成したいリストによって<ul>、<ol>のどちらかを選ぶ必要があります。
Unordered Listの略で、項目に番号など順番を示すものはつきません。黒丸、白丸といった普通の箇条書きのリストを作成するときはこちらを選びます。
Ordered Listの略で、項目に番号など順番を示すものがつきます。項目の前に1、2、3…のように番号をつけたい場合はこちらを選びます。
<ul>、<ol>ともに項目の前につく黒丸や番号のスタイルは変更することも可能です(詳しくは後述します)。
CSSによるスタイルの調整
次に<ul>タグ、<ol>タグ、<li>タグで作成されたリストのスタイルをCSSで変更する方法を解説していきます。
項目の文字色を変更する
項目の文字色を変更する場合はcolorプロパティを設定します。colorプロパティについては過去の記事で詳しく解説していますので、そちらも合わせてご覧ください。下の例では文字色を赤色、青色に変更しています。
See the Pen
list-tag_2 by そーたろう (@soh-files)
on CodePen.
リスト全体の背景色を変更する
リストに背景色をつける場合は、親要素である<ul>タグ、<ol>タグに対してgackground-colorプロパティを設定します。background-colorプロパティの詳細については過去の記事をご覧ください。下の例では<ul>で囲ったリスト全体の背景色を青色に設定しています。
See the Pen
list-tag_4 by そーたろう (@soh-files)
on CodePen.
リスト全体に枠線を設定する
リストに枠線を表示させる場合は、親要素である<ul>タグ、<ol>タグに対してborderプロパティを設定します。borderプロパティの詳細については過去に記事を書いていますのでそちらをご覧ください。下の例では<ul>で囲ったリストに破線の枠線を表示させています。
See the Pen
list-tag_5 by そーたろう (@soh-files)
on CodePen.
リストの黒丸や番号を削除する
リストをメニューとして使用したい場合など、項目の先頭にある黒丸や番号を表示したくない場合もあります。下の例を見てください。
See the Pen
list-tag_6 by そーたろう (@soh-files)
on CodePen.
2つのリストはどちらも<ul>を使用したリストですが、上のリストには黒丸がありません。これは上のリストのみ<ul>に対してlist-style-typeプロパティで「none」を指定しているためです。<ol>に対して指定した場合にもリストの番号を削除することが可能です。
リストの黒丸、番号を削除する
ul, ol { list-style-type: none; }
項目の先頭の黒丸、番号のスタイルを変更する
項目の先頭につけられる記号は、初期状態では<ul>タグでは黒丸、<ol>タグでは番号となりますが、これを変更することも可能です。変更する場合はlist-style-typeプロパティに以下のように値を指定します。
| 値 | 解説 |
|---|---|
| disc | 黒丸 (<ul>タグの初期状態) |
| circle | 白丸 |
| square | 四角 |
| decimal | 番号 (<ol>タグの初期状態 1、2、3…) |
| decimal-leading-zero | 1～9を0をつけた2桁の番号で表示 (01、02、03…) |
| lower-roman | 小文字のローマ数字 (ⅰ、ⅱ、ⅲ…) |
| upper-roman | 大文字のローマ数字 (Ⅰ、Ⅱ、Ⅲ…) |
| cjk-ideographic | 漢数字 (一、二、三…) |
| lower-latin | 小文字のアルファベット (a,b,c…) |
| upper-latin | 大文字のアルファベット (A,B,C…) |
| hiragana | ひらがな (あ、い、う…) |
| katakana | カタカナ (ア、イ、ウ…) |
| hiragana-iroha | ひらがな (い、ろ、は…) |
| katakana-iroha | カタカナ (イ、ロ、ハ…) |
| lower-greek | ギリシャ文字 (α、β、γ…) |
See the Pen
list-tag_7 by そーたろう (@soh-files)
on CodePen.
上の例では<ul>タグに対して「circle」を指定することで黒丸を白丸に変更しています。<ol>に対しては「lower-latin」を指定することで1、2、3の番号だったものをa、b、cの小文字アルファベットに変更しています。
各項目の行の高さを変更する
各項目の行の高さを変更する場合はline-heightプロパティを設定します。line-heightプロパティの詳細については過去の記事をご参照ください。<li>タグの行の高さは初期値が「1.5」となっています。
See the Pen
list-tag_8 by そーたろう (@soh-files)
on CodePen.
<ul>のリスト、<ol>のリストのうち<ol>にline-heightに[2.5」を指定しました。<ul>のリストと比べて行間が広くなっているのが分かります。
各項目間の余白を広くする
項目間の余白を広くしたい場合は、<li>タグの上下にマージンを設定します。マージンの詳細については下記の記事をご参照ください。
先ほどのline-heightプロパティを使用しても項目間の余白を広くできますが、マージンを使用した場合には少し意味が異なります。
See the Pen
list-tag_9 by そーたろう (@soh-files)
on CodePen.
<ul>のリスト、<ol>のリストどちらも1つ目の項目が2行になっています。line-heightプロパティは1行の高さを設定するプロパティなので同じ項目内であっても改行されていれば2行目も同じように行間が広くなります。よって<ul>のリストは4行が等間隔で表示されています。
マージンは項目ごとに適用されます。項目間の余白は広くなりますが、項目内で改行された行については行間は変化しません。
リストを入れ子構造にする
<ul>、<ol>で作成したリストの中にさらに別の<ul>、<ol>のリストを作ることで入れ子構造のリストを作成することができます。この記事の見出しもそうですが、大きい見出しの中に小見出しが入ってますよね？これが入れ子構造です。
See the Pen
list-tag_1 by そーたろう (@soh-files)
on CodePen.
<ol>の中の<li>の1つの中にさらに<ol>を記述しています。このようにすれば入れ子構造のリストを作成できます。
まとめ
今回はHTMLでリストを作成する方法とCSSで見た目を整える方法について解説しました。要点をまとめると、
- 箇条書きのリストは<ul>、<li>の組みあわせか、<ol>、<li>の組みあわせで作成する。
- <ul>は通常の箇条書き、<ol>は順序がある箇条書き
- colorプロパティを使用することで項目の文字色を変更できる。
- background-colorプロパティを使用することで、リスト全体の背景色を変更できる。
- borderプロパティを使用することで、リストに枠線を表示させることができる。
- list-style-typeプロパティで各項目の先頭にある黒丸や番号は削除したり、別の記号に変更したりできる。
- line-heightプロパティで1行の高さを調整できる。
- 各項目の上下にマージンを設定することで項目ごとの間の余白を調整できる。
- 入れ子構造のリストを作成することもできる。
この記事では箇条書きのリストにフォーカスしましたが、<ul>タグ、<li>タグはグローバルメニューやスライダーなど様々な場所で使用されるので、適切に使えるようにしましょう。
コメント