CSSだけでページャーをつくる方法

CSS で一般的なページャーを実装したので書き残しておきます。

＊環境

macOS
CSS3
HTML5

＊実装

HTML で<ul>を使い、そのタグの中に表示したいページの数分の<li>を用意します。今回はページの値をクリックしても遷移はしません。（同じ画面の先頭に遷移します）

<div class="main">
  <div class="pager">
    <ul class="pagination">
      <li>
        <a href="#">
          <div class="pre-arrow"></div>
        </a>
      </li>
      <li>
        <a href="#">
          <span>1</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>2</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>3</span>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="next-arrow"></div>
        </a>
      </li>
    </ul>
  </div>
</div>

CSS でdisplay: inline-block;を使って<li>を横並びにします。前送りと後送りの矢印は、border-top/border-left/border-rightプロパティを使って線を引き、transformプロパティで45度傾けて矢印にしています。

body {
  background: #fff;
  padding: 10px;
  font-family: Helvetica;
}

.pager .pagination {
  
  li {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    position: relative;
    text-align: center;
  }
  
  a {
    text-decoration: none;
    position: absolute;
    color: #808080;
    width: 100%;
    height: 100%;
    transition: all  0.3s ease;
    left: 0;
    
    &:hover {
      color: #fff;
      background: #9D50BB;
    }
  }
}

.pre-arrow {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #808080;
  border-left: solid 2px #808080;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 50%;
  left: 50%;
  margin-top: -4px;
}

.next-arrow {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #808080;
  border-right: solid 2px #808080;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 50%;
  margin-top: -4px;
}

＊所感

この記事ではレスポンシブ対応はしませんが、画面幅が狭くなった場合はページの値を少なくする必要がありそうです。今回は一般的なデザインのページャーを実装しましたが、おしゃれなデザインも色々あるので試してみたいと思います。

もぐもぐプログラミング

CSSだけでページャーをつくる方法

＊環境

＊実装

＊所感

人気の投稿