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

ページ切り替えメニュー2



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

境界線や背景色を設定したタイプとなります。


表示例

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

  • display: inline を指定して、li要素を横に並べています。
  • メニュー項目をポイントすると、その項目の背景色や境界線が切り替わります。
  • 項目の幅は、文字サイズに応じて変化します。
  • 項目の間隔を変更したい場合は、「項目の右マージン」を変更してください。
  • 「 < 」と「 > 」記号は、文字実体参照で「 &lt; 」「 &gt; 」と記述しています。
項目の設定について
  • 項目内に配置する要素の種類によって、リンクする項目、リンクしない項目、アクティブな項目、この3つを切り替えています。
  • a要素 … リンクする項目
  • span要素 … リンクしない項目
  • strong要素 … アクティブな項目

コード

CSSコード


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

/* --- メニューエリア --- */
div.paging ul.nl {
margin: 0;
padding: 4px 0; /* メニューのパディング(上下、左右) */
list-style-type: none;
text-align: center; /* メニューのセンタリング */
font-size: 80%; /* メニューの文字サイズ */
}
/* --- メニュー項目 --- */
div.paging ul.nl li {
display: inline;
margin-right: -1px; /* 項目の右マージン */
}

/* --- リンク --- */
div.paging ul.nl li a {
display: inline-block;
padding: 4px 8px; /* リンクエリアのパディング(上下、左右) */
background-color: #ffffff; /* リンクエリアの背景色 */
border: 1px #c0c0c0 solid; /* リンクエリアの境界線 */
text-decoration: none; /* テキストの下線(なし) */
}
/* --- ポイント時の設定 --- */
div.paging ul.nl li a:hover {
background-color: #e0e0e0; /* ポイント時の背景色 */
border: 1px #999999 solid; /* ポイント時の境界線 */
text-decoration: underline; /* テキストの下線(あり) */
}

/* --- アクティブな項目 --- */
div.paging ul.nl li strong {
display: inline-block;
padding: 4px 8px; /* 項目のパディング(上下、左右) */
background-color: #e0e0e0; /* 項目の背景色 */
border: 1px #c0c0c0 solid; /* 項目の境界線 */
color: #cc0000; /* 項目の文字色 */
}

/* --- リンクしない項目(前へ・次へ) --- */
div.paging ul.nl li span {
display: inline-block;
padding: 4px 8px; /* 項目のパディング(上下、左右) */
background-color: #ffffff; /* 項目の背景色 */
border: 1px #c0c0c0 solid; /* 項目の境界線 */
color: #808080; /* 項目の文字色 */
}

HTMLコード


<div class="paging">

<ul class="nl">
<li><span>&lt; 前へ</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="#">次へ &gt;</a></li>
</ul>

</div>


<div class="paging">

<ul class="nl">
<li><a href="#">&lt; 前へ</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="#">次へ &gt;</a></li>
</ul>

</div>

備考

  • display: inline を指定して横並びを設定した場合、項目間に余計なスペースが入ってしまいます。そのスペースを小さくするために、「項目の右マージン」にマイナス値を指定しています。
  • メニューが折り返されると、ブラウザによっては項目の一部が重なってしまいます。
  • リンクの選択時に表示される点線(アウトライン)を整えるため、各項目内の要素に display: inline-block を指定しています。この指定がない場合、IE 7以下ではアウトラインの表示位置がずれてしまいます(枠にフィットしません)。
    ※ただし、この指定を行なうと以下(「ご注意」)のような不具合が発生してしまいます。
  • inline-block はCSS 2.1で追加された値です(CSS 2では定義されていません)。インライン要素に対するこの指定は多くのブラウザで対応していますが、一部のブラウザ(Firefox 2以下)では未対応となります。
ご注意

このサンプルでは、ブラウザにより以下のような違いが出てしまいます。

ul要素の境界線を表示した例(スクリーンショット)
表示の違い

Firefox 2に合わせて設定すると、IEではul要素内の上下に4px程度の余白が入ってしまいます。そのため、このメニューは上記の違いが目立たない場所で使用するようにしてください。

※Firefox 3ではIEと同様の結果になることを確認しました。


ページの先頭へ