: サイト構築 -CSS

[CSS]ネガティブマージンの理解を深め、活用するテクニック集

スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。

The Definitive Guide to Using Negative Margins

1. ネガティブマージンの理解
2. ネガティブマージンの使い方
3. ネガティブマージンのテクニック集
4. ネガティブマージンのバグフィックス
5. 終わりに

1. ネガティブマージンの理解

スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。

ネガティブマージンをは、例えばこういうのです。

#content {margin-left:-100px;}

ネガティブマージンで意識しておくポイントがいくつかあります。

vaildなCSSです。

W3Cにも「マージンのプロパティにネガティブな値が許される」とあります。
Hackではありません。

ネガティブマージンを適切に使用してください。エラーを直すために使用するのはただのHackです。
成り行きで表示されます。

ネガティブマージンをfloatを使用しないエレメント群に適応した際、配置した順番で表示されます。
互換性があります。

ネガティブマージンはすべてのモダンブラウザ（IE6以降）で完全にサポートされています。
floatでの使用には注意してください。

ネガティブマージンは多用するものではありません。注意深く使用します。
Dreamweaverは理解しません。

ネガティブマージンはDwのデザインビューで反映されません。

2. ネガティブマージンの使い方

正しく使用すると、ネガティブマージンは非常に強力なテクニックになるでしょう。

スタティックなエレメントでのネガティブマージン

ここでいうスタティックとはfloatがないという意味です。そのスタティックなエレメントがどのようにネガティブマージンに反応するか例示します。

スタティックな要素のtop/leftにネガティブマージンを指定した際は、その指定した方向にエレメントを引っ張ります。
しかし、bottom/rightにネガティブマージンを指定した際は、下/右にエレメントを動かしません。その代わり、それに重なったエレメントを引っ張ります。
さらに、エレメントにwidthを指定していなければ、left/rightにネガティブマージンを指定し、両側のエレメントを引っ張ることができます。
マージンがpaddinのように振る舞うのはここがポイントです。

floatしたエレメントでのネガティブマージン

下記のような2つのdiv要素をfloatした場合を例にします。

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

ネガティブマージンをfloat（#mydiv1{float:left;}）とは逆方向に「margin-right:-100px;」と指定した際は、divは重なります。
この手法は100%の幅を使ったリキッドレイアウトに、固定幅のものを配置するのに役立つテクニックです。
divが二つとも「float:left;」で、逆方向に「margin-right:-20px;」とネガティブマージンを指定した際は、実際の幅より小さく（重なって）表示されます。
ネガティブマージンが実際の幅と同じ場合は、それは完全に重なります。これはmargin, padding, borderとwidthが要素の全体の幅になるためです。

3. ネガティブマージンのテクニック集

ここでは、ネガティブマージンを使った、若干の非常に面白いテクニックを紹介します。

ul一つで、3カラムに配置

一つのulで実装されたリストをネガティブマージンを使用して、3カラムに配置します。

HTML

<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham
<li>
<li class="col2 top">Bread
<li>
<li class="col2">Butter
<li>
<li class="col3 top">Flour
<li>
<li class="col3">Cream</li>
</ul>

CSS

ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;}

ポイントはl.05の「margin-top:-2.6em;」です。line-heightの倍の値を指定しています。

ポイントをオーバーラップ

エレメントを重ねるのは、良いデザインのメタファとなります。重なり合ったエフェクトは深さを与え、そのエレメントに強調を加えます。

3Dのテキストエフェクト

異なる色の2つのテキストを使用して、ベベルのエフェクトをもったデザインを利用できます。マージンを1, 2pxずらして重ねます。
※訳者注：テキストは二重に配置されています。

シンプルな2カラムのレイアウト

2カラムのリキッドレイアウトの一方を固定幅として配置する方法です。

HTML

<div id="content">

Main content in here
</div>
<div id="sidebar">

I’m the Sidebar! 
</div>

CSS

#content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}

IE6でサイドバーがコンテンツに重なるのを防ぐために、下記を加えます。

CSS

/* Prevent text from being overlapped */
#content p {margin-right:210px;}
/* It’s 200px + 10px, the 10px being an additional margin.*/

配置の調節

これはネガティブマージンを使った、最もシンプルなテクニックです。
10個のdivを一列に配置しようとした際、最後の一つがはみ出してしまった場合に、他の9つの編集するのではなく、10番目のdivをネガティブマージンを使って収まるように配置します。

4. ネガティブマージンのバグフィックス

テキストとリンクの問題

floatと一緒にネガティブマージンを使用すると、古いブラウザで下記の問題が生じます。

クリッカブルでないリンク
選択しにくいテキスト
フォーカスを失った際、消失するタブのリンク

解決方法

該当箇所に、下記を指定してください。

position:relative;

切り離されたような画像

IE6で重なったコンテンツを表示した際、突然切り離されたように表示されます。これはfloatが関係しています。

解決方法

上記と同様に、下記を指定してください。

position:relative;

5. 終わりに

ネガティブマージンはモダンなウェブデザインを実現するために、マークアップの追加をせずにエレメントを配置することができるものです。

より多くのユーザーがアップデートされたブラウザを使用するようになると、このテクニックはさらに有用になることでしょう。

Post on:2009年7月29日

ページの先頭へ