Top > IT > Web > HTML > ulElementTips
Last-modified: Thu, 11 Feb 2016 11:24:08 JST
Counter:1488 Today:1 Yesterday:2 Online:5
このエントリーをはてなブックマークに追加

(注意) 記事を引っ越しました

ul 要素に関する Tips

ul 要素の直下に ul 要素は入れられない

ul 要素を ul 要素の直下に入れることはできません。ul 要素は1つ以上の li 要素を含み li 要素のみを入れることができます。 したがって次の構造は誤りです。

<ul>
    <ul>
    <li> Text </li>
    </ul>
</ul>

正しくは次のようになります。

<ul>
<li>
    <ul>
    <li> Text </li>
    </ul>
</li>
</ul>

ただし連続しない階層構造を持ったリストはドキュメントとしては改善の余地があります。一般にはこのような構造になることはないでしょう。

p 要素に ul 要素を入れることはできない

p 要素の直下に ul 要素を入れることはできません。したがって次の構造は誤りです。

<p>
For example,
<ul>
<li>List1</li>
<li>List2</li>
</ul>
like this.
</p>

W3C は次のような改善例を示しています。

<p>For example,</p>
<ul>
<li>List1</li>
<li>List2</li>
</ul>
<p>like this.</p>

この構造は誤りではありません。しかしながらこのような例では、2つの p を1つの段落として扱いたいと思うでしょう。これについても、W3C は改善例を示しています。

<div>For example,
<ul>
<li>List1</li>
<li>List2</li>
</ul>
like this.
</div>

しかし残念ながら次のようにはできないようです。

<p>
<div>For example,
<ul>
<li>List1</li>
<li>List2</li>
</ul>
like this.
</div>
</p>

p 要素のコンテンツモデルはフレージングコンテンツです。div 要素はフローコンテンツですから、p 要素の直下に、div 要素を含めることはできません。