ページネーションを作成したい

サイト内の複数の検索結果を表示するページなどで、次のページへ行ったり前のページ戻ったりするUIをページネーションと言います。ページネーションの各ボタンは序列がはっきりしているため、箇条書きには<ul>ではなく<ol>を使用したほうがよいでしょう。

サンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8">
    <style>
     .pagenation{
      overflow: hidden;
      list-style: none;
      margin:0 ;
      padding: 0;
     }
     .pagenation li{
      float:left;
      border-top:1px solid #9b9b9b;
      border-bottom:1px solid #9b9b9b;
      border-left:1px solid #9b9b9b;
      background: #e0e0e0;
     }
     .pagenation li:first-child{
      border-radius: 10px 0 0 10px;
     }

     .pagenation li:last-child{
      border-radius: 0 10px 10px 0;
     }

     .pagenation li:hover{
      background:#d1d1d1;
     }
      
     .pagenation li a{
      display: block;
      padding: 5px 20px;
      text-decoration:none;
      color: #3e5358;
     }

     .pagenation li.current{
      background: #f6d7b6;
     }
    </style>
  </head> 
  <body>
      <ol class="pagenation">
          <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><a href="#">5</a></li>
          <li><a href="#">></a></li>
      </ol>
   </body>
</html>

実行結果

カテゴリー:WEB