リスト要素概要

2008/05/29 21:40Update
TAGS: リスト要素 | OL | UL | LI | list-item

リスト要素はその名の通り、リストを意味する要素です。順序つけのOL要素、と順序つかないのUL要素、及びリストの項目であるLI要素などに構成されます。

UL、OL、LI要素のほか、"display:list-item" を適用した要素もリスト要素と見なします。

リスト要素概要


■リスト要素の種類
◇　UL要素
◇　OL要素
◇　LI要素
◇　「display:list-item」に適用された要素

■リスト要素例
◇　例１：
<ul>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>

◇　例２：
<ol>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

◇　例３：
.display_list {
    display:list-item;
}

<span class="display_list">リスト１</span>
<span class="display_list">リスト２</span>

リスト要素　使用例



◇　UL/OL/LIリスト要素
HTMLソース：（ソースを別ウィンドウで表示）（⇒効果を別ウィンドウで表示）

◇　UL要素の中にLI要素の使用例
<ul>
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
</ul>

◇　OL要素の中にLI要素の使用例
<ol>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
</ol>

◇　OL・UL・LI要素混在の使用例
<ul>
    <li>リスト項目１
        <ul>
            <li>リスト項目１１</li>
            <li>リスト項目１２</li>
            <li>リスト項目１３</li>
        </ul>
    </li>
    <li>リスト項目２
        <ol>
            <li>リスト項目２１</li>
            <li>リスト項目２２</li>
        </ol>
    </li>
</ul>

表示：（⇒別ウィンドウで表示）

◇　display:list-itemリスト要素
HTMLソース：（ソースを別ウィンドウで表示）（⇒効果を別ウィンドウで表示）

<html>
<head>

<style type="text/css">
.display_list_span {
    display:list-item;
}

.display_list_div {
    display:list-item;
}
</style>

</head>

<body>
<ul>
<span class="display_list_span">リスト１</span>
<span class="display_list_span">リスト２</span>
</ul>

<ol>
<div class="display_list_div">リスト１</div>
<div class="display_list_div">リスト２</div>
</ol>

</body>
</html>

表示：（⇒別ウィンドウで表示）

有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Sponsored Link


Comments

  • Relative Articles