スポンサーリンク

HTMLの見出しに1.1.等の連番を付けるCSS

<h1><h2>の見出しに、1.  や1.1.  といった見出し番号を付ける。

概要

counter-reset で見出しの番号を初期化する

counter-increment で見出しの番号を進める

content , counter で見出しの表示方法を指定する

見出し連番の例

HTML

<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>東京都</h1>
    <h2>港区</h2>
      <h3>浜松町</h3>
      <h3>芝浦</h3>
      <h3>六本木</h3>
    <h2>中央区</h2>
      <h3>月島</h3>
      <h3>日本橋</h3>
    <h2>北区</h2>
      <h3>浮間</h3>
      <h3>東十条</h3>
  <h1>北海道</h1>
    <h2>札幌市</h2>
    <h2>赤平市</h2>
    <h2>沙流郡</h2>
  <h1>京都府</h1>
    <h2>木津川市</h2>
      <h3>市坂</h3>
      <h3>加茂町</h3>
      <h3>吐師</h3>
    <h2>福知山市</h2>
    <h2>竹野郡</h2>
      <h3>網野町</h3>
      <h3>丹後町</h3>
      <h3>弥栄町</h3>

</body>

</html>

CSS (style.css)

body {

  /* H1のカウンタをリセット */
  counter-reset: counter_H1;
}

/********************************/
h1::before {

  /* H1の表示方式の設定 */
  content: counter(counter_H1) " ";

  /* H1のカウンタを進める */
  counter-increment: counter_H1;
}

h1{
  /* H2のカウンタをリセット */
  /* H1 が出てきたときは、H2は1から始まるのでリセットする*/
  counter-reset: counter_H2;

  /* 表示用 */
  color:red;
  padding-left:0px;
}

/********************************/

h2::before{
  /* H2の表示方式の設定 */
  content: counter(counter_H1) "-" counter(counter_H2) " ";

  /* H2のカウンタを進める */
  counter-increment: counter_H2;
}
h2{
  /* H3のカウンタをリセット */
/* H2が出てきたときは、H3は1から始まるのでリセットする*/
counter-reset: counter_H3; /* 表示用 */ color:green; padding-left:30px; } /********************************/ h3::before{ /* H3 の表示方式の設定 */ content: counter(counter_H1) "-" counter(counter_H2) "-" counter(counter_H3) " "; /* H3のカウンタを進める */ counter-increment: counter_H3; } h3{ /* 表示用 */ color:blue; padding-left:60px; }

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


この記事のトラックバックURL: