WordPress Blog（QooQ）に使っているCSSたち（２）〜目次（li）〜

「WordPress Blog（QooQ）に使っているCSSたち（１）〜CSS追加方法と全体像〜」の続き

目次（li）

目次の部分について

CSSは以下の通り

/*目次*/
.toc {
  border: solid 2px #009688;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  margin-top: 2em;
}
.toc li {
  line-height: 1.5;
  padding: 0.5em 0;
}
.toc li:after {
  /*タブ*/
  background: #009688;
  color: #fff;
  font-family:'Avenir','Arial',sans-serif;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: '目次';
  letter-spacing: 0.05em;
}

HTML例は以下の通り

<ol class="toc">
  <li><a href="#midashi1">見出し１</a></li>
  <li><a href="#midashi2">見出し２</a></li>
</ol>

<h1><p id="midashi1">見出し１</p></h1>
ほげほげ

<h1><p id="midashi2">見出し２</p></h1>
ほげほげ

表示すると以下のようになる

1. 見出し１
2. 見出し２

見出し１

ほげほげ

見出し２

ほげほげ

「.toc」はクラス名
Table of Contentsを略してtocとしているが、名前はなんでもOK

HTMLで記載する時に「class=”toc”」を記載することで呼び出すことができる

参考：コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに