marginとpaddingを総まとめ！イラスト付きでわかりやすく解説【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です。
今回は、CSS初心者入門【第一回】ということで、marginとpaddingについて解説して行きます。

最初にCSSのおさらい。次にmarginとpaddingの違いをアボカドを使ってわかりやすく解説をします。 その後に、実際の使い方とショートハンドでの記述方法も解説していきます。サンプルコードも載せてあるので参考にしてください。CSSの復習を飛ばして、すぐにmarginとpaddingについてを読みたい方は スキップ を押してください。

これからの記事を読むとmarginとpaddingの違いから実際の使い方とショートハンドでの書き方がわかるよ！

こんな人にオススメの記事です

• CSS初心者の方
• marginとpaddingの違いがわからない人
• marginとpaddingの実際の使い方を知りたい人
• marginとpaddingのショートハンドの書き方を知りたい人

先ずはCSSの復習

以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。

CSSとは？

ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。

CSSの基本構造

h1タグにCSSを使って見た目を指定した場合。

[HTMLの中身]

<h1>たいとる</h1>

[CSSの指定]

h1{
　font-size: 32px;
}

セレクタ：どこのデザインを変更するか(※h1タグ)
プロパティ：どの要素に変更を加えるか(※font-size=文字の大きさ)
値：どのように変えるか(※32pxという大きさに変える)

HTMLファイルにCSSファイルを読み込ませる方法

HTMLファイルのhead内に以下を記述します。

<link rel="stylesheet" type="text/css" href="[CSSファイル場所]">

CSSについて、もっと詳しく知りたい人は以下の記事を参考にしてください。 blog.mimipen.net

marginとpaddingってなんで使うの？

htmlのみでホームページを作ると以下のように余白がなく、見栄えが悪くなってしまいますが、marginやpaddingを使うことで綺麗に見た目を整えることができます。

marginとpaddingの違いとは？

先ほどの図には文字とそれを囲う枠線がありました。それをアボカドに例えて解説してみます。

アボカドの中には大きな種があり、それが 文字 = 要素 だと思ってください。その周りをアボカドの果肉、これがpaddingとイメージしてください。果肉の周りにアボカドの皮があります。図で言う枠線(border)のことです。

今後出てきますが、枠線(アボカドの皮)のことをWEB用語でborder(ボーダー)と言います。

先ほどの図には四角い箱が２つありましたので、同じようにアボカドも２つ並べてみます。アボカドとアボカドの間のことをmarginと言います。

pxとは？

ホームページ作成でよく使われる単位を「px(ピクセル)」と言います。 パソコンやスマートフォンは小さなドットの集合体で画像や動画を表示しています。イメージしやすいものであればドット絵がでしょうか？

以下の図の1ドットが1pxのイメージです。

pxのことを画素ともいいコンピューターで扱う 最小単位 です。


1pxは何cmなの？と思うこともあるかもしれませんがそのような概念がありません。 ホームページ上で扱うデータは px と言う単位で計り px という単位で記述すると覚えましょう。

marginの記述例

図と同じ見た目になるように、CSSファイルにmarginを使って指定します。図のAとBの間隔は50pxです。

実際のコードが以下になります。
[htmlファイル]

<div class="box__a">A</div>
<div class="box__b">B</div>

[cssファイル]

.box__a{
  margin-bottom: 50px; <!-- box__aというclass(クラス)名の要素からみて下に余白を50pxもたせるという意味。 -->
}

この例では、下に余白を出しましたが、上下、左右の指定ができます。

marginの記述	意味	記述例
margin	全方向に同じだけ余白	margin: 50px;
margin-top	上に余白	margin-top: 50px;
margin-right	右に余白	margin-right: 50px;
margin-bottom	下に余白	margin-bottom: 50px;
margin-left	左に余白	margin-left: 50px;
margin-right	自動で算出	margin-right: auto;
margin-right	自動で算出	margin-left: auto;

上の表では、上右下左の順で記述しました。CSSの指定ではすごく重要な順番です。私は上から始まり時計回りと覚えています。
なぜ重要なのかについては、記事の下部「marginのショートハンドの書き方」で紹介して行きます。

autoって何？

ユーザエージェントによって自動的に計算される値のことを指します。プロパティ(変更を加える要素)に応じて効果は変わります。

marginの場合は、[親要素の横幅 - 指定した要素の横幅]によりmarginを自動で算出されます。

autoは基本的に、margin-right、margin-leftで使用します。基本的な使い方としては、ブロック要素を中央配置したい場合に使われます。後ほど説明しますが、margin: 0 auto;という書き方で使われることが多く、これは上下を0px(余白なし)、左右はauto(自動で算出)で中央に配置するという意味です。

ブロック要素を右に配置したい場合は、margin-left: auto;を使うことで配置ができます。ブロック要素を左に配置したい場合はmargin-right: auto;を使うことで配置ができます。

margin-top: auto;やmargin-bottom: auto;も使えますが、ほとんどの場合は 0 として扱われます。そのため、縦に中央配置したい場合はmarginは基本的に使用しません。

paddingの記述例

図と同じ見た目になるように、CSSファイルにpaddingを使って指定します。図のA要素の周りにはそれぞれ 50pxの余白 があります。先ほども説明しましたが、枠線(border)の内側の余白、先ほど例えたアボカドの果肉の部分は、paddingを使って指定します。

実際のコードが以下になります。 [htmlファイル]

<div class="box__a">A</div>

[cssファイル]

.box__a{
  padding: 50px; <!-- box__aというclass(クラス)名の要素の周りにそれぞれ50pxの余白を持たせるという意味 -->
  border: solid 1px red;
}

この例では、全体に同じだけ余白を出しましたが、上下、左右などそれぞれの指定方法が以下になります。

paddingの記述	意味	記述例
padding	全方向に同じだけ余白	padding: 50px;
padding-top	上に余白	padding-top: 50px;
padding-right	右に余白	padding-right: 50px;
padding-bottom	下に余白	padding-bottom: 50px;
padding-left	左に余白	padding-left: 50px;

※paddingはmarginと違って、autoは使用できません。

ショートハンドとは？

余白の大きさがそれぞれ違う場合に、毎回padding-top、padding-bottom...などと指定していると大変ですし、コードが長くなってしまいます。コードを省略して書く方法を以下で紹介します。また、省略して書く書き方をショートハンドと言います。

marginのショートハンドの書き方

意味	記述例	意味
上下左右が同じ	margin: 10px;	上:10px、右:10px、下:10px、左:10px
上下、左右	margin: 10px 20px	上:10px、右:20px、下:10px、左:20px
上、左右、下	margin: 10px 20px 30px;	上:10px、右:20px、下:30px、左:20px
上下左右が違う	margin: 10px 5px 15px 20px;	上:10px、右:5px、下:15px、左:20px

それぞれ違う値の場合は、上 → 右 → 下 → 左 の順で記述します。

他、よく使う記述としては、margin: 0 auto;でブロック要素の中央寄せです。上:0px、右:auto、下:0px、左:autoという意味。
余談ですが、値が0の場合はpxを省略できます。

paddingをのショートハンドの書き方

意味	記述例	意味
全て同じ	padding: 10px;	上:10px、右:10px、下:10px、左:10px
上下、左右	padding: 10px 20px	上:10px、右:20px、下:10px、左:20px
上、左右、下	padding: 10px 20px 30px;	上:10px、右:20px、下:30px、左:20px
全て違う	padding: 10px 5px 15px 20px;	上:10px、右:5px、下:15px、左:20px

それぞれ違う値の場合は、上 → 右 → 下 → 左 の順で記述します。

また、paddingは値:autoを使うことができません。

コードを短く書く意味を理解しよう

コーディングで重要なことは、ソースコードを短く書くことです。その為CSS初心者であっても、積極的にショートハンドは使って行きましょう。ただ、必ずショートハンドを使えというわけではありません。ソースコードを短くすることが重要なのでmargin: 50px 0 0 0;とmargin-top: 50px;でどちらを使えばいいか悩んだ時は、文字数が少ないmargin-top: 50px;を選びましょう。

まとめ

今回は、marginとpaddingの違いや基本の記述方法について書かせていただきました。marginはブロック要素同士の余白であり、paddingは要素の内側の余白です。このブログで説明したアボカドの果肉という意味ですね。

ショートハンドの書き方もすごく重要な部分になりますので理解するようにしましょう。

この記事がいいなっと思ったら読者登録をお願いいたします！

【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)