ブログ練習帳

ネガティブマージンでリストをぴったり並べる

ネガティブマージンって、なんかベンリかも。

きれいなソース書くようにしよう、と思いつつも、見た目のためにクラスを使ったり、div足したり、こねくりこねくりしている見習ですが、ネガティブマージン使ってクラスをひとつ割愛です。

今回のお題は、リストで画像を並べるです。

リストをフロートで横並びにして、そのあいだをパディングで調整します。でも、パディングライトでliに右パディングをつけていますが、最後のliのみ、パディングがいりません。そんな場合、最後のliにだけ、クラスをつけて、パディングを取ってました。

☆これが、使用前。

HTML

<p>最後の要素にクラス指定</p>

<div id="wrap1">

<ul>

<li><img src="img/imgSmall01.jpg" width="100" height="76" /></li>

<li><img src="img/imgSmall02.jpg" width="100" height="76" /></li>

<li class="last"><img src="img/imgSmall03.jpg" width="100" height="76" /></li>

</ul>

</div>

---

CSS

#wrap1 {

width:320px;

background-color:#CCFF33;

overflow:hidden;

margin:10px auto;

}

#wrap1 ul{

list-style-type:none;

}

#wrap1 li{

float:left;

padding-right:10px;

}

#wrap1 ul .last {

padding-right:0;

}

リストで並べて、あいだをパディングで調整していますが、最後だけパディングがいらない！
最後のliにのみ、クラスを付けて、指定してます。

☆これが、使用後。

HTML

<p>親要素にネガティブマージン</p>

<div id="wrap2">

<ul>

<li><img src="img/imgSmall01.jpg" width="100" height="76" /></li>

<li><img src="img/imgSmall02.jpg" width="100" height="76" /></li>

<li><img src="img/imgSmall03.jpg" width="100" height="76" /></li>

</ul>

</div>

---

CSS

#wrap2 {
	width:320px;
	background-color:#CCFF33;
	overflow:hidden;
	overflow:hidden;
	margin:10px auto;
}
#wrap2 ul{
	list-style-type:none;
	margin-right:-10px;
}
#wrap2 li{
	float:left;
	padding-right:10px;
}

最後のliには、クラスを付けてません。親要素に、同じ分だけ、ネガティブマージンをつけてあげました。

サンプルはこちら。使用前、使用後のが両方一枚のHTMLになってます。

どうでしょ。どきどき。なんか、HTMLがすこし、キレイになったかしらん。これ以外にも、dl使って並べたりできそうだし。パンくずリストとか、使い道がありそうな予感。

☆閑話休題 ネガティブパディングって、ないのねぇ

まったくの閑話休題。ところで、ネガティブマージンっていうのがあるんだから、きっとネガティブパディングもあるに違いない！と、グーグル先生に「negative padding」と聞いてみました。

でてきたのは、W3CのサイトのCSS2のところ。

この8.4 Padding propertiesのところにありました。Unlike margin properties, values for padding values cannot be negative.マージンプロパティとは違い、パディングは、負の値をとらない。

ありゃりゃー。なんか、ありそう！と思っただけに、ちょっと残念。

2012年6月6日1:02 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)