yoshiislandblog.net
駆け出しアラサーSEが、休日にMACと戯れた際の殴り書きメモ。日々勉強。日々進歩。

Categories

自作ツールなど

2000年からの脱出

WordPress Blog(QooQ)に使っているCSSたち(2)〜目次(li)〜

2021-01-11

WordPress Blog(QooQ)に使っているCSSたち(1)〜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">見出し1</a></li>
  <li><a href="#midashi2">見出し2</a></li>
</ol>

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

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

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

  1. 見出し1
  2. 見出し2

見出し1

ほげほげ

見出し2

ほげほげ


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

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


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