スペースを作りたい!CSSでmarginの書き方【初心者向け】

初心者向けにCSSのmarginの書き方を解説!余白スペースを作りたいというときにmarginを使います。実際の業務でも使う機会は多いので、ぜひ自分で書けるようにしておきましょう。また、paddingとの違いも知っておくと良いです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

初心者向けにCSSでmarginの書き方を解説しています。これからCSSを学習しようと思っている方でも実際に業務で使っている方でもmarginは必ず使用します。

paddingと混同してしまうことも多々あるので、この機会にしっかり覚えておきましょう。

そもそもCSSとは何か分からないという方はこちらをご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

20160620

 

田島メンター!!marginはどの部分の余白を設定するものなんですか~?

 

20163020-2

 

marginは、borderの外側の余白を設定するものになるよ。逆に内側はpaddingになるね。

 

20160620

 

縦や横の余白の長さはどうやって決めるんですか?

 

20163020-2

 

長さは値の数値で決定するんだけれど、値をいくつ設定するかによってもどの方向への余白に反映されるかが違ってくるんだ。marginを使うときの決まりを見てみよう。

 

marginとは

marginプロパティを使用すると、各境界の外側の余白を設定することができます。paddingがborderの中の余白であるのに対して、marginはborderの外の余白となります。

margin_p_0

 

marginの書き方

marginは以下のように記述します。

margin: 余白の値;

値は1つから4つまで入力する方法があり、その数によって反映される場所が変わります。

値を1つ入力した場合:入力した値の余白が上下左右に等しく設定されます。
値を2つ入力した場合:1つ目の値が上下に、2つ目の値が左右に適用されます。
値を3つ入力した場合:1つ目の値が上に、2つ目が左右に、3つ目が下に適用されます。
値を4つ入力した場合:1つ目の値が上に、続いて右・下・左の順に適用されます。

20163020-2

 

値の数と、各方向への適用の関係はこうなっているよ。

 

20160620

 

全部に同じだけの余白を作りたい場合は、値は1つでいいんですね。

 

20163020-2

 

そうだね。試しに値を1つ~4つ設定した場合のそれぞれの例を見てみよう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際にmarginを書いてみよう

以下のhtmlにmarginプロパティを使用します。
(※htmlとcssのファイルが同じディレクトリ内にあり、cssのファイル名が”sample.css”である場合の例です)

html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”content1″>コンテンツ部分</p>
</body>
</html>

値を1つ入力した場合の例です。

css

p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin: 40px;}

画面ではこのように表示されます。40px分の余白が上下左右に等しく設定されます。

margin_p_1

値を2つ入力した場合の例です。

css

p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin: 10px 50px;}

画面ではこのように表示されます。1つ目の値10pxが上下に、2つ目の値50pxが左右に適用されています。

margin_p_2

値を3つ入力した場合の例です。

css

p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin: 50px 20px 30px;}

画面ではこのように表示されます。1つ目の値50pxが上に、2つ目の値20pxが左右に、3つ目の値30pxが下に適用されています。

margin_p_3

値を4つ入力した場合の例です。

css

p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin: 20px 10px 30px 50px;}

画面ではこのように表示されます。1つ目の値20pxが上に、続いて時計回りにそれぞれの値が適用されています。

margin_p_4

margin-topmargin-bottommargin-leftmargin-rightプロパティを使うことによって、それぞれに対応した箇所だけにマージンを設定することも可能です。

例えばmargin-leftを設定すると、領域の左側にだけ余白が生成されます。

css

p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin-left: 50px;}

画面ではこのように表示されます。入力した値50px分の余白が左側に適用されています。

margin_p_5

 

以上、CSSで書くmarginについて解説しました。

余白スペースを作る上では、marginは必須の知識となるのでぜひ自分で書いてみましょう。

同様にpaddingの書き方も紹介しているので、合わせてご覧ください。

20163020-2

 

各値の設定方法と、それによって反映される方向を実際に見てみたよ。

 

20160620

 

“margin-left”みたいに、ひとつの方向だけに余白を設定することもできるんですね。

 

20163020-2

 

マージンにはpxなどの長さの単位以外に、%を使ったり”auto”を値にしたりすることもできるんだ。どういうレイアウトにしたいかによって使い分けてみよう。

 

20160620

 

色んな方法を試してみます。ありがとうございました!

 

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。ぜひ自分で考えたWebデザインを実現しましょう!