ちょこっとだけ効率が良くなるかも知れないこと

2007年11月30日（金）
チョット便利なメモ

404 が表示された時って皆はどんな気分になるんだろう...

さて、一行駄文はおしまい。
本題です。

同じデザインを組むにも、人が違えばそれだけ組み方も様々だとは思うのですが、こうした方がちょこっとだけ効率が良くなるかもね！っていう事をちょこっと書いてみるだす。

とりあえずこんな感じのサイトがあったとして、どう組むかっていう辺りが今回の主題なんです。はい。

あ、サンプルページを別ウィンドウで表示しながらお読みいただくとスムーズに事が運ぶ予感です。
では、詳細に。

メイン部分の「見出しっぽいの」辺り

このサイトの見出しもそうなんですが、見出し以外は10px程度のpaddingが指定されていて、見出しはぴったりくっついているような場合って有るかと。

この場合の一つの組み方として、

<div id="main">
<h2>見出しっぽいの</h2>
<div class="text">
<p>テキスト</p>
</div>
</div>

こんな感じで、見出しの後にdiv要素使ってインデントすると、都度div要素使わなきゃいけなかったりで中々いけてないんですよね。
理想としては当然、div要素が無い方が良いから、こんなデザインを避け気味だったり（するかもしれない）。

div要素不要ならこんな感じですっきりです。

<div id="main">
<h2>見出しっぽいの</h2>
<p>テキスト</p>
</div>

んで、まぁそういう場合は、単純にぴったりくっつけたい見出しにネガティブマージンを指定すれば見出しの後にわざわざdiv要素を追加する必要は無いってな訳です。

#main h2 {
	margin: 20px -10px 10px;
	padding: 5px 10px;
	background: #CCC;
	font-size: 1.1em;
}

別の方法として、インデントしたい要素全てにmarginの指定をしてあげるってのも有りだと思いますが、抜けがあったりすると追加の手間がありますし、たくさん書くのは面倒なので効率的にはあんまり良さげではないかもです。

#main p,
#main ul,
#main ol,
#main dl {
	margin: 0 10px 1em;
}

ネガティブマージンのちょこっとした使い方の一例ということで。
では次。

メイン部分のボックスの余白

ボックスが何個も並ぶような場合、下に余白を指定することが多いかも知れません。margin-bottom: 10px; とかって。
でもコレだと、一番最後のボックスの下にも当然余白が出来てしまう訳です。
本来は10pxの余白が確保したいのに20px開いてしまったり。

んで、最後のボックスにだけclassを追加してmargin-bottom: 0;とかってしてキレイに揃えたりする事も出来るのですが、コレだと後から別の人が追加したりした場合に最後のボックスにだけ付くはずのclassが付いたままになってしまう可能性も出てくるので、オススメとしては上に余白を確保するのが良いです。

確立の問題ですが、下の内容より上の内容が消される可能性が低いと思います。
新しい内容は上に追加されるんだよ！って場合は当然下に余白のがいいです。

運用・更新を考慮した場合の一例っていうことで。
では次。

サイドメニューの破線な部分

コレもborderをbottomで引くか、topで引くかっていうトコロなんですけど、bottomで引くと真ん中の「ダメな感じなの」みたいに、最後のリストの破線と黒の実線が重なってしまいいけてない状態になってしまいます。

そんな場合に、最後のリストにだけclassを追加とかはメンテナンス性やら更新性がイケテナイので、borderはtopで引いて、親要素のulとかをmargin-top: -1px;ってな感じで上の（サンプルだと「デジパ運営サイト」部分）に重ねてしまえば見えなくなるっていうスンポーです。

そうすれば後から追加しても「ダメな感じなの」みたいにならずにすみます。

コレはborderと背景色が同じなんでうまく隠れてますが、重なった場合子要素のが上になるので、そう都合よくいかないって場合は、「デジパ運営サイト」部分（dt要素）に、position: relative;とさりげなく書くことで上に表示されます。

他の方法として、IE6無視できれば、
ul li + li って感じで隣接セレクタ使って1行目の指定と2行目以降の指定で変えて上げるのがスマートかと。

余白と似たような内容ですが、まぁコレも更新とか追加を考慮した場合の一例っていうことで。
では次。

フッター部分

よく見かけるフッター部分のリスト。
この区切りをborderやらbackgroundやらで指定した場合、IE6を対象に考えると、li要素の最初か最後に何らかのclassをつける必要があるわけですが、どちらかにclassを追加する場合は最初li要素に指定するのが良さげです。

他と同じ考えですが、「トップページ」っていうリンクが消される可能性はほぼ0なんで、最初をオススメするです。

という感じです。
下とか後ろに指定する傾向が有るかなーと思ったので、逆で指定したほうが良い場合が多いよ。っていう事が伝えたかったとかって噂です。

何かビミョーすぎる内容になってしまった。。。