ページネーション設置

自分用に作ってみたのでメモ

お手本はこんな感じ

・html
設置するページは aタグの代わりに labelタグを置いた

  <div class="linknum_tag">
    <a href="#1">1</a>
    <label>2</label>
    <a href="#3">3</a>
    <a href="#4">4</a>
    <a href="#5">5</a>
    <a href="#2">NEXT</a>
  </div>

・css

.linknum_tag a, .linknum_tag label {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.3em 0.9em;
  margin: 5px;
  text-decoration: none;
  border-left: solid 3px #ffa0c0;
  border-right: solid 3px #ffa0c0;
  color: #ff6080;
  background: #fff8f8;
  transition: .4s;
}
.linknum_tag a:hover, .linknum_tag label {
  background: #d80066;
  color: #fff8f8;
}

label タグの色指定が重複しているけれど 指定場所が少ない方が何かと都合がいいのでとりあえずこれで

・完成

12NEXT

【参考ページ】
CSSのセレクタ一覧
weblan3.com

おしまい