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

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



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

「ページ切り替えメニュー2」で作成した項目の部分に、背景画像を設定して少し立体感を出しています。


表示例

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

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

使用している画像

page_gen.gif page_gen.gif

page_act.gif page_act.gif

画像へは直接リンクしないでください。ダウンロードしてから使用してください)

画像の制作について

コード

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: #f9f9f9 url(page_gen.gif) repeat-x top; /* リンクエリアの背景 */
border: 1px #c0c0c0 solid; /* リンクエリアの境界線 */
text-decoration: none; /* テキストの下線(なし) */
}
/* --- ポイント時の設定 --- */
div.paging ul.nl li a:hover {
background: #004080 url(page_act.gif) repeat-x top; /* ポイント時の背景 */
border: 1px #000080 solid; /* ポイント時の境界線 */
text-decoration: underline; /* テキストの下線(あり) */
color: #ffffff; /* ポイント時の文字色 */
}

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

/* --- リンクしない項目(前へ・次へ) --- */
div.paging ul.nl li span {
display: inline-block;
padding: 4px 8px; /* 項目のパディング(上下、左右) */
background: #f9f9f9 url(page_gen.gif) repeat-x top; /* 項目の背景 */
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以下ではアウトラインの表示位置がずれてしまいます(枠にフィットしません)。
    ※ただし、この指定を行なうと別の不具合が発生してしまいます。詳しくは「ページ切り替えメニュー2」の備考欄をご覧ください。
  • inline-block はCSS 2.1で追加された値です(CSS 2では定義されていません)。インライン要素に対するこの指定は多くのブラウザで対応していますが、一部のブラウザ(Firefox 2以下)では未対応となります。

更新履歴

2010/02/09
項目の背景画像(page_gen.gif)を差し替えました。

メニュー

ページの先頭へ