ITコラム

colmun_main3938

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)

目次

1.ネガティブマージンとは
2.hr要素にネガティブマージン
3.img要素にネガティブマージン

1.ネガティブマージンとは

ネガティブマージンとは、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%)も同様です。

▲目次へ戻る

 

2.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プロパティの指定を変更せずに線だけ伸ばすことができるので、便利です。

▲目次へ戻る

 

3.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プロパティの指定をしてみると解決される場合が多いです。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.