WEB ページ作成基準見出し

HTML 文書の見出しの書き方を示します．

見出しとは

文章は階層化すれば，分かりやすくなります．そのひとつに見出しがあります．文章よりもはるかに短い見出しを見ただけで，大体の文脈が分かります．WEB ページでも同じです．分かりやすいページにするためには，佳い乱しを付けます．

WEBページの本文の見出しは，<h2>—<h4>を使います．<h1>はページタイトルに使っています．また，<h5>以上は階層が深くなりすぎるので，使わないようにしています．どうしても<h5>が必要なときは，できるだけ短いタイトルにします．

h1 (ページタイトル)

<h1>はページのタイトルに使います．パンくずリストの後，目次の前に記載します．具体的には，以下のとおりです．

<h1 class="title"><span class="category">カテゴリー</span>タイトル</h1>
<p class="about">説明を書きます．</p>

この中で，「<span class="category">カテゴリー</span>」の記述は必須ではありません．

h2 — h5 (セクション)

本文

<h2>と<h3>のクラスは，「body」とします．このクラスを指定することにより，セクション番号が自動的に割り振られます．このページのルール通りにすれば，目次でのセクション名の先頭につく番号と同一になります．セクション番号が不要な場合，「<h2 class="body nonumber">」とします．

セクションの ID 名も英数字の大文字で書きます(筆者のルール)．W3Cのルールだと，ID名はアルファベット([A-Za-z]) で始まり，任意の数の文字が続きます．使える文字は，アルファベットに加え数字 ([0-9])，ハイフン ("-")，アンダースコア ("_")，コロン(":")，ピリオド (".")です．

<h4>以上にはセクション番号は付きません．そのため，id を付ける必要はありません．その一方で，幅の指定が必要です．

具体的には，見出しは次のように記述します．

見出しの書き方

<!-- %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% -->
<h2 class="body" id="セクションのID">セクションのタイトル</h2>
<!-- %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% -->


<!-- ========================================================== -->
<h3 class="body" id="サブセクションのID">サブセクションのタイトル</h3>
<!-- ========================================================== -->


<!-- =============================== -->
<h4 style="width:幅(整数)px">サブサブセクションのタイトル</h4>
<!-- =============================== -->

<!-- =========== -->
<h5 style="width:幅(整数)px">サブサブサブセクションのタイトル</h5>
<!-- =========== -->

ソースコードを分かりやすくするために，セクションに応じてコメントタグで挟みます．HTML4.0のコメント内では，連続する「-」は避けるべきです．

付録

「<h2 class="body_appendix">」と「<h3 class="body_appendix">」を使うと付録になります．

枠付きタイトル

簡単な枠付きのタイトルを使う場合には，以下のようにします．「注意」として，その後にリストで表示すると分かり易いです．

<div class="box_title"><span>タイトル</span></div>

具体例を以下に示します．

ボックスタイトルの例

<div class="box_title"><span style="padding:5px">ボックスタイトルの例</span></div>

この HTML 文をブラウザで表示すると，以下のようになります．

ボックスタイトルの例

ページ作成情報

参考資料

更新履歴

2020年08月08日

ページを分割し，新規ページに変更．