ITコラム

ITコラム

2017.04.07

CSS【 margin 】3 ～ネガティブマージン

marginプロパティには、マイナスの数値を指定することができます。
これを、ネガティブマージンと言います。
ネガティブマージンを指定すると、マージンがボックスからはみ出るようなイメージで、画面いっぱいにヘッダやフッタを表示したい時などに便利に使えます。
今回は、このようなネガティブマージンについてまとめたいと思います。

marginプロパティについては、以下のページもご参照下さい。
CSS【 margin 】1 ～マージンとショートハンド
 CSS【 margin 】2 ～ autoとwidthと上下と左右
 CSS【 margin 】3 ～ネガティブマージン（本ページ）
CSS【 margin 】4 ～マージンの相殺 (margin collapsing)（1）
CSS【 margin 】5 ～マージンの相殺 (margin collapsing)（2）

１．ネガティブマージンとは

ネガティブマージンとは、marginプロパティに、マイナスの数値を指定することです。
次の表示は、ネガティブマージンを使用しています。

margin:0 -2em -10% 0;
margin:0 -2em -10% 0;

　
ソースは次の通りです。

（CSS）
div#sample {border:solid 1px #ccc; font-weight:bold;margin:0 auto 3em;padding:0;width:90%;}
div#sample ul {padding:0;margin:0 -2em -10% 0;}
div#sample ul li {
	margin:1em;
	padding:1em;
	list-style:none;
	background:#AAA;
	border-radius:5px;
	color:#FFF;
	line-height:1em;}

（HTML）
<div id="sample">
    <ul>
        <li>margin:0 -2em -10% 0;</li>
        <li>margin:0 -2em -10% 0;</li>
    </ul>
</div>

ul要素に右のネガティブマージン-2emを指定しているので、ul要素は親要素であるdiv要素から右に2emはみ出ています。
中のli要素には margin: 1em と指定しているので、ul要素の右端から1em内に入っています。
ですので、li要素はトータルで 1em だけ div要素から右にはみ出ています。
下側のネガティブマージン（margin-bottom: -10%）も同様です。

▲目次へ戻る

２．hr要素にネガティブマージン

通常、枠線のあるdiv要素内にhr要素で線を引くと、次のような表示になります。

div要素のpaddingに1emを指定しているので、hr要素で引いた線は、左右に1emずつスペースが空いてしまいます。
　
このスペースをなくして、hr要素の線を外枠の線まで伸ばしたい時に、ネガティブマージンを使うと、簡単に実現できます。

　
ソースは次の通りです。

（CSS）
div#sample{border:solid 1px; padding:1em;}
div#sample hr {margin:0 -1em;}

（HTML）
<div id="sample">
    <br><br><br>
    <hr>
    <br><br><br>
<div>

hr要素に、親要素のpaddingプロパティの値分のネガティブマージンを指定すると、親要素の左端から右端まで線を引くことができます。
親要素のpaddingプロパティの指定を変更せずに線だけ伸ばすことができるので、便利です。

▲目次へ戻る

３．img要素にネガティブマージン

親要素内に画像とテキストを配置した次のような表示があります。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

　
この画像を、親要素の外枠線ぴったりに表示させたい場合にも、ネガティブマージンが使えます。
img要素にネガティブマージンを指定すると、次のような表示になります。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

　
ソースは次の通りです。

（CSS）
div#sample{border:solid 1px; padding:1em; position:relative;}
div#sample img {margin:-1em -1em 0 -1em; position:absolute;}

（HTML）
<div id="sample">
    <img src="img/image.jpg" />
    テキスト・・・
</div>

ネガティブマージンを使用する場合は、左側（margin_left）は左側にはみ出しますが、右側（margin_right）は、思うように右側にはみ出さず、margin:-1em -1em 0 -1em;を指定しただけでは、右側のスペースが埋まらない場合もあります。
そのような場合は、img要素にposition:absolute;、親要素にposition:relative;、をそれぞれ指定すると、意図した通り、親要素の外枠線ぴったりに画像を表示することができます。

positionプロパティは、ボックスの配置方法が、相対位置か絶対位置かを指定する際に使用するプロパティです。
親要素で指定したposition:relative;は、相対位置への配置となり、img要素にで指定したposition:absolute;は、絶対位置への配置となります。
親要素にpositionプロパティの指定がない場合は、ウィンドウ全体の左上が基準位置となり、右側のネガティブマージンは左側への動きとなります。
ネガティブマージンが意図通りに効かない場合には、positionプロパティの指定をしてみると解決される場合が多いです。

▲目次へ戻る