どうも！ニシドラ(@nishidorablog)です。
この記事ではHTMLでの箇条書きリストの作成方法について解説します。
HTMLで表現できる箇条書きは「黒い丸」と「数字」の2種類です。
イメージは上の画像のような感じです。
サイト内で表示する場合、HTMLタグは「ul(黒い丸)」と「ol(数字)」を使います。
この記事では、ulタグとolタグ、それぞれの使い方と2つのタグを合わせて使う方法を解説していきます。
CSSで白い丸やひらがな、ローマ字などいろいろな装飾をすることもできます。
装飾方法については、【list-style-typeプロパティ】CSSで箇条書きリストの装飾方法にまとめてあります。
箇条書きリストを作成するulタグ・olタグ
箇条書きリストを作成するには「ulタグ」か「olタグ」を使います。
リストの表示はul・olタグ単体では機能せず、それぞれのタグの間に「liタグ」を使ってリスト項目を追加していきます。
liタグの「li」は「list item」の略で、箇条書きにするリストアイテムを意味しています。
また、liタグはul・olタグの間に何個でも入れることができます。制限はありません。
それぞれの使い方を説明していきます。
ulタグ
「ulタグ」の「ul」は英語で番号のつかないリストという意味の「unordered list」の略です。
ulタグでliタグを囲った場合、先頭が「黒い丸」で装飾されます。
実際にulタグを使ってブラウザで表示させると下の図のようになります。
上の図のコードは以下のようになっています。リストを黒い点で表示し、項目を5つ表示させるようにしています。
<li>リストその1</li>
<li>リストその2</li>
<li>リストその3</li>
<li>リストその4</li>
<li>リストその5</li>
</ul>
olタグ
「olタグ」の「ol」は英語で番号付きのリストという意味の「ordered list」の略です。
olタグでliタグを囲った場合、先頭が「数字」で装飾されます。
実際にolタグを使ってブラウザで表示させると下の図のようになります。
上の図のコードは以下のようになっています。項目を5つにしているので、リストが1から5まで表示されています。
<li>リストその1</li>
<li>リストその2</li>
<li>リストその3</li>
<li>リストその4</li>
<li>リストその5</li>
</ol>
リストの中にリストを作成する方法
箇条書きリストの中に、別の箇条書きリストを作成することもできます。
個別に要素をしている方法に、「ID名・クラス名を付ける方法」があります。
ID名・クラス名については、【クラス名とID名】ID・CLASS属性を使ったスタイルを個別で指定する方法を参考にしてみてください。
左下のHTMLコードには「list-1」というクラス名が付けられたulタグの中に「list-2」というクラス名のolタグが3つあります。
右下のCSSコードでは横幅、枠線の色、余白を指定しています。
<li>
<ol class=”list-2″>
<li>箇条書きリスト1</li>
<li>箇条書きリスト2</li>
</ol>
</li>
<li>
<ol class=”list-2″>
<li>箇条書きリスト3</li>
<li>箇条書きリスト4</li>
</ol>
</li>
<li>
<ol class=”list-2″>
<li>箇条書きリスト5</li>
<li>箇条書きリスト6</li>
</ol>
</li>
</ul>
.list-1 {
width: 200px;
border: 1px solid red;
}
.list-2 {
margin: 20px 0;
width: 150px;
border: 1px solid blue;
}
ブラウザで表示させると下画像のようになります。
赤い大枠(ulタグ)の中に青い枠(olタグ)を3つ作成することができました。
まとめ
今回の内容をまとめると以下のようになります。
- 箇条書きリストを作成するときはul・olを使う
- ulタグで箇条書きリストを表示させると先頭が黒い丸で表示される
- olタグで箇条書きリストを表示させると先頭が数字で表示される
- ul・ol単体ではリスト表示されず、間にliタグを入れる
- liタグの個数制限はない
- リストの中にリストを作成できる
箇条書きリストを作成することで、文章の内容をわかりやすくすることができます。
また、箇条書きリストを使うことでSEO対策にもつながりますので、積極的に使うことをオススメします。
次回は、「リンクの装飾方法」について解説します。
コメント