css html WEB 作りたい

【web】リストタグ(箇条書き)の使い方と頭の装飾(マーカー)の消し方

初めましてこんにちは、daruma108です。

ホームページの制作やWEB関係のお仕事などをしている方にとっては、初歩的なことかも知れませんが、htmlのリスト(ul、li)タグの使い方と種類の紹介と、リストタグを使用した時にデフォルトで入る先頭のマーカーの消し方をご紹介します。

今回改めてこの内容について記事にしようと考えたきっかけは、リストタグ(li)を使ってスライダーを作成した際に、妙なスペースが出来き、その原因が今回のリストタグが原因だったためです。

「リストタグ」とは

HTMLではulolliの3種類のタグを使つことで「箇条書き(リスト)」を作ることができます。
使い方は簡単で箇条書きの1つ1つを「li」で囲い、それらをまとめて「ul」もしくは「ol」で囲います。

 html
<ul>
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ul>
  • あいうえお
  • かきくけこ
  • さしすせそ

このようになります。箇条書きの要素であるl「li」はいくつに増えても大丈夫です。

「ul」と「ol」の違いについて

2種類あるリストタグ「ul」と「ol」の違いについて見ていきましょう。

「ul」を使用した場合

  • あいうえお
  • かきくけこ
  • さしすせそ

ソースコードはこちら↓

 html
<ul>
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ul>

「ol」を使用した場合

  1. あいうえお
  2. かきくけこ
  3. さしすせそ

ソースコードはこちら↓

 html
<ol>
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ol>

「li」を使うと頭に「・(中黒)」がついたリストが、「ol」を使うと頭に「1,2,3‥」と連番がついたリストが作れます。

li:「・(中黒)」がついたリスト
ol:連番がついたリスト

それぞれのリストタグの先頭のマーカーを消す方法

それぞれのリストタグ(ul・ol)でデフォルトで先頭に入る「・」と「1,2,3‥」連番は非表示にすることも可能です。
表示と非表示を切り替えるためにはCSSプロパティを指定します。

チェック

htmlにCSSを適応させる方法はこちらの記事をご覧ください。
【初心者にも簡単】HTMLにCSSを適用する方法3種類まとめ

「ul」の場合

 css
ul {
list-style-type: none;
}
  • あいうえお
  • かきくけこ
  • さしすせそ

「ol」の場合

 css
ol {
list-style-type: none;
}
  1. あいうえお
  2. かきくけこ
  3. さしすせそ

先頭のマーカーを消してしまえば「ul」と「ol」のどちらで記述しても同じになります。
この時、マーカーを消しても左側のスペースが空いたままになります。このスペースも不要な場合はCSSに「padding-left: 0;」要素を追加指定する必要があります。

 css
ul {
list-style-type: none;
padding-left: 0;
}

単純なリスト表示の時だけでなく、スライダーの要素としてリストタグを使用している場合も、不要な空きが入るときは、上のCSSを参考にしてみてください。

まとめ

いかがでしたでしょうか。

htmlで箇条書きを表すリストタグの使い方と「ul」と「ol」の2種類の違いをご紹介しました。
また、先頭に自動で入る「・(中黒)や連番」などのマーカーをCSSを使って消す方法も併せてご紹介しました。

チェック

htmlにCSSを適応させる方法はこちらの記事をご覧ください。
【初心者にも簡単】HTMLにCSSを適用する方法3種類まとめ

-css, html, WEB, 作りたい
-, , ,

© 2021 ひゃくやっつ