![【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も](https://hyakuyattsu.com/wp/wp-content/uploads/2019/03/css-list-ten-title.jpg)
ホームページやブログをみていると、
- あいうえお
- かきくけこ
- さしすせそ
このような箇条書きをよく見かけますよね。
箇条書きを表現するリスト（ul、li）タグの使い方と、種類の使い分けをご紹介。
また、リストタグを使用した時に、先頭に入るマーカーの消し方も合わせてをご説明します。
関連リンクタグの色や下線の設定変更
関連簡単！htmlタグの使い方【web初心者向け】
「リストタグ」とは
HTMLでは親要素ul・ol、子要素liのタグを使い分けることで「箇条書き（リスト）」を作ることができます。
使い方は簡単
箇条書きにしたい要素の１つ１つをliで囲い、それらをまとめてulもしくはolで囲います。
html
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
- あいうえお
- かきくけこ
- さしすせそ
このようになります。
箇条書きの要素である「li」はいくつに増えても大丈夫です。
「ul」と「ol」の違いについて
２種類ある親要素のタグulとolの違いは、
「ul」を使用した場合
- あいうえお
- かきくけこ
- さしすせそ
ソースコードはこちら↓
html
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
「ol」を使用した場合
- あいうえお
- かきくけこ
- さしすせそ
ソースコードはこちら↓
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を適用する方法３種類まとめ
続きを見る
「ul」の場合
css
ul {
list-style-type: none;
}
- あいうえお
- かきくけこ
- さしすせそ
「ol」の場合
css
ol {
list-style-type: none;
}
- あいうえお
- かきくけこ
- さしすせそ
CSSにlist-style-type: none;を記述することで、先頭のマーカーを非表示にするすることができます。
先頭のマーカーを消してしまえばul、olのどちらで記述しても違いはありません。
消したマーカーのスペースを埋めるには
この時、消えたマーカーのスペースが空いたままの状態になります。
このスペースも不要な場合は、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」の２種類の違い。
また、先頭に自動で入る「・（中黒）や連番」などのマーカーをCSSを使って消す方法も併せてご紹介しました。
- WEBやプログラミングの知識をつけたい
- でも、スクールの学費は高すぎる
という方には、安価で始められる「侍テラコヤ」がオススメ！
-
-
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
続きを見る
ポチップ
