htmlのordered listを使って


<I> 野菜</I>
<OL>
<LI> 大根
</OL>

<I> 肉 </I>
<OL>
<LI> 牛肉
</OL>

とすると

野菜
1. 大根


1. 牛肉

となると思います。ここで

野菜
1. 大根


2. 牛肉

という出力を得る(Ordered listが中断されない)にはどうしたらよいでしょうか。

回答の条件
  • 1人5回まで
  • 登録:2010/01/24 04:27:04
  • 終了:2010/01/31 04:30:03

回答(2件)

id:phero No.1

kawasaki回答回数55ベストアンサー獲得回数92010/01/24 07:00:13

ポイント35pt

これでいかがでしょうか?

	<ol>
		野菜
		<li>大根</li><li>牛肉</li>
	</ol>

位置が少し気持ち悪いので修正すると、

下記のような感じではいかがしょうか。

<html>
<head>
	<style type="text/css">
		p {
			font-weight:bold;
		}
		li {
			margin-left:50px;
		}
	</style>
</head>
<body>
	<ol>
		<p>野菜</p>
		<li>大根</li>
		<p></p>
		<li>牛肉</li>
	</ol>
</body>
</html>

あるいは、最初の番号を変更することも出来ます。

	<ol>
		野菜
		<li>大根</li>
	</ol>
	<ol start="2"><li>牛肉</li>
	</ol>
id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422010/01/24 13:48:30

ポイント35pt

これは ul / ol / dl など、リスト系タグの直下には li / dt / dd しか存在する事ができない為です。

つまり「小見出し・数字つきリスト、小見出し・数字つきリスト.....」にしたい場合、

小見出しの部分をリスト以外で記述する必要があるため(そうしないと小見出しの先頭に数字がついてしまう)

必然的に小見出しの部分だけでリストを完結させる必要があります。(質問にある形式)


現在は多くのブラウザがこのあたりを曖昧に表示してくれるのですが、

文法に沿った記述でない場合、環境またはバージョンによって

表示のされ方が修正される可能性があるため、使わない方が安全です。


※「直下には存在できない」とはどういう事か

OK:「<p>小見出し</p>」は、直接ではなく li に囲まれて置かれているので OK

<ol>
<li><p>小見出し</p></li>
<li>項目</li>
</ol>


NG:ol の下に直接 li 以外の p が置かれているので文法違反

<ol>
<p>小見出し</p>
<li>項目</li>
</ol>
  • id:kaz
    2 で回答した kaz です。
    肝心の前半がトんでしまっていたようです。また、間違いもあったので訂正します。


    前半部分
    残念ながら「Ordered list が中断されない」方法は、HTML の仕様上無理です。
    phero さんの回答にあるように、start="○" によって開始数を指定するしかありません。


    間違いの訂正
    ×「小見出しの部分だけでリストを完結させる」
    ○「数字つきリストの部分だけでリストを完結させる」
  • id:phero
    > リスト系タグの直下には li / dt / dd しか存在する事ができない
    これは知りませんでした…ご指摘ありがとうございます。

    適当なことを言ってしまったようですので、ポイント不要です。

    仕様を見返してみましたら、こんな記述を見つけました。
    -----------------
    番号順に関する詳細 序列リストにおいて、リストの番号付けを前のリストから自動的に引き継いだり、あるリスト項目の番号を隠したりすることは、できない。 しかし、著者は、value属性を設定してリスト項目の番号を再設定することができる。後続のリスト項目の番号付けは、その新しい値から続行する。その例を次に示す。

    <ol>
    <li value="30"> 左の設定で、この項目の番号は30となる。
    <li value="40"> 左の設定で、この項目の番号は40となる。
    <li> そして、この項目の番号は41となる。
    </ol>
    -----------------
    http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/struct/lists.html


    以上、取り急ぎお詫びまで。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません