CSS3

ひとつ前の記事中に使った画像のサイズを勘違いして作成してしまい、テーマによっては段落ちが発生してた。

それがどんな勘違いだったかというとそりゃもう酷い話で、
まず、本文のwidthが480pxの所へ画像を2枚横並びで入れようとした。
その時画像のmarginを10pxとして考えて、横幅235pxでサムネイルを作った(235px*2(画像2枚)+10px(margin)=480px)。

けれども実際は両方の画像に右marginがつく為、本当のところmarginは2倍。
さらに画像には1pxのborderがついてたので1画像につき+2px、合わせて4px。
もう全然無理。

そこでサムネイルを小さく作り直せばいいのに、先日のie-css3.jsを思い出してE:nth-last-child(n)を使って2個目(最後)の画像のmarginを消してしまおう!となんか良い事を閃いた気になる。

そしてE:nth-last-child(n)とE:nth-last-of-type(n)の練習をしてから、いざ乱雑モックアップのcssをよく見てみると画像周りのmarginは10pxじゃなくて1emだった。

6pxしか余裕がないところに1emもmarginがあったら右側のmarginを削除しても段落ちするし、marginを5pxくらいにすると狭すぎるしで、結局今回はサムネイルのサイズを変更するのが一番簡単な修正方法でした。

前置きが長くなったけど、:nth-last-child(n)や:nth-last-of-type(n)の均等配置

乱雑モックアップ｜nth-last-childなどで均等配置テスト
html
[html]<h1>E:nth-last-child(n)</h1>
<div id="content" class="lastchild">
<div class="main">メイン画像</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
</div>[/html]
css
[css]body {
font-size:80%;
}

p {
padding:10px;
margin:0;
}

#content {
width:380px;
padding:10px 10px 0 10px;
border:1px solid SteelBlue;
}

.main {
width:380px;
text-align:center;
line-height:234px;
color:black;
background:LightSkyBlue;
margin-bottom:10px;
height:234px;
}

.sub {
width:120px;
margin:0 10px 10px 0;
background:aliceBlue;
float:left;
}

#content:after{
content:"";
display:block;
clear:both;
}

/* ここでmargin0 */
.lastchild .sub:nth-last-child(1){
margin-right:0;
}
[/css]

以前書いたこれ -> 横並びにしたリストを（手動だけど）簡単に均等配置ぽく見せるは、marginを左にとる必要があって今回はダメで。
marginを右にとる方法を使うにしても今回は親要素が一個たりないからダメなはず(たぶん)。

こちらもあーだこーだやってます-> E:nth-last-child(n)とE:nth-last-of-type(n)で均等配置

それにしてもこんな使い方よりもっと別な何かで協力に威力を発揮するんじゃないだろうかって思うんだけどその何かが思いつかない。勿体無い。

続きを読む