1. Home
  2. Webテンプレート
  3. メニュー
  4. ページ切り替えメニュー

ページ切り替えメニュー



ページ切り替えメニューを作成するサンプルコードです。


表示例

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

  • display: inline を指定して、li要素を横に並べています。
  • 項目の間隔を変更したい場合は、「項目の右マージン」を変更してください。
項目の設定について
  • 項目内に配置する要素の種類によって、リンクする項目、リンクしない項目、アクティブな項目、この3つを切り替えています。
  • a要素 … リンクする項目
  • span要素 … リンクしない項目
  • strong要素 … アクティブな項目

コード

CSSコード


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

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

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

/* --- リンクしない項目(前へ・次へ) --- */
div.paging ul.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>


メニュー

ページの先頭へ