低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

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

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

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

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要素にクラスをつけることなく、パンくずリストを整形することが出来ます。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ