Flexboxで、レスポンシブ対応のページネーションを作成する

Flexboxを使い、レスポンシブWeb対応のページネーション（Pagination）を作成します。

<< デモを表示 >>
※ PCで閲覧している方はデモを開き、画面幅を変えてみてください。

「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

ソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Flexboxテスト</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>Flexbox レスポンシブPagination</h1>
<ul class="pager">
  <li><a href=""><<</a></li>
  <li><a href=""><</a></li>
  <li><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="active"><a href="">5</a></li>
  <li><a href="">6</a></li>
  <li><a href="">7</a></li>
  <li><a href="">8</a></li>
  <li><a href="">9</a></li>
  <li><a href="">></a></li>
  <li><a href="">>></a></li>
</ul>  
</body>
</html>

css

.pager{
  /* For IE */
  -js-display: flex;
  display: flex;
}
.pager li{
  list-style-type: none;
  flex: 1;
}
.pager li a {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and ( max-width: 630px ) {  

  /* 全てのli要素を消す */
  .pager li {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* 必要なli要素を消す */
  .pager li.active,
  .pager li:first-of-type,
  .pager li:last-of-type,
  .pager li:nth-of-type(2),
  .pager li:nth-last-of-type(2){
    position: static;
    top: initial;
    left: initial;
  }
}

.pager li {

 /* For IE */
 display: flex;
 justify-content: center;
 background-color: #2071B2;
}

.pager a {
  /* For IE */
  flex: 1;
  height:44px;
  text-decoration:none;
  color: #fff;
}

/* Active 以外のhover */
.pager li:not([class*="active"]) a:hover { 
  background-color: rgba(255,255,255,.2);
}

/* Activeのスタイル */
.pager li.active a { 
  background-color: rgba(255,255,255,.65);
  color: #000;
  font-weight: bold;
}

ul {
   -webkit-padding-start: 0px;
}

解説

.pager{
  display: flex;
}
.pager li{
  flex: 1;
}

「.page」に「display : flex」を指定し、<ul class="pager">内の<li>をFlexbox Itemにしています。

Flexbox Itemの<li>は、「flex:1」により、横幅いっぱいまで伸びます。

.pager li a {
  display: flex;
  justify-content: center;
  align-items: center;
}

aタグに対してもFlexboxを指定し、「justify-content: center;」と「align-items: center;」を指定し、a要素を上下中央に配置しています。

@media only screen and ( max-width: 630px ) {  

  /* 全てのli要素を消す */
  .pager li {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* 必要なli要素を表示 */
  .pager li.active,
  .pager li:first-of-type,
  .pager li:last-of-type,
  .pager li:nth-of-type(2),
  .pager li:nth-last-of-type(2){
    position: initial;
    top: initial;
    left: initial;
  }
}

メディアクエリを使い、画面サイズが630px以下の場合に、一旦<li>を消し、その後に必要な<li>要素を表示しています。

「li:nth-of-type(2)」はcss3 のセレクタで、<li>要素の2番目という意味です。

詳しくは解説動画を参照ください。

引用

この記事の一部のソースコードは下記サイトを参照しております。
http://codepen.io/iamjustaman/pen/YPLPNR

Flexboxで、レスポンシブ対応のページネーションを作成する

ソースコード

解説

関連記事

引用