メニュー

HTMLのolタグとulタグでのリストの作り方

HTML
当ページのリンクには広告が含まれています。
  • URLをコピーしました！
生徒

WEBページのリストの書き方がよくわかりません

先生

HTMLでいろいろなリストを書く方法を説明します

この記事でわかること
  • HTMLでリストを表示する方法
  • HTMLのリスト表示を変える設定
目次

リストは<ol>タグ<ul>タグの2種類

HTMLのリスト要素には、以下の2種類があります。

  • <ol>タグ：順序付きリスト
  • <ul>タグ：順序なしリスト

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

リスト項目要素は<li>タグで共通

<ol>タグ、<ul>タグの2つのリストとも、リスト内の各項目は<li>タグで共通です。

<!-- 順序付きリスト -->
<ol>
  <li>りんご</li>
  <li>もも</li>
</ol>
<!-- 順序なしリスト -->
<ul>
  <li>バナナ</li>
  <li>なし</li>
</ul>

リスト項目は入れ子にできる

<ul>タグ、<ol>タグともに、入れ子にして、リストの中にリストを作れます。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

<ol>タグは順序付きリスト

<ol>タグは、リストの各要素の先頭に自動的に番号が振られます。

初期設定では、リスト項目に“1.”、”2.”・・・の文字が自動で振られます。

style属性で文字を変更できる

<ol>タグの各項目の先頭に表示される番号をstyle属性で変更できます。

属性説明例
style=”1″先頭に数字を順番に表示する。
1. りんご
2. バナナ
3. もも
style=”a”先頭にアルファベットの小文字を順番に表示する。
a. りんご
b. バナナ
c. もも
style=”A”先頭にアルファベットの大文字を順番に表示する。A. りんご
B. バナナ
C. もも
style=”i”先頭にローマ数字の小文字を順番に表示する。ⅰ. りんご
ⅱ. バナナ
ⅲ. もも
style=”I”先頭にローマ数字の大文字を順番に表示する。Ⅰ. りんご
Ⅱ. バナナ
Ⅲ. もも

reverse属性で逆順にできる

<ol>タグにreverse属性を設定することで、先頭文字の順序を逆にできます。

start属性開始位置を設定する

<ol>タグにstart属性を設定することで、先頭文字の順序を逆にできます。

<ul>タグは順序なしリスト

<ul>タグは、リストの各要素の先頭に中点のマークが自動的に付きます。

先頭のマークを変更できる

<ul>タグの各項目の先頭のマークは、CSSのlist-style-type属性で指定できます。

<ul>タグのstyle属性は非推奨となっているので使わないようにして、CSSで指定します。

list-style-typeプロパティの値説明
disc（初期値）黒丸の中点を先頭に付加します。
circle中が空白の中点を先頭に付加します。
square塗りつぶされた四角形の中点を先頭に付加します。
その他の値について

他にもいろいろな値がありますが、ブラウザによっては表示されない場合があるので使う際には注意が必要です。

MDN Web Docs
list-style-type – CSS: カスケーディングスタイルシート | MDN list-style-type は CSS のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
¥2,486 （2023/11/17 06:59時点 | Amazon調べ）
Amazon

入れ子にすると自動で先頭のマークが変わる

<ul>タグを入れ子にした場合、自動的にマーカーの形が変わります。

<ol>タグ<ul>タグ共通の内容

リストの先頭のマークを消す

リストの先頭のマーカーを消したいときは、CSSのlist-style-typeプロパティでnoneを指定します。

リストの項目を水平方向に並べる

リストの項目を縦にではなく水平方向に並べるには、CSSでdisplay: flex;を指定します。

WEBサイトのメニューなどで、リストのマーカーを消して水平方向に並べることは多いと思います。

HTML
よかったらシェアしてね！
  • URLをコピーしました！
目次