
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.04.07
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要素にネガティブマージン
ネガティブマージンとは、marginプロパティに、マイナスの数値を指定することです。
次の表示は、ネガティブマージンを使用しています。
ソースは次の通りです。
(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%)も同様です。
通常、枠線のある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要素にネガティブマージンを指定すると、次のような表示になります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ソースは次の通りです。
(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プロパティの指定をしてみると解決される場合が多いです。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.