Webテンプレート/リスト・メニュー/ページ切り替えメニュー

ページ切り替えで使用することを想定した横型のメニューです。

display: inline を指定して、li要素を横に並べています。
項目の間隔を変更したい場合は、項目の右マージンを変更してください。

項目の設定について

要素の種類によって、リンクする項目とリンクしない項目、アクティブな項目、この3つを切り替えています。
a要素 … リンクする項目
span要素 … リンクしない項目
strong要素 … アクティブな項目

コード

CSSコード

/* --- ページングエリア --- */
.paging {
margin: 20px 0;
}

/* --- メニューエリア --- */
.paging .nl {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center; /* メニューのセンタリング */
font-size: 100%; /* メニューの文字サイズ */
}
/* --- メニュー項目 --- */
.paging .nl li {
display: inline;
margin-right: 5px; /* 項目の右マージン */
}

/* --- アクティブな項目 --- */
.paging .nl li strong {
color: #cc0000; /* 項目の文字色 */
}

/* --- リンクしない項目（前へ・次へ） --- */
.paging .nl li span {
color: #808080; /* 項目の文字色 */
}

HTMLコード

<div class="paging">

<ul class="nl">
<li><span>前へ</span></li>
<li><strong>1</strong></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="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">次へ</a></li>
</ul>

</div>


<div class="paging">

<ul class="nl">
<li><a href="#">前へ</a></li>
<li><a href="#">1</a></li>
<li><strong>2</strong></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><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="#">10</a></li>
<li><a href="#">次へ</a></li>
</ul>

</div>