tips

カテゴリー内の記事一覧を吐き出すように改造

投稿が増えれば増えるほど、どんな内容のPOSTがあるんだかよくわからなくなって不便になるだろうなーって思いながらも、どうせ簡単にできるんだろうから後でいいやと放ったらかしだったカテゴリー内の記事リスト一覧表示画面。

わかりづらくなってきたなーと感じたのでいざ改造してみようとしたら、これが結構思い通りにいかなかったというお話。

続きを読む

横並びにしたリストを(手動だけど)簡単に均等配置ぽく見せる

これ、何故にいままで全く思いつかなかったのかが不思議でならない。

たとえば以下のような配置をしたくなる時があります

20090718_1

上記画像は、横幅380pxの親ブロックの中に、横幅120pxのサムネイル画像を均等配置で3個入れてあります。
のでサムネイル毎の間隔は10pxかな。

そしてそれをコーディングする時、いままではこんな感じで書いてたとします
html部分

[html]
<dl>
<dt><img src="メイン画像までのパス" alt="メイン画像" /></dt>
<dd>
<ul>
<li><img src="サムネイルまでのパス" alt="サムネイル" /></li>
<li><img src="サムネイルまでのパス" alt="サムネイル" /></li>
<li class="last"><img src="サムネイルまでのパス" alt="サムネイル" /></li>
</ul>
</dd>
</dl>
[/html]

css部分(余計な指定はすでにリセットしてあるとして)

[css]
dl{
width:380px;
}
dt{
margin-bottom:10px;
}
li{
float:left;
display:inline;
margin-right:10px;
}
li.last{
margin-right:0;
}
[/css]

こんな感じで、liの最後に適当なclassをつけてmarginをリセットしてたんですよ。
これだと余計なclassをhtmlに書かなきゃならなくて、美しくないし面倒だなぁと思いながらも。

しかしさっきおや?と思ったわけです
右にmarginをとっていたけど、これ左にしたらどうだろう?と発想を変えてcssを

[css]
ul{
margin-left:-10px;
}
li{
float:left;
display:inline;
margin-left:10px;
}
[/css]

こうしてみたら
.lastが必要なくなったアアアア

って話。