HTML list-styleに見出し

質問

HTMLで、ブラウザ上での表示が
以下の様になるよう組んでいます。

-----------------------------------
コンテンツ大見出し　（←大見出しはh3を使用予定）

1．見出し見出し見出し見出し
　　内容テキスト内容テキスト内容テキスト内容テキスト
　　内容テキスト内容テキスト内容テキスト内容テキスト

2．見出し見出し見出し見出し
　　内容テキスト内容テキスト内容テキスト内容テキスト
　　内容テキスト内容テキスト内容テキスト内容テキスト

～以下同様7、8項目くらい下に続く
-----------------------------------

この場合、1～7項目まで続く、いわゆるリストなので
list-styleを使った方がいいかな、と思い、当初
↓
-----------------------------------
<ul>
<li>
<h4>見出し見出し見出し</h4>
テキスト内容テキスト内容テキスト内容テキスト内容
</li>

<li>
<h4>見出し見出し見出し</h4>
テキスト内容テキスト内容テキスト内容テキスト内容
</li>

～

</ul>
-----------------------------------

と書いてみましたが、
<li>の中には<h>タグを入れるべきではないと拝見し、
では<dl>を使って
↓
-----------------------------------
<dl>
<dt>見出し見出し見出し</dt>
<dd>テキスト内容テキスト内容テキスト内容テキスト内容 </dd>

<dt>見出し見出し見出し</dt>
<dd>テキスト内容テキスト内容テキスト内容テキスト内容 </dd>

～

</dl>
-----------------------------------

と組んでみました。
が、そうすると<dt>に番号がふれないのです。
どこかのサイトで、以下の様にスタイルシートに記述すればOKとありましたが

dt {
display: list-item;
list-style: disc outside;
…
}

上記を記述しても実現できませんでした。
勿論「disc」の部分を「decimal」にしました。

実現方法だけで考えれば、

・<dl>を使用して、見出し文の頭に自分で数字をつける
・<ul><li>を使用して、見出しの部分だけ<p>か何かで囲み、
　スタイルシートで文字の大きさ太さを調整する
・list-styleではなく、各項目<div>で囲み、見出しは<h>タグを使う

など、方法はあるのですが、

・番号がふられている見出しはそれなりに重要視しているので
　できればhタグか、見出しだと分かるタグを使用したい。
・番号がふられているリスト（のようなもの）なのでlist-styleが適当のような気がする。

このような場合、皆さんはどう記述されていますか？
どのような記述が正しいのでしょうか。
宜しくお願いします。

回答No.3

ORUKA1951 · ベストアンサー

こちらのほうが分かりやすいかな？？
body{counter-reset: Section 1;}
div.section h2{
counter-reset: subSection 0;
counter-increment: Section 1;
}
div.section div.section h3{
counter-reset: subSubSection 0;
counter-increment: subSection 1;
}
div.section div.section div.section h4{
counter-increment: subSubSection 1;
}
div.section h2:before {
content: counter(Section) ": ";
}
div.section h3:before {
content: counter(Section) "-" counter(subSection,upper-alpha) ": ";
}
div.section h4:before {
content: counter(Section) "-" counter(subSection,upper-alpha)"-"counter(subSubSection)": " ;
}

いずれにしても、counterはとってもよく使用するスタイルシートですから、身につけましょう。目次も利用できますが、普通にOLで良いでしょう。

回答No.2

ORUKA1951

スタイルシート部分です。
　このように、デザインなんて一切考えずに、HTMLは文書構造のマークアップだけに専念すると、製作もメンテナンスも楽ですし、スタイルシートもとっても簡単になります。HTMLにプレゼンテーションに関わるものがないので、デザインの変更も自由自在にできますよね。
★本文(div.section)中の、h2～h4までの見出しについてナンバリングしてます。
　本文を自在に追加して確認すること
<style type="text/css">
<!--
html,body{margin.0;padding:0;background-color:gray;}
h1,h2,h3,h4,h5,p{margin:0;line-height:1.8em;}
p{text-indent:1em;}
div.header,div.section,div.footer{
width:70%;min-width:470px;max-width:800px;
margin:0 auto;padding:5px;
background-color:white;
}
div.section div.section{
margin:0 0 0 2em;
width:auto;
font-size:0.95em;
min-width:0;
}

/* ナンバリング */
body{counter-reset: Section 1;}
div.section h2{counter-reset: subSection 0;}
div.section div.section h3{counter-reset: subSubSection 0;}
div.section h2:before {
content: counter(Section) "章) ";
counter-increment: Section 1;
}
div.section h3:before {
content: counter(Section) "章" counter(subSection) ") ";
counter-increment: subSection 1;
}
div.section h4:before {
content: counter(Section) "章" counter(subSection)". "counter(subSubSection)") " ;
counter-increment: subSubSection 1;
}
-->
</style>

回答No.1

ORUKA1951

＞HTMLで、ブラウザ上での表示が以下の様になるよう組んでいます。
　初歩の初歩で間違っている。とにかく仕様書に目を通しておくこと!!--構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
　HTMLには、とにかく文書構造しか書きません。「ブラウザ上での表示が以下の様になるよう」というのはスタイルシートの役割です。

＞コンテンツ大見出し　（←大見出しはh3を使用予定）
＞1．見出し見出し見出し見出し
＞　　内容テキスト内容テキスト内容テキスト内容テキスト
・・・・・・・・・
でしたら、HTMLは
<div class="header"></div>
<div class="section">
　<h2>本文見出し</h2>
　<div class="section">
　　<h3>項見出し</h3>
　　<p>記事・・・・・</p>
　</div>
　<div class="section">
　　<h3>項見出し</h3>
　　<p>記事・・・・・</p>
　</div>
　<div class="section">
　　<h3>項見出し</h3>
　　<p>記事・・・・・</p>
　</div>
</div>
<div class="footer"></div>
以外に無いはずです。!!
HTML5だと
<header></header>
<section><!-- sectionとh要素のセットで文書のアウトラインを明示する -->
　<h2>本文見出し</h2><!-- h1～h6の階層はsectionの階層が優先される -->
　<section>
　　<h3>項見出し</h3>
　　<p>記事・・・・・</p>
　</section>
　<section>
・・・【中略】・・・
　<section>
　　<h3>項見出し</h3>
　　<p>記事・・・・・</p>
　</section>
</section>
<footer></footer>
・・・
　⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )
　⇒HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )

＞<li>の中には<h>タグを入れるべきではないと拝見し、
　li要素は、(%flow;)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#h-10.2 )ですから、文法的には、<h>を入れられますが、それは
　<li><h3>見出し</h3>
　　　<p></p>
　　　<h3>見出し</h3>
　　　<p></p>
　</li>
のような場合です。リストの項目をまたいで<h>要素がアウトラインを作るのは間違いと言う意味です。

★文書のアウトラインを構成する(目次に記載されると言うような意味)要素に、番号を振るには、:before擬似要素にcontent:プロパティでcounterを記入します。
　⇒5.12.3 :beforeと:after疑似要素( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#before-and-after )
　⇒12 生成内容、自動番号付け、およびリスト( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/generate.html )

よってHTMLは以下のようになるはずです。
★HTML4.01strictです。
　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATAでチェック済み
★タブは＿に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>HTML 4による文書の著述</h2>
＿＿<p>本仕様は、HTML 4で作業を行う著者並びに実装者に対し、次の一般原則に従うよう推奨する。</p>
＿＿<div class="section">
＿＿＿<h3>構造とプレゼンテーションの分離</h3>
＿＿＿<p>HTMLは、常に構造的マーク付けを規定するところのSGMLをルーツに持っている。HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。</p>
＿＿</div>
＿＿<div class="section">
＿＿＿<h3>広汎なWebアクセス性の考慮</h3>
＿＿＿<p>誰にとっても、特に障害者にとってもWebをよりアクセスしやすくするため、著者は、自分の文書が音声出力ブラウザや点字出力等、様々なプラットフォームでどのようにレンダリングされるかを考慮する必要がある。 本仕様は、著者の創造性を制限しようというのではなく、設計時に代替的レンダリングのことを考慮するよう推奨するものである。 HTMLは、アクセス性方面に関して、例えば alt属性や accesskey属性など、数多くの機構を提供している。</p>
＿＿＿<p>・・・【中略】・・・</p>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>HTML 4による文書の著述</h2>
＿＿<div class="section">
＿＿＿<h3>構造とプレゼンテーションの分離</h3>
＿＿＿<p>HTMLは、常に構造的マーク付けを規定するところのSGMLをルーツに持っている。HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。</p>
＿＿＿<div class="section">
＿＿＿＿<h4>ユーザエージェントの逐次表示を助けること</h4>
＿＿＿＿<p>注意深く表を設計し、HTML 4にある新しい機能を用いることで、著者はユーザエージェントがより素早く文書をレンダリングすることを助けることができる。・・・【中略】・・・</p>
＿＿＿</div>
＿＿＿<div class="section">
＿＿＿＿<h4>ユーザエージェントの逐次表示を助けること</h4>
＿＿＿</div>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

補足

私の言い方がまずかったです。

＞　初歩の初歩で間違っている。とにかく仕様書に目を通しておくこと!!--構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
＞　HTMLには、とにかく文書構造しか書きません。「ブラウザ上での表示が以下の様になるよう」というのはスタイルシートの役割です。

はい、そのように認識しています。
質問カテゴリが「Webデザイン・CSS」だったのでもっと具体的にすべきかと思い
今HTMLを書いていて（作成中で）、という意味で文頭に「HTMLで」と書いてしまいました。
「WEBページを作成中で」とかの方がいいんですかね。
質問自体初めてなので慣れずすみません。

ただ「counter」は知らなかったので、目からウロコでした。
ありがとうございます。