HTMLリストに関して

トモジ

HTMLでリスト表示ってどうやるの・・・？

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、HTMLのリスト表示に関して要点をわかりやすく説明しております。

1.HTMLリストに関して

今回はHTMLのリスト表示の方法と
種類に関して説明していきます。

マーク付きのリスト

マーク付きリストとは、箇条書き形式で
先頭に黒丸が表記されているリストになり
全体を<ul>〜</ul>で囲み、
各項目は<li>〜</li>でテキストを囲みます。

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

番号付きのリスト

番号付きリストとは、
先頭の記号を番号にしたリストになり
全体を<ol>〜</ol>で囲み、
各項目は<li>〜</li>でテキストを囲みます。

<ol>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ol>

リストのマークや番号を変更(type属性)

リストマークや番号は
色々変更する事ができtype属性を変更します。

<ol type="a">
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ol>

<ol type="A">
 <li>リスト項目1</li>
 <li>リスト項目2</li>
 <li>リスト項目3</li>
</ol>

<ol type="i">
 <li>リスト項目1</li>
 <li>リスト項目2</li>
 <li>リスト項目3</li>
</ol>

<ol type="I">
 <li>リスト項目1</li>
 <li>リスト項目2</li>
 <li>リスト項目3</li>
</ol>

カウントダウン(reversed属性)

reversed属性を使用する事でリスト番号を
カウントダウンする事ができます。

<ol reversed>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ol>

リスト開始番号を指定(start属性)

リスト開始番号は、
start属性を使用する事で指定する事ができます。

<ol start="3">
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
  <li>リスト項目4</li>
  <li>リスト項目5</li>
</ol>

リスト開始番号を指定(value属性)

li要素にvalue属性を指定すると、
項目の番号が変更されます。

<ol start="3">
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li value="1">リスト項目3</li>
  <li>リスト項目4</li>
  <li>リスト項目5</li>
</ol>

説明リスト

説明リストは、用語とその説明をセットにして
リスト化するためのタグに
dl要素・dt要素・dd要素を使用します。

全体を<dl>〜</dl>で囲み、
dt要素(用語)とdd要素(説明)をペアにします。
※<dd>〜</dd>の範囲がインデントされる

<dl>
  <dt>会社名</dt>
  <dd>株式会社 トモジ</dd>
  <dt>所在地</dt>
  <dd>〒123-4567 ○○県○○市○○町</dd>
  <dt>電話番号</dt>
  <dd>999-9999-9999</dd>
</dl>

2.CSSでのデザイン変更

CSSでのリスト表示のデザイン変更について説明していきます。

リストのマークや番号の形式を変更
(list-style-type)

CSSでのリストマークや番号を変更するには
list-style-typeプロパティを使用します。

以下の項目はlist-style-typeの変更種類

リストのマークを画像に変更
(list-style-image)

リストマークを画像に変更する場合は、
list-style-imageプロパティを使用します。

<ul>
  <li>list-style-image(スライム)</li>
  <li>list-style-image(スライム)</li>
  <li>list-style-image(スライム)</li>
</ul>

ul{list-style-image: url(画像リンク);}

まとめ

最後にこの記事のポイントをまとめておきます。