箇条書きのタグ

箇条書きのタグは、数字付きと数字なしの２種類があります。

各項目に数字をつけて羅列したい場合は <ol> </ol> のタグを使用します。
各項目に数字をつけない場合は　< ul > </ul>　のタグを使用します。

上記のタグの中に、各項目の文字を　<li> </li> で括って入れ込むと、箇条書きで文字が表示されます。

例1）　数字をつけて文字を箇条書きする場合、以下のように入力する。
<ol> <li>りんご</li> <li>みかん</li> <li>バナナ</li> </ol> ＜実際の見え方＞

1. りんご
2. みかん
3. バナナ

例2）数字なしで文字を箇条書きする場合、以下のように入力する。
<ul> <li>りんご</li> <li>みかん</li> <li>バナナ</li> </ul> ＜実際の見え方＞

• りんご
• みかん
• バナナ

これらのタグで、文字の他に画像やリンクも羅列できます。 ※画像のタグ、リンクのタグについて

例）Yahoo!Japanのトップページリンク（https://www.yahoo.co.jp）とimagesフォルダの中の
手書きイラスト(元データの10%の大きさ) を羅列する場合、以下のように入力する。 <ul> <li><a href="https://www.yahoo.co.jp/">yahooトップページ</a></li> <li><img src="images/star.png" width="10%"></li> </ul> 　　
＜実際の見え方＞

• yahooトップページ
• 

数字なしの場合、先頭のマーカー（・）の記号を変換することができます。
変換するには< ul > </ul>の代わりに、<ul style="list-style-type: マーカーの種類";)"> </ul> で括ります。

例）マーカーを○にする→style="list-style-type: circle"
<ul style="list-style-type: circle"> <li>りんご</li> <li>みかん</li> <li>バナナ</li> </ul> ＜実際の見え方＞

• りんご
• みかん
• バナナ

例）マーカーを非表示にする→style="list-style-type: square"
<ul style="list-style-type: square"> <li>りんご</li> <li>みかん</li> <li>バナナ</li> </ul> ＜実際の見え方＞

• りんご
• みかん
• バナナ

例）マーカーを非表示にする→style="list-style-type: none"
<ul style="list-style-type: none"> <li>りんご</li> <li>みかん</li> <li>バナナ</li> </ul> ＜実際の見え方＞

• りんご
• みかん
• バナナ

※ 中黒（・）を示すのに、あえてstyle="list-style-type: disc"と入力もできます



　<前のページへ戻る>