ページネーション : MT7 Styleguide

ページネーションはリストの下に配置します。
スタイリングはされていませんが、入れ子として nav を記述してください。
aria-label の値には何のページネーションから記述してください。例えば、コンテンンツタイプのページネーションであれば、「コンテンツタイプのリスト」。
ページの現在地を示す場合、class 名 .active を記述します。
現在地を示す数字には <span class="sr-only">(current)</span> を記述します。これは視覚的に隠れる要素ですが、音声読み上げで使用されます。
ページネーションが 7 画面以上になる場合、最初と最後にすぐ戻れるための導線を設けてください。そのとき、class 名.first-last を記述します。
ページネーションで「...」になるアイテムは、aria-hidden="true" を記述して、音声ブラウザで読み上げないようにします。

<nav aria-label="Page Navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item first-last"><a class="page-link" href="#">1</a></li>
    <li class="page-item" aria-hidden="true">...</li>
    <li class="page-item"><a class="page-link" href="#">11</a></li>
    <li class="page-item active"><a class="page-link" href="#">12<span class="sr-only">(current)</span></a></li>
    <li class="page-item"><a class="page-link" href="#">13</a></li>
    <li class="page-item" aria-hidden="true">...</li>
    <li class="page-item first-last"><a class="page-link" href="#">24</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

小さめのページネーションが必要な際は pagination-sm を追加します。

<nav aria-label="Page Navigation">
  <ul class="pagination pagination-sm">
    ...
  </ul>
</nav>

モバイルページネーション

ページネーションにあった「...」は使わない。

可能な限り、5件のページリンクを出すようにする。

ページリンクが 5件表示される場合は <li> に .mr-auto をつけて横幅を 100% にして、マージンを自動調整する。



      <nav aria-label="Page Navigation">
        <ul class="pagination__mobile">
          <li class="page-item">
            <a class="page-link" href="#" aria-hidden="true">
              <svg role="img" class="mt-icon--inverse mt-icon--sm">
                <title>previous</title>
                <use xlink:href="../images/sprite.svg#ic_tri-left"></use>
              </svg>
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">
              10
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">
              11
            </a>
          </li>
          <li class="page-item active">
            <a class="page-link" href="#">
              12
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">
              13
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">
              14
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#" aria-hidden="true">
              <svg role="img" class="mt-icon--inverse mt-icon--sm">
                <title>next</title>
                <use xlink:href="../images/sprite.svg#ic_tri-right"></use>
              </svg>
            </a>
          </li>
        </ul>
      </nav>