HTML講座

章立て

htmlで章・節の構造を作る。

htmlソース


<article>
  <section class="chapter">
    <h2>はじめに</h2>
    <section class="section">
      <h3>論文の目的</h3>
    </section>
    <section class="section">
      <h3>問題の背景</h3>
    </section>
  </section>
  <section class="chapter">
    <h2>本論</h2>
    <section class="section">
      <h3>論証</h3>
    </section>
    <section class="section">
      <h3>結果・考察</h3>
    </section>
  </section>
</article>

はじめに

論文の目的

問題の背景

本論

論証

結果・考察

章・節タイトル

連番はスタイルシートの「counter」を用いる。

counterの初期化

article{
    counter-reset:chapter_no -1;
}

section.chapter{
    counter-reset:section_no 0;
}

counterを最初に表示したい1つ前の値に設定する。

counterのカウントアップ

h2{
    counter-increment:chapter_no;
}

h3{
    counter-increment:section_no;
}

章タイトル、節タイトルが来るとカウントアップする。

counterの表示

h2::before{
     content:counter(chapter_no) ".　"; 
}

h3::before{
     content:counter(chapter_no) "." counter(section_no) ".　";
}

章タイトル、節タイトルの冒頭にcounterの値を表示する。