【CSS】marginとpaddingのちがい

marginとpaddingの違いがわかりません。

今回はCSSでよく使われる余白のmarginとpaddingについて、可愛い囲み線を作りながら解説したいと思います。スタイルシートについては初心者さん向けCSS（カスケーディング　スタイルシート）の基本まとめに書いてありますので、合わせて読んでみてくださいね。

囲み線を覚えれば、読者に伝えたい内容を強調することができますし、文字ばかりの単調さを改善して見やすくなります。スタイルシートを暗記する必要はありません。お気に入りスタイルシートのメモをストックしていけば、自然と囲み線をマスターすることができますよ。

marginとpaddingについて
実際に囲み線を作ってみましょう！
1. ちょっと復習：CSSはどこに書く？
2. HTMLファイルとCSSファイルを作る
  1. div後のid と classの違い
  2. 余白の指定方法はいろいろ

marginとpaddingについて

適度な余白は、文章の見やすさに影響し理解の手助けになります。あまりにもぎゅうぎゅうに文字がつまていると見にくいですよね。余白には2種類の余白があります。四角い枠の外側の余白と内側の余白です。四角い枠の外側の余白をmargin（マージン）、内側の余白をpadding（パディング）と呼んでいます。

枠線の外側と枠線の間の余白：margin
枠線と内容の間の余白：padding

これを図にしました。こんな感じです。四角い枠や四角形、四角い領域なんでも構いません。CSSはボックスという考え方でデザインします。

具体例を私のブログで見てみましょう。2つボックスがあります。緑のボックスは見出し、青のボックスはテキストエリアとリストエリアの2つをグループ化して背景を塗っています。

青のボックスのテキストエリアに書かれている「セ」の左側の余白が狭い感じがしますね。余白が狭いので窮屈な感じがしますよね？余白は読みやすさ、見やすさデザインにも関わります。余白は1文字（1em）や10pを目安にして、調整するといいと思います。

実際に囲み線を作ってみましょう！

ちょっと復習：CSSはどこに書く？

CSSの書き方は3通りあります。

別ファイルを作る
<head></head>ヘッダーに書く
HTMLタグ内に書く

この3通りあります。

アメーバブログや、SeesaaaブログはHTMLタグ内に書く方法です。WordPressは別ファイルで管理することがメインです。その1つだけ指示するだけでよければHTMLタグ内に、そのファイルだけの指示でよければヘッダー内に、複数のファイルで指示をしたい場合は別ファイルを作ります。

今回は別ファイルでやってみましょう！

HTMLファイルとCSSファイルを作る

3種類の下のような囲み線を作ります。

テキストファイルで、HTMLとCSSのファイルを作ります。windowsならメモ帳アプリを開きます。まずはHTMLファイルです。ファイル名は「test.html」などなんでも構いません。デスクトップなどに保存してください。

<!--HTMLファイルです-->
<!DICTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>囲み枠をつくる</title>
  <link rel="stylesheet" href="test.css" type="text/css">
 </head>
 <body>
  <div class="box-dashed">
  色は＃ffa500、破線<br>
  マージンは上下100px、左右20px<br>
  パッディングは上下左右10px<br>
  </div>

  <div id="box-double">
  色は＃ff1493、二重線<br>
  マージンは上下40px、左右100px<br>
  パッディングは上下左右10px<br>
  </div>

  <div class="box-dotted">
  色は＃b0c4de、ドット<br>
  左マージン50％<br>
  パッディングは上下左右50px<br>
  </div>
 </body>
</html>

次は、CSSです。「test.css」と名付けてデスクトップに保存します。

/*　これはCSSファイルです　*/


#box-double {border-style: double ;
      border-color: #ff1493 ;
     margin: 40px 100px 40px 100px ;
     padding: 10px ;}

.box-dashed {border-style: dashed ;
      border-color: #ffa500 ;
     margin: 100px 20px 100px 20px ;
     padding: 10px ;}

.box-dotted {border-style: dotted ;
      border-color: #b0c4de ;
     margin-left: 50% ;
     padding-top: 50px ;
     padding-bottom: 50px ;
     padding-right: 50px;
     padding-left:50px ;}

div後のid と classの違い

HTMLファイルにdivの後にclassとidの属性がありますね？

id属性はある要素に対してHTML文書内での固有の名前をつけるもので、一つのHTML文書では1カ所しか使えません。class属性はそのユソの種類や分類を表すものなので、複数回指定することができます。

また、CSSファイルでは、id属性は「#（シャープ）」をつけます。class属性は「.(ドット)」をつけます。

id属性・・・「#」をつける。一回だけ指示できる
class属性・・・「.」をつける。複数回指定できる

でも、上のようにid属性とclass属性の指定回数の違いがありますが、id属性も私のパソコン環境では複数回指定できます。なので、回数の違いは今後なくなるかもしれませんね。

余白の指定方法はいろいろ

余白の上下左右の指定は、細かく分けて書く方法とまとめて書く方法があります。

box-dottedのように細かく「padding-top,paddin-bottom,padding-left,padding-right」とマージンを分けて指示することができます。ドットの囲み線は上下左右ともパッディングが50pxなので、「padding: 50px]とまとめて書くことも可能です。

余白のあとの値が1つだけ書かれている場合は上下左右の4つの値を指しています。また、値が2つの場合は、はじめに書かれた数字が上下の余白、次に書かれた数字が左右の余白を表しています。

値が1つの場合・・・(上下左右)
値が2つの場合・・・(上下、左右)
値が3つの場合・・・(上、左右、下)
値が4つの場合・・・(上、右、下、左)

他にはパーセンテージで書くことも可能です。好きな表示を選んで書くといいと思います。余白は10から20pxがちょうどいいのかなと思うので、皆さんも色々試してみてくださいね！

marginは外枠と外側の余白で、paddingは四角いボックスの中の余白なのね