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

公開日:2021-01-11 更新日:2021-01-12

HTML/CSS QooQ WordPress

t f B! P L

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で箇条書きをおしゃれに

About me

ゆかき(♀)

アラサー駆け出しインフラエンジニア
ど文系営業からSEへ転身し日々奮闘している人

一児の母

#AP応用情報 #HTML5Lv1 #第2種電気工事士 #DCP(Data Center Practitioner) #LPIC Lv2 #VCP6.5 #CCNP #Oracle Bronze #HTMLv5 #TOEIC860

Media

こちらのイベントで記事紹介いただいていた、嬉しい。

Line stamp

僭越ながら販売中

Green cat & Orange cat

Amazon