CSSテクニック

―(マイナス)マージンで重ねあわせる

今回のテクニックはマージンを使って重ね合わせてみます。 テーブルデザインだと、とんでもなく面倒なことも、スタイルシートなら割と簡単です!

テクニック使用前

見出しです

本文です。これでも特に問題は無いのですが、もうちょっと手を加えてみましょう!

テクニック使用後

見出しです

見出しを上にずらして、重ねてみました。テーブルで組むのは至難の技だけど、CSSなら簡単!

テクニック使用後のソースは次のようになります。

div.sample1{
    border:solid 2px #663300;
    width:200px;
    background-color:#FFFFFF;
    position:relative;
}
h6.sample1{
    border:solid 2px #663300;
    width:120px;
    text-align:center;
    font-size:medium;
    background-color:#CC996F;
    margin:0px;
    margin-top:-10px;
    position:relative;
}
p.sample1{
    padding:0px 1em;
    text-align:left;
}

HTML
<div class="sample1">
<h6 class="sample1">見出しです</h6>
<p class="sample1">
本文です。これでも特に問題は無いのですが、もうちょっと手を加えてみましょう!
</p>
</div>

注目して欲しいのは赤字の部分です。
position:relative;を忘れるとIE6では上手く表示されないので、必ずつけてください。
margin:0px;はブラウザーによる崩れを防ぐために必要です。
margin-topの値はお好みでどうぞ。

なぜtopを使わないのか?

position:relative;を設定しているので、margin-topのかわりにtopを使っても同じ結果が得られそうですが、 上手くいきません。次のサンプルはmargin-top:-10px;のかわりにtop:-10px;をしたものです。

見出しです

top:-10px;だと余白の大きさが変わってしまいます。

marginのときとは下に来る要素の位置の計算方法が違うため、表示が意図した通りにはなりません。 できないことはないですが、めんどくさいです。


使いこなすための+α

上にずらす場合はmarginでしたが、横にずらす場合はどうしましょう?

marginで横にずらした場合

見出しです

サンプルにmargin-left:-20px;を追加してみました。

leftで横にずらした場合

見出しです

サンプルにleft:-20px;を追加してみました。

私が確認した限りでは、どちらでも問題はないようです。
一括指定ができることを考えると、marginの方がいいと思います。
もし、上手くいかないなどの問題があれば報告お願いします。


一覧へ戻る


Last Modified 2004-12-11 © きくちゃん 2004 - All Rights Reserved