HTML

HTML基礎講座 リストを表示しましょう

Webサイトで使われている箇条書きはこれから学習する「リストタグ」を使って書かれています。

ulタグとliタグ

箇条書きを表示させるには次のように書きます。

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>PHP</li>
</ul>

表示はこうなります。

コードの中で「ul」タグは「Unordered List」(アンオーダード・リスト)の略で、順序が決まっていないリストを表示させなさいと指示しています。

そして「li」タグは「List Item」の略で箇条書きに表示する内容を書くところです。

olタグとliタグ

番号付きの箇条書きを表示させるのは次のように書きます。

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>PHP</li>
</ol>

表示はこうなります

番号付きの箇条書きを書くときは「ul」タグではなく「ol」タグを使います。

olタグのolは「Ordered List」(オーダード・リスト)の略です。

まとめ

まとめとして、箇条書きは、順番がない場合はulで、順番がある場合はolで書いて、間にliを挟んで表示させることが分かりました。

箇条書きはちょっとしたまとめに使えますので活用しましょう。