[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー

XHTML のサンプルは以下です。とてもシンプルです。

<ul class="pager">
<li class="prev"><a href="hoge">&laquo; PREV</a></li>
<li><a href="hoge">1</a></li>
<li><em>2</em></li>
<li><a href="hoge">3</a></li>
<li><a href="hoge">4</a></li>
<li><a href="hoge">5</a></li>
<li class="next"><a href="hoge">NEXT &raquo;</a></li>
</ul>

サンプル1： とてもシンプルなページャー

とてもシンプルなページャーのサンプルです。

• « PREV
• 1
• 2
• 3
• 4
• 5
• NEXT »

CSS はこちら

* {
      margin: 0;
      padding: 0;
      font-style: normal;
      list-style: none;
}
body {
      font: 70% Arial, Helvetica, sans-serif;
}
ul.pager {
      margin: 10px;
}
ul.pager li {
      float: left;
      margin-right: 10px;
      padding-right: 10px;
      border-right: 1px #999999 solid;
}
ul.pager li.next {
      border-right: none;
}
ul.pager li a:link,
ul.pager li a:visited {
      color: #3366FF;
      text-decoration: none;
}
ul.pager li a:hover,
ul.pager li a:active {
      color: #FF6633;
      text-decoration: none;
}
ul.pager li em {
      font-weight: bold;
}

サンプル2： 枠付きのページャー

枠をつけて少し目立たせたページャーです。

• « PREV
• 1
• 2
• 3
• 4
• 5
• NEXT »

CSS はこちら

* {
      margin: 0;
      padding: 0;
      font-style: normal;
      list-style: none;
}
body {
      font: 70% Arial, Helvetica, sans-serif;
}
ul.pager {
      margin: 10px;
}
ul.pager li {
      float: left;
      margin-right: 5px;
      border: 1px #3366FF solid;
      font-weight: bold;
}
ul.pager li.prev,
ul.pager li.next {
      border: none;
}
ul.pager li a {
      position: relative;
      display: block;
      padding: 3px 8px;
      color: #3366FF;
}
ul.pager li a:link,
ul.pager li a:visited {
      text-decoration: none;
}
ul.pager li a:hover,
ul.pager li a:active {
      background-color: #AADDFF;
      text-decoration: none;
}
ul.pager li em {
      display: block;
      padding: 3px 8px;
      background: #3366FF;
      color: #FFFFFF;
}

サンプル3： 背景画像を使ったちょっとリッチなページャー

↑こんな感じの画像を背景画像として使用します。

• « PREV
• 1
• 2
• 3
• 4
• 5
• NEXT »

CSS はこちら

* {
      margin: 0;
      padding: 0;
      font-style: normal;
      list-style: none;
}
body {
      font: 70% Arial, Helvetica, sans-serif;
}
ul.pager {
      margin: 10px;
}
ul.pager li {
      float: left;
      margin-right: 5px;
      font-weight: bold;
}
ul.pager li a {
      position: relative;
      display: block;
      padding: 3px 8px;
      background-image: url(hoge.gif);
}
ul.pager li a:link,
ul.pager li a:visited {
      border: 1px #3366FF solid;
      background-position: 0 0;
      color: #0033FF;
      text-decoration: none;
}
ul.pager li a:hover,
ul.pager li a:active {
      border: 1px #FF6633 solid;
      background-position: 100% 0;
      color: #FF3300;
      text-decoration: none;
}
ul.pager li em {
      display: block;
      padding: 3px 8px;
      border: 1px #666666 solid;
      background: #666666;
      color: #FFFFFF;
}

とりあえず簡単に組めるパターンをご紹介しました。上記を応用すれば、もっと凝ったデザインにすることもできます。

次回は「CSS を使った見栄えの良いテーブル パート2」です。