2019/06/05)この記事ではCSSのmargin(マージン)とpadding(パディング)について、それぞれの使い方や違いをわかりやすく解説していきます。くまどっちも余白を設定するためのものだよね?あざらしそう!余白をどこに適用したいかによって、どっちを使うか変わってくるんだよmarginもpaddingも余白を設定するためのプロパティですが、要素のどこに余白を適用したいかによって、どちらを使うかが変わってきます。どちらもとてもよく使うプロパティなのでこの機会にきっちり覚えておきましょう。この記事を読むことで下記のようなことが理解できると思います。marginとpaddingの違い・基本が理解できるmarginとpaddingを自分で書けるようになるこの記事のゴールこの記事のゴールは、下記のようなCSSが自分で書けるようになることを目指しています。まとめ何のために余白を設定するのか?くまそもそも何のために余白を設定するんだ?あざらし余白がないとすごいみづらいサイトになってしまうんだ!サイトの内容を伝えるためには余白はすごい大切なんだよWEBサイトに限らずですが、情報を伝えるとき、余白はとても重要です。適度な余白がないと、情報同士がごちゃごちゃして見え、どこに何が書いてあるのかが伝わりづらくなります。余白なしで書き綴られた文章は非常に読みづらいです。普段読んでいる本でも適度に段落の間に余白がありますよね。あの余白があることで、ここで段落が変わるんだなということが伝わるし、どこまで読んだのかも何となく把握できます。実際に余白ある場合と、ない場合を比べてみましょう。左は余白がなさすぎて読みづらいのがわかります。余白がないと読みづらいだけでなく、無意識に「難しそう」と感じさせてしまい、避けられて読んですらもらえないということにも繋がります。いい内容を書いていても、読んでもらえなければもったいないですよね。あざらし余白がないと同じ内容でも難しそうに見えるものなんだコンテンツの余白またコンテンツ同士の余白をしっかりとることで、情報のまとまりを伝える働きがあります。余白が不十分な例あざらし画像とテキストがくっついているから、テキストと画像がどう対応しているか判りづらいよね余白をしっかりとった例くま余白があることで、画像とテキストの関係が分かりやすくなった!コンテンツ同士の余白が狭いと、どこまでが一つのまとまりかが伝わりづらくなります。余白をしっかりとっていれば、どこまでが一まとまりの情報なのかが直感的に伝わります。余白の基本!要素のボックスモデルを理解しよう余白について理解するには、ボックスモデルを知っておく必要があります。ここがわかれば、なぜ余白がマージンとパディングの2種類あるのかも理解でき迷わなくなります。難しいですが、HTMLとCSSを使いこなすにあたってとても重要な考え方ですので、ゆっくりと解説していきます。あざらしちょっと退屈な話だけど重要なポイントだよボックスモデルとはボックスモデルとは要素のもつ領域のことです。全ての要素はこのボックスモデルに基づいた4つの領域を持っています。ボックスモデルあざらしどんな要素でも、コンテンツ領域、パディング領域、ボーダー領域、マージン領域という4つの領域を持っているんだボックスモデルの仕様それぞれの領域の解説をしていきます。文字や画像などの実際のコンテンツ部分。widthやheightは、このコンテンツ領域の横幅と高さになります。パディング領域ボーダーより内側の余白。ボーダー領域ボーター(境界線)を引くための領域マージン領域ボーダーより外側の余白。全ての要素には、自身のコンテンツ領域、その外側にパティング、さらにその外側にボーダー、そして最後にマージンというように4つの領域で構成されることになります。タイトルちなみにマージン、ボーダー、パディングは初期値が0のため、スタイルで何も指定しなければ表示されません。ボックスモデルの例ボックスモデルを使ってマージンとパディングを整理するとこういうことになります。ボーダーの内側の余白はパディングボーダーの外側の余白はマージンボーダーの外側か内側かで余白の種類が分けれられているんです。ボーダーについてはこちら記事で解説しています。参考記事CSSで思い通りの枠線を引く方法!border(ボーダー)を使いこなそうborderプロパティを使えば、要素を枠線で囲うことができます。枠線はボーダーと呼ばれることが多いです。[...]ボーダーの内側がパディング、ボーダーの外側にマージンがある様子を画像でみてみましょう。青い矢印がパディングで赤い矢印がマージンです。パディングとマージンの違いはどちらも余白を設定するプロパティですが、ボーダーの内側か外側かで使い分ける必要があるんですね。ボーダー領域」を背景領域といいます。背景領域とは、背景色や背景画像を設定したときに適用される領域のことです。あざらし言い換えるとマージン領域以外は全部、背景領域になるよちなみにボーダー領域は背景の上から描かれます。ボーダーが実線の場合は背景は見えませんが、ボーダーを点線や透明の線にすると背景が見え隠れします。あざらし背景色はボーダーまで!と覚えておこうマージンとパディングの例いろいろマージンとパディングの例を色々見て、感覚を掴んでいきましょう。}これはテキストわかりやすいように背景色とボーダーも設定しています。余白を設定しない場合は文字とボーダーがくっついていますね。パディングを設定パディングを設定してみましょう。}これはテキスト今回はパディングを20pxに設定しました。ボーダーの内側に20pxの余白ができ、パディング領域にも背景色が塗られているのがわかります。パディングとマージンを組み合わせて使うマージンとパディングを組み合わせて使ってみます。}これはテキストここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文パディングでボーダーの内側に余白をとり、さらにマージンを使ってタイトルと本文の間に余白をとっています。あざらし実践ではこのように2種類の余白を組み合わせて表現することが多いよマージンやパディングの使い方マージンとパディングの書き方を解説します。マージンやパディングは、上下左右の4方向の余白を指定します。!あざらしマージンもパディングも方向の示し方は同じだから覚えやすいね!例えば上方向にマージンを20px、右側に30px取りたい場合は下記のように書きます。30px;また、パディングを左方向に30px、右方向に40px取りたい場合は下記のように書きます。40px;ショートハンドプロパティで一括指定ショートハンドプロパティと呼ばれる一括指定の書き方を使えば、もっとすっきりと書く事ができます。マージンの例で説明しますが、パディングでも同じようにショートハンドプロパティが使えます。順に、半角スペースで区切って4つ指定します。15px;と書く事ができます。シンプルに書く事ができますね。マージンが2つ以上ある場合はショートハンドで書くようにした方が良いでしょう。あざらし指定する順は「上から時計回り」と覚えると簡単だよ!ショートハンドプロパティの応用編ショートハンドプロパティは1行で4方向指定できる便利な記述方法です。応用編として、いくつか便利な書き方があるので覚えておくと役に立つでしょう。マージンの例で説明しますが、パディングでも同じようにショートハンドプロパティが使えます。値を1つだけ指定すると、4方向全ての余白が同じになります。10px;このように書くと上下左右全てに10pxが適用されます。2つ指定で「上下」と「左右」にまとめて適用2つ指定すると「上と下」が一緒で、「左と右」が一緒の余白になります。10px;このように書くと、上下の余白が30pxで、左右の余白は10pxに設定されます。3つ指定で「上」と「左右」と「下」にまとめて適用3つ指定すると「上」と「左と右」と「下」にそれぞれ適用されます。上と下はバラバラの余白だけど、左右の余白は同じという場合に使われます。0;このように書くと、上の余白は30pxで、左右は10px、下の余白は0に設定されます。あざらしめんどくさいように感じるけど、覚えるとすっきりと書けるから便利になるよマージンやパディングの単位についてマージンとパディングの指定には、「px」や「%」といった単位を使います。基本はこの解説で見てきたように「px」で指定しますが、「%」で指定するケースもあるので覚えておきましょう。マージンの例で説明しますが、パディングでも同じように%が使えます。余白を%で指定した場合は、親要素の横幅に対しての割合になります。親要素の横幅が500pxのときに子要素のmarginを10%にすると、余白は50pxになります。margin-topやpadding-topのような垂直方向の余白でも、基準となるのは親要素の横幅になります。%はどんな時に使うのか?「%」はレスポンシブデザインの場合などによく使われます。左右のマージンを30pxにしたときのことを考えてみましょう。パソコンなどの大きな画面で見た時は左右のマージン30pxくらいでちょうどよくても、小さいスマホの画面で見ると、30pxでは余白が広すぎるということはよくあります。そんな時に、余白を「3%」と「%」を使って指定しておけば、親要素が1000pxの時には30pxの余白、500pxであれば15pxの余白と、適度な余白が設定されることになります。いろんな横幅に柔軟にに対応するためのテクニックとして「%」を使うケースがあるということを覚えておきましょう。注意しなくてはならないのが、「%」を使う場合は、パディング・マージン・横幅が全て一貫して「%」で指定されている必要がある点です。いうのも、「px」での指定と「%」での指定が混ざってしまうと、横幅のトータルがうまく100%にならないからです。横幅が100%を超えてしまうと、親要素をはみ出してしまうことになるので、横幅とマージン、パディングの合計が100%になるように、単位を統一して使うようにしましょう。インライン要素と余白pタグやh1のようなブロック要素については特に注意することはないのですが、spanのようなインライン要素については注意が必要です。ブロック要素、インライン要素については下記解説を参照してください。参考記事CSSのインライン(inline)とブロック(block)について解説この記事ではインライン要素とブロックレベル要素について解説していきます。重要なことを述べますが、「インライン要素」「ブロックレベル要素」という概念はHTML5ではなくなりました。[...]インライン要素の場合、上下のマージンやパディングが効きません。(設定しても見た目が変わりません。)インライン要素は主に行内の一部分として使われるので、上下の余白を設定することはあまりありませんが、これを知らないでいるといざ余白を設定したときつまずく原因になるので覚えていきましょう。インライン要素であっても左右のパディングやマージンは適用されます。上下のマージンやパディングを変えたい場合は、displayを「inline-block」や「block」にするなどで、ブロック要素扱いにしてから適用しましょう。あざらしインライン要素は上下のマージンやパディングが効かないんだ!マージンの相殺に注意マージンには「相殺」という特殊な仕様があります。これは覚えおかないと謎のレイアウトになってしまうので、必ず把握しておきましょう。くまマージンの相殺?あざらしこの仕様はとても特殊だから意外に思うかもしれないな!でもちょっと気をつければ防げることだから覚えておこう!マージンの相殺とは、垂直方向のマージンが重なり合ったときに、合算されず大きい方のみ適用されることをいいます。わかりづらいと思うので、例を使って解説します。上下に隣接する要素のマージン上下に隣接するマージンは、大きい方のみが適用されます。このようにマージンを設定した場合、普通に考えると余白は合算されて60pxになりそうですが、実際には50pxの余白になります。垂直方向の余白が重なったために、相殺の仕様により大きいほうのみが適用されることになります。これがマージンの相殺です。上下に隣接する要素のマージンの相殺の対処方法これを防ぐにはなるべくマージンを上下どちらか一方につけるようにすることです。マージンは基本的に上にしか付けないというルールを作れば、相殺に悩まされることはありません。親要素との先頭の子要素のマージン親要素と、子要素の先頭のマージンでも相殺が起こります。下記の図を見てください。本来は親要素の上に10pxの余白、子要素は親要素の中で30pxの余白としたいのですが、垂直方向の余白が重なったことになるため、大きい方の30pxのみが適用されることになります。親要素との最後の子要素のマージンまた、下方向のマージンでも同様のことが起こります。本来は親要素の下に10pxの余白、子要素は親要素の中で30pxの余白としたいのですが、垂直方向の余白が重なったことになるため、大きい方の30pxのみが適用されることになります。親要素と子要素に余白をとりたい場合は、子要素のマージンではなく、親要素のパディングを使うようにすると相殺を防ぐ事ができます。しても子要素にマージンを使いたい場合は、親要素にパディングやボーダーを設定することで、相殺を防ぐ事ができます。あざらし垂直方向のマージンは相殺に注意して設定しよう!【小技紹介】マージンを使った真ん中ぞろえマージンはautoという値を設定することもきます。autoを設定すると下記のように解釈されます。上下にautoを設定した場合は「0」を設定したのと同じことになります。これだけ覚えようくまむむ...よくわからんあざらしautoは特殊だから全部おぼえなくても大丈夫だよ!ただ3番目はよく使うテクニックだからこれだけ覚えようマージンを使って真ん中ぞろえマージンの左右にautoを設定するとセンタリング、つまり真ん中に揃えることができます。このセンタリングのテクニックはよく使われるので覚えておくと便利です。}これはテキストポイント横幅を指定していない要素に対しては、センタリングする事ができません。したがって横幅を指定していなかったり、そもそも要素の横幅を指定できないインライン要素などには効果がないので注意しましょう。あざらしマージンの左右をautoにするとで真ん中揃えにできるんだ!まとめマージンとパディングの使い方や違いについて解説してきました。簡単に振り返ってみましょう。ボーダー領域」を背景領域いい、背景色や背景画像が適用されるボーダーの内側の余白はパディングボーダーの外側の余白はマージンインライン要素の場合、上下のマージンやパディングが効かないマージンの相殺の仕様によって、垂直方向のマージンが重なり合ったとき、合算されず大きい方のみ適用されるマージンの左右にautoを設定するとセンタリングができる(widthの設定が必要)あざらしこれで余白についての解説は完了だよ!あとは実際に使って慣れていこうすずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。CSSのpositionの使い方!absolute・relativeの違いも解説html&CSS入門WEBサイトで使う画像の種類や特徴html&CSS入門CSSで重なり順を変更!z-indexの使い方解説html&CSS入門パンくずリストhtml&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。