WEB 作りたい

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

ホームページやブログをみていると、

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

このような箇条書きをよく見かけますよね。

箇条書きを表現するリスト(ul、li)タグの使い方と、種類の使い分けをご紹介。

また、リストタグを使用した時に、先頭に入るマーカーの消し方も合わせてをご説明します。

関連リンクタグの色や下線の設定変更
関連簡単!htmlタグの使い方【web初心者向け】

「リストタグ」とは

HTMLでは親要素ulol、子要素liのタグを使い分けることで「箇条書き(リスト)」を作ることができます。

使い方は簡単

箇条書きにしたい要素の1つ1つをliで囲い、それらをまとめてulもしくはolで囲います。

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

このようになります。

箇条書きの要素である「li」はいくつに増えても大丈夫です。

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

2種類ある親要素のタグulolの違いは、

「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を適用させる方法は

Check!
【初心者にも簡単】HTMLにCSSを適用する方法3種類まとめ

続きを見る

「ul」の場合

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

「ol」の場合

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

CSSにlist-style-type: none;を記述することで、先頭のマーカーを非表示にするすることができます。

先頭のマーカーを消してしまえばulolのどちらで記述しても違いはありません。

消したマーカーのスペースを埋めるには

この時、消えたマーカーのスペースが空いたままの状態になります。

このスペースも不要な場合は、CSSにpadding-left: 0;要素を追記。

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

左側の空いたスペースを埋めることができます。

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

まとめ

htmlで箇条書きを表すリストタグの使い方と「ul」と「ol」の2種類の違い

また、先頭に自動で入る「・(中黒)や連番」などのマーカーをCSSを使って消す方法も併せてご紹介しました。

  • WEBやプログラミングの知識をつけたい
  • でも、スクールの学費は高すぎる

という方には、安価で始められる侍テラコヤ」を1度チェックしてみて!

口コミや評判、実際に入会してみて気づいた注意点を紹介!

Check!
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

続きを見る

リコー「THETA SC2」で撮影した写真・動画をウェブ上で公開する方法 【360度カメラ】

WEB カメラ

2023/10/12

リコー「THETA SC2」で撮影した写真・動画をウェ...

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

WEB デザイン

2023/5/13

「侍テラコヤ」は安くで始めるプログラミングスクール【リ...

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

WEB 作りたい

2022/11/9

【箇条書き】リストタグ[ ul・ol・li ]の使い方...

ブログにコメント欄は必要?非表示にする設定方法【WordPress】

WEB 作りたい

2022/10/5

ブログにコメント欄は必要?非表示にする設定方法【Wor...

誰でもホームページの更新ができるようにする方法【googleドキュメント簡単活用術】

WEB 作りたい

2022/9/11

自社で更新できるホームページ作成【Googleドキュメ...

-WEB, 作りたい
-,