ネガティブマージンでパンくずリストを組む

2010年11月12日

ネガティブマージンを使うと、余計な要素を押し出して消すと言うことが可能になります。今回はそれを使い、パンくずリストを作る方法です。

まず、サンプルとして、以下のようなパンくずリストのコードがあるとします。カテゴリ同士をつなぐ「>」の記号は、背景画像で表すとします。

HTML

1<ul class="sampleList">
2    <li><a href="/">ホーム</a></li>
3    <li><a href="/cat01/">カテゴリ1</a></li>
4    <li><a href="/cat01/page01.html">ページ1</a></li>
5</ul>

CSS

1.sampleList {
2    list-style: none;
3}
4.sampleList li {
5    float: left;
6    padding: 0 10px 0 15px;
7    background: url(./bg.gif) no-repeat center left;
8}

サンプルページ

このままですと、ホームの左の余白と背景画像が邪魔となってしまいます。そこで、ネガティブマージンとoverflowを使い、余計な部分を消します。

HTML

1<div class="sampleBox">
2    <ul>
3        <li><a href="/">ホーム</a></li>
4        <li><a href="/cat01/">カテゴリ1</a></li>
5        <li><a href="/cat01/page01.html">ページ1</a></li>
6    </ul>
7</div>

CSS

01.sampleBox {
02    overflow: hidden;
03}
04.sampleBox ul {
05    list-style: none;
06    margin: 0 0 0 -20px;
07}
08.sampleBox li {
09    float: left;
10    padding: 0 10px 0 20px;
11    background: url(./bg.gif) no-repeat center left;
12}

サンプルページ

ポイントとしては、左に設定したpaddingの値と同じ値のネガティブマージンを設定することです。そのようにすることで、「ホーム」の左側の余白を詰めることができます。

ネガティブマージンを指定することで、ホームの左の余白を詰め、overflowにhiddenを指定することで、押し出された部分の背景を隠すことが出来ます。こうすることで、li要素にクラスをつけることなく、パンくずリストを整形することが出来ます。