ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > 【HTML】箇条書き(ul, ol, li)に使えるタグについて解説

【HTML】箇条書き(ul, ol, li)に使えるタグについて解説

HTML/CSS

2022/08/23

2023/06/02

箇条書きをするタグ

HTMLには見出しタグや段落タグなどさまざまなタグがあります。箇条書きをするときに使うタグはulタグ、olタグ、liタグの3つです。3つのタグにはそれぞれ役割があります。

この記事では、「HTMLの箇条書きに使えるタグ」について解説していきます。

この記事のゴールは「箇条書きで使えるタグの役割について理解し、適切に使い分けること」です。

いっしょに学習していきましょう。

 

この記事で身につく内容
  • HTMLの箇条書きで使うタグの基礎知識
ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

箇条書きで使うulタグ:順序のないリストを表示する

箇条書きで使えるタグは、ulタグ、olタグ、liタグ、の3つです。ulタグは順序のないリストを表示する際に使用します。ulはUnordered Listの略です。

基本書式

<ul>
  <li>要素</li>
  <li>要素</li>
  <li>要素</li>
</ul>

基本書式をそのままブラウザで表示すると次のようになります。

出力結果

ulタグは順序のないリストを表示するタグのため、ナンバリングがされません。ulタグで囲まれたliタグの先頭には「・」が付与されます。デフォルト表示では「・」が表示されますが、この記号はCSSのlist-styleプロパティで変更することができます。

例えば「・」の黒い丸点を、黒い四角の点に変更する場合は、次のように指定できます。

ul {
  list-style: square;
}

出力結果

リスト-四角

list-styleプロパティはさまざまな値があり、リスト表示の文頭の部分を変更することができます。ただし、例えばチェックマークのような見た目を表示させる場合は、list-style: none; を適用して「・」を非表示にし、疑似要素などでスタイルをつくる必要があります。

 

ulタグは順序のないリストを表示するタグですが、list-styleプロパティで順序を付けることができます。

ul {
  list-style: decimal;
}

出力結果

 

箇条書きで使うolタグ:順序のあるリストを表示する

ollタグは順序のある番号付きのリストを表示する際に使用します。olはOrdered Listの略です。

基本書式

<ol>
  <li>要素</li>
  <li>要素</li>
  <li>要素</li>
</ol>

基本書式でブラウザの表示を確認します。

出力結果

ulタグと違い、olタグはデフォルトでナンバリングされます。ulタグのときと同様に、list-styleで要素の頭の表示を変えることができます。

以下は要素の頭を「・」に変更したスタイルです。

ol {
  list-style: disc;
}

出力結果

箇条書きに使うliタグ:リストの項目に使う

liタグはLlist Iitemの略で、リストの項目に使うタグです。ulタグ、olタグの中で使用することができます。

liタグはulタグ、olタグに囲まれた状態で使用するため、liタグ単体で使用することはありません。

liタグはブロック要素です。liタグを横並びにする場合は、liタグにdisplay: inline; を指定するか、ulタグ(olタグ)にdisplay: flex; を適用します。

<ul>
  <li>要素</li>
  <li>要素</li>
  <li>要素</li>
</ul>

<ol>
  <li>要素</li>
  <li>要素</li>
  <li>要素</li>
</ol>
ul {
  display: flex;
  list-style: none;
}

ol li {
  display: inline;
}

出力結果

リスト-横に並べる

 

チェックマークの箇条書きリストを作ってみよう

箇条書きのタグを使って、チェックマーク付きの箇条書きリストを作成してみましょう。

コードは次のようになります。

<ul>
  <li>短い文章の項目</li>
  <li>長い文章の項目長い文章の項目長い文章の項目長い文章の項目</li>
  <li>短い文章の項目</li>
</ul>
ul {
  width: 200px;
  list-style: none;
}


ul li {
  position: relative;
}

ul li:not(:first-child) {
  margin-top: 10px;
}

ul li:before {
  display: block;
  position: absolute;
  top: 6px;
  left: -18px;
  width: 10px;
  height: 5px;
  transform: rotate(-45deg);
  border-bottom: 1px solid red;
  border-left: 2px solid red;
  content: "";
}

出力結果

See the Pen チェックマーク by ZeroPlus (@zeroplus-programming) on CodePen.

ulタグにlist-style: none; を適用して、デフォルトで表示される「・」を非表示にします。

チェックマークは疑似要素で作成するので、liタグにposition: relative;を指定してください。

下記のスタイルで、最初のli要素「以外」の要素にmargin-topで余白を設けています。

ul li:not(:first-child) {
  margin-top: 10px;
}

チェックマークは下記の部分で、疑似要素で作成しています。

ul li:before {
  display: block;
  position: absolute;
  top: 6px;
  left: -18px;
  width: 10px;
  height: 5px;
  transform: rotate(-45deg);
  border-bottom: 1px solid red;
  border-left: 2px solid red;
  content: "";
}

position: absolute; でチェックマークの位置を指定。border-left, border-bottomでチェックマークを表現し、それをtransform: rotate(-45deg); で回転させます。

 

まとめ

箇条書きのタグについて解説しました。箇条書きで並べるだけでなく、要素を規則性のある並びにしたいときにも使われます。

デフォルトのリストスタイルはほとんどの場合、リセットCSSによってスタイルを非表示にして使います。疑似要素を使って独自のスタイルを当てることが多いです。

 

HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。

Web制作は、その他にも学ぶべき知識が数多くあります。

Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください!

箇条書きで使えるタグまとめ

  • ulタグは順序のない箇条書きリストに使う
  • olタグは順序のある箇条書きリストに使う
  • liタグはulタグ、olタグの中で使う
ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから