【HTML】【li】リスト（箇条書き）で表示をする方法

【HTML】
【li】タグ
リスト（箇条書き）で表示をする方法

「li」タグは、
リスト（箇条書き）を作成するための「HTMLタグ」。

「ul」タグ、「ol」タグを使用して、
リスト（箇条書き）を作成します。

「li」は、リストの項目を囲む「HTMLタグ」で、
リストの内容を取り扱います。

「ul」「ol」タグは、
リスト（箇条書き）の種類を指定します。

メニューとしても利用されることがあるので、
比較的便利な「HTMLタグ」。

HTMLタグ	リストの種類
ul	各項目の先頭に「黒丸」が付いたリスト（箇条書き）
ol	各項目の先頭に「番号」が付いたリスト（箇条書き）

INDEX

■ リスト（箇条書き）の作り方

■ リスト（箇条書き）の書式
■ 「li」タグの属性

リスト（箇条書き）の作り方

「HTML」で、「リスト（箇条書き）」を作成するには、
「ul」「ol」「li」タグを使用して作成します。

「リスト（箇条書き）」の種類を指定するのが、「ul」「ol」タグ。
「リスト（箇条書き）」の項目を指定するのが「li」タグ。

というように、役割分担がされています。

「属性」を指定することで、
簡単なアレンジをすることも可能。

・先頭マークの変更
・先頭マークなしへの変更
・項目の途中改行

リストのアイコンを画像にする方法もある。
「CSS」プロパティの「list-style-image」で指定するだけ。

list-style-image: url(./ディレクトリ名/画像ファイル名.png);

HTMLタグ	リストの種類
ul	各項目の先頭に「黒丸」が付いたリスト（箇条書き）
ol	各項目の先頭に「番号」が付いたリスト（箇条書き）

リスト（箇条書き）の書式

各項目の先頭に「黒丸」が付いたリスト（箇条書き）

<ul>
<li> 項目 1 </li>
<li> 項目 2 </li>
<li> 項目 3 </li>
</ul>

とHTMLコードを入力すると、
下記のよう表示になります。

項目 1
項目 2
項目 3

アレンジバージョン

<ul>
<li type="circle"> 項目 1 </li>
<li> Second <br> List </li>
<li style="list-style: none;"> 項目 3 </li>
</ul>

とHTMLコードを入力すると、
下記のよう表示になります。

項目 1
Second
List
項目 3

各項目の先頭に「番号」が付いたリスト（箇条書き）

<ol>
<li> 項目 1 </li>
<li> 項目 2 </li>
<li> 項目 3 </li>
</ol>

とHTMLコードを入力すると、
下記のよう表示になります。

項目 1
項目 2
項目 3

「li」タグの属性

属性	説明
value	項目で表示する「初期値」を指定する属性。
class	「クラス名」を指定する属性。同一クラス名を複数のHTMLタグに指定可能。「CSS」でのレイアウトデザインでは、同一クラス名に一括指定が可能。
id	「ID名」を指定する属性。一つのファイルで、同じ「ID名」を複数に指定することはできない。「CSS」でのレイアウトデザインでは、ID名で個別指定が可能。
title	「HTMLタグ（要素）」にタイトルを指定する属性。マウスを要素に重ねると、指定した「タイトル」が表示される。
type	type="disc"：黒丸アイコン・disc = 黒丸アイコン・circle = 白丸アイコン・sqare = 四角アイコン・1 = アラビア数字・A = =ローマ字（大文字）・a = ローマ字（小文字）・I = ローマ数字
value	value="数値" = 任意の数字から開始

Back