人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

htmlのordered listを使って

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

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

とすると

野菜
1. 大根


1. 牛肉

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

野菜
1. 大根


2. 牛肉

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

●質問者: webster
●カテゴリ:コンピュータ インターネット
✍キーワード:HTML 大根 牛肉 野菜
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kawasaki
●35ポイント

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

<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>

2 ● kaz
●35ポイント

これは 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>
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ