【HTML】ul要素、li要素の使い方【順序のないリストを表します】

Program

順序のないリストは、ul要素とli要素を使って表しましょう。

ul要素とli要素の使い方

以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ul要素、li要素</title>
</head>
<body>
    <ul>
        <li>鳥取県</li>
        <li>島根県</li>
        <li>岡山県</li>
        <li>広島県</li>
        <li>山口県</li>        
    </ul>
</body>
</html>

body要素の中に、順序のないリストを表すul要素があります。

ul要素の中には、一つ一つのリスト項目を示すli要素が5つあります。

そして、ブラウザでの表示結果の通り、5つのリスト項目が、黒丸(ドット)によって項目として表示されました。

また、項目を示す黒丸(ドット)の表示スタイルを変更する場合は、CSSのlist-style-typeプロパティを使用することになります。

各種ブラウザでの表示結果

ul要素、li要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
ul要素
li要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、ul要素、li要素の使い方について、ご参考になさってください。

タイトルとURLをコピーしました