見出しに自動でナンバリングする方法

文章はすべてHTMLで書かなくてはなりませんが。

例えば、以下のような、ご利用規約があった場合、ナンバリングすることで、明確に情報を伝えることが出来るようになります。情報の追加などにより、自動的にナンバリングされるため、修正箇所を最小限に抑えることが出来ます。(ただし、最初の枠組みはHTMLで記載しなくてはなりません)一度記載したものは、例えば、h2タグの著作権の文字などをコピーして張り付けることで、追加などを行うことは可能です。

使用例

ご利用規約

著作権

情報の範囲

文章の内容

当サイトの情報

文章の内容

商標

利用の範囲

文章の内容

免責事項

情報正確性について

文章の内容

記載情報のご利用について

文章の内容

情報の掲載期間

文章の内容

将来の業務情報について

文章の内容

HTML

<div class="numbering">

<h1>ご利用規約</h1>

<h2>著作権</h2>

<h3>情報の範囲</h3>

<p>文章の内容</p>

<h3>当サイトの情報</h3>

<p>文章の内容</p>

<h2>商標</h2>

<h3>利用の範囲</h3>

<p>文章の内容</p>

<h2>免責事項</h2>

<h3>情報正確性について</h3>

<p>文章の内容</p>

<h3>記載情報のご利用について</h3>

<p>文章の内容</p>

<h3>情報の掲載期間</h3>

<p>文章の内容</p>

<h2>将来の業務情報について</h2>

<p>文章の内容</p>

</div>

CSS

<style type="text/css">

    

.numbering h1 {

   counter-reset: section;

}


.numbering h2 {

   counter-reset: subsection;

}

    

.numbering h2::before {

  content: counter(section) ".";

  counter-increment: section;

}


.numbering h3::before {

  content: counter(section) "-" counter(subsection) " ";

  counter-increment: subsection;

}


</style>

情報掲載元:エキップ・ブレロー(HTML要素をナンバリングする)

http://blaireau.hatenablog.jp/entry/2015/02/20/030925

▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422