BLOG

このブログは間もなく「Webis Tech LABO.」に移設予定です。
Webis Tech LABO.はこちら

2020.10.28

ネガティブmarginを使って要素をずらす方法

こんにちは！大学生WEBコーダーのYUJIROです。

最近WEB制作の勉強のために色んなWEBサイトを見ていますが、

https://www.meitec.co.jp/

こちらのWEBサイトのように要素をくっつけるのではなく、ずらす方法がかなり使われているなと感じています。

こちらのWEBサイトはちなみにpositionプロパティを使って要素をずらしています。

しかしpositionプロパティはしっかり理解できていないと使いこなすのが大変。

そこで今回は

「positionプロパティだとレスポンシブの時にCSSで調整するのが大変。
だからpositionプロパティ以外の方法で要素をずらす方法が知りたい。」

と思っている方に向けて「ネガティブmarginを使って要素をずらす方法」について紹介していこうと思います。

WEB制作を学び始めた人でも出来る実装なので、是非挑戦してみてください！

ネガティブmarginとは？？

通常marginは「margin: 30px;」など正の値で使われることが多いです。

しかしmarginは正の値だけでなく、負の値を指定することが出来る。

負の値を指定されたmarginのことを「ネガティブmargin」を言います。

https://designerbrg.com/negative_margin/　（引用）

ネガティブmarginを理解することでWEB制作の幅も広がります。

ネガティブmarginを使って要素をずらす方法

今回はこちらの画像のように画像・文章を用意し、文章をネガティブmarginを使ってずらしていく実装をしていきます。

この実装が出来ると、お洒落なレイアウトを組むことが出来るので是非試してみてください！

◎HTML

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="css/main.css"&gt;
    &lt;title&gt;ネガティブmarginを使って要素をずらす方法&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="boxs"&gt;
        &lt;div class="boxs__inner"&gt;
            &lt;div class="box"&gt;
                &lt;a href=""&gt;
                    &lt;div class="box__img"&gt;
                        &lt;img src="./image/IMG_3874.jpeg" alt=""&gt;
                    &lt;/div&gt;
                    &lt;div class="box__text"&gt;
                        &lt;h2&gt;ここにタイトルが入ります。&lt;/h2&gt;
                        &lt;p&gt;ここにタイトルに関する文章が入ります。ここにタイトルに関する文章が入ります。&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="box"&gt;
                &lt;a href=""&gt;
                    &lt;div class="box__img"&gt;
                        &lt;img src="./image/IMG_3874.jpeg" alt=""&gt;
                    &lt;/div&gt;
                    &lt;div class="box__text"&gt;
                        &lt;h2&gt;ここにタイトルが入ります。&lt;/h2&gt;
                        &lt;p&gt;ここにタイトルに関する文章が入ります。ここにタイトルに関する文章が入ります。&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>ネガティブmarginを使って要素をずらす方法</title>

</head>

<body>

</div>

<h2>ここにタイトルが入ります。</h2>

<p>ここにタイトルに関する文章が入ります。ここにタイトルに関する文章が入ります。</p>

</div>

</a>

</div>

</div>

<h2>ここにタイトルが入ります。</h2>

<p>ここにタイトルに関する文章が入ります。ここにタイトルに関する文章が入ります。</p>

</div>

</a>

</div>

</body>

</html>

◎CSS

/* ◎リセットCSS */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ◎リセットCSS */


img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

* {
    text-decoration: none;
    box-sizing: border-box;
}

.boxs {
    padding: 100px 0;
}

.boxs__inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.box {
    flex-basis: 40%;
}

.box__text {
    width: 100%;
    padding: 30px;
    opacity: 0.9;
    color: black;
    background-color: pink;
    margin: -45px -105px;
}

.box__text h2 {
    padding-bottom: 25px;
}

.box__text p {
    line-height: 1.5;
}

/* ◎リセットCSS */

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

/* ◎リセットCSS */

img {

max-width: 100%;

height: auto;

vertical-align: bottom;

}

* {

text-decoration: none;

box-sizing: border-box;

}

.boxs {

padding: 100px 0;

}

.boxs__inner {

max-width: 1000px;

margin: 0 auto;

display: flex;

justify-content: space-between;

}

.box {

flex-basis: 40%;

}

.box__text {

width: 100%;

padding: 30px;

opacity: 0.9;

color: black;

background-color: pink;

margin: -45px -105px;

}

.box__text h2 {

padding-bottom: 25px;

}

.box__text p {

line-height: 1.5;

}

◎HTMLの解説

・まず「boxs」という親要素を用意して、その中に子要素である「box」というアイテムを2つ用意しました。

・そして「box」アイテムの子要素として画像を表す「box__img」、テキストを表す「box__text」をマークアップしました。

◎CSSの解説

・まずはリセットCSSを使って余計な余白やブラウザがもとから持っているデフォルトコードを消します。

今回使用したリセットCSSはこちら↓

https://meyerweb.com/eric/tools/css/reset/

・全体のimgタグに対して

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

img {

max-width: 100%;

height: auto;

vertical-align: bottom;

}

を指定して画像がブラウザ幅にしっかりおさまるようにしました。

そして「vertical-align: bottom;」をいれることで、画像とテキストの間に出てくるデフォルトの余白を消すことができます。

・テキストである「.box__text」をずらす方法として

.box__text {
    width: 100%;
    padding: 30px;
    opacity: 0.9;
    color: black;
    background-color: pink;
    margin: -45px -105px;
}

.box__text {

width: 100%;

padding: 30px;

opacity: 0.9;

color: black;

background-color: pink;

margin: -45px -105px;

}

を指定します。

ここで出てくる「margin: -45px -105px;」が今回のテーマであるネガティブmarginになります。

marginを「上下に-45px、左右に-105px」とずらすことで、見本の画像のようにテキストをずらすことができます！

marginの値の指定方法はこちら↓

http://www.htmq.com/style/margin.shtml

まとめ

今回は「ネガティブmarginを使って要素をずらす方法」について紹介させて頂きました。

positionプロパティよりも簡単に要素をずらすことができます。

ネガティブmarginの数値を調整すると、いろんなお洒落なレイアウトを組むことが出来るので是非試してみてください。

当ブログは毎週水曜日に「WEB制作においての気づき・学び」を発信していきます！

それでは！

BLOG LIST

CONTACT
RECRUIT

CONTACT

お仕事の依頼・ご相談は
こちらからお問い合わせください。

RECRUIT

私たちと働いていただける方を募集しています。

BLOG

ネガティブmarginを使って要素をずらす方法

ネガティブmarginとは？？

ネガティブmarginを使って要素をずらす方法

まとめ

CONTACTRECRUIT

CONTACT
RECRUIT