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を使って消す方法も併せてご紹介しました。

htmlやcssなど「プログラミングを学んでみたい」という方には、無料体験が受けられるプログラミングスクールがオススメです。

無料体験があるプログラミングスクール

※無料体験だけならいっさいお金はかかりません。

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

WEB 作りたい

2022/11/9

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

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

WEB 作りたい

2022/10/5

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

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

WEB 作りたい

2022/9/11

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

今、再注目のアニメーションGifの素材サイトまとめ【フリー】

design WEB 作りたい

2022/9/3

今、再注目のアニメーションGifの素材サイトまとめ【フ...

360度画像をホームページで埋め込み公開する方法まとめ【insta360】

WEB カメラ 作りたい

2022/4/21

撮影した360度画像をブログ・ホームページに公開する方...

-WEB, 作りたい
-,