
marginとpaddingの違いがわかりません。
今回はCSSでよく使われる余白のmarginとpaddingについて、可愛い囲み線を作りながら解説したいと思います。スタイルシートについては初心者さん向けCSS(カスケーディング スタイルシート)の基本まとめに書いてありますので、合わせて読んでみてくださいね。
囲み線を覚えれば、読者に伝えたい内容を強調することができますし、文字ばかりの単調さを改善して見やすくなります。スタイルシートを暗記する必要はありません。お気に入りスタイルシートのメモをストックしていけば、自然と囲み線をマスターすることができますよ。
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は四角いボックスの中の余白なのね