スペースを作りたい！CSSでmarginの書き方【初心者向け】
初心者向けにCSSのmarginの書き方を解説！余白スペースを作りたいというときにmarginを使います。実際の業務でも使う機会は多いので、ぜひ自分で書けるようにしておきましょう。また、paddingとの違いも知っておくと良いです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
初心者向けにCSSでmarginの書き方を解説しています。これからCSSを学習しようと思っている方でも実際に業務で使っている方でもmarginは必ず使用します。
paddingと混同してしまうことも多々あるので、この機会にしっかり覚えておきましょう。
そもそもCSSとは何か分からないという方はこちらをご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
田島メンター！！marginはどの部分の余白を設定するものなんですか～？
marginは、borderの外側の余白を設定するものになるよ。逆に内側はpaddingになるね。
縦や横の余白の長さはどうやって決めるんですか？
長さは値の数値で決定するんだけれど、値をいくつ設定するかによってもどの方向への余白に反映されるかが違ってくるんだ。marginを使うときの決まりを見てみよう。
marginとは
marginプロパティを使用すると、各境界の外側の余白を設定することができます。paddingがborderの中の余白であるのに対して、marginはborderの外の余白となります。
paddingとの違い
marginは余白や境界の外側のサイズを指定する事ができます。
paddingは余白や境界の内側のサイズを指定する事ができます。
borderと呼ばれる境界線が背景色と別の色で表示されている場合は、marginとpaddingの境界線が分かり易いです。
先ほどの図ですと、paddingが薄緑色のエリアです。
borderは、paddingを囲む濃緑色の線です。
marginは、borderの外側の白色のエリアです。
marginの書き方
marginは以下のように記述します。
margin: 余白の値;
値は1つから4つまで入力する方法があり、その数によって反映される場所が変わります。
値を1つ入力した場合：入力した値の余白が上下左右に等しく設定されます。
margin: 上下左右;
値を2つ入力した場合：1つ目の値が上下に、2つ目の値が左右に適用されます。
margin: 上下 左右;
値を3つ入力した場合：1つ目の値が上に、2つ目が左右に、3つ目が下に適用されます。
margin: 上 左右 下;
値を4つ入力した場合：1つ目の値が上に、続いて右・下・左の順に適用されます。
margin: 上 右 下 左;
値の数と、各方向への適用の関係はこうなっているよ。
全部に同じだけの余白を作りたい場合は、値は1つでいいんですね。
そうだね。試しに値を1つ～4つ設定した場合のそれぞれの例を見てみよう。
実際に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分の余白が上下左右に等しく設定されます。
値を2つ入力した場合の例です。
css
p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin: 10px 50px;}
画面ではこのように表示されます。1つ目の値10pxが上下に、2つ目の値50pxが左右に適用されています。
値を3つ入力した場合の例です。
css
p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin: 50px 20px 30px;}
画面ではこのように表示されます。1つ目の値50pxが上に、2つ目の値20pxが左右に、3つ目の値30pxが下に適用されています。
値を4つ入力した場合の例です。
css
p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin: 20px 10px 30px 50px;}
画面ではこのように表示されます。1つ目の値20pxが上に、続いて時計回りにそれぞれの値が適用されています。
margin-top・margin-bottom・margin-left・margin-rightプロパティを使うことによって、それぞれに対応した箇所だけにマージンを設定することも可能です。
例えばmargin-leftを設定すると、領域の左側にだけ余白が生成されます。
css
p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin-left: 50px;}
画面ではこのように表示されます。入力した値50px分の余白が左側に適用されています。
以上、CSSで書くmarginについて解説しました。
余白スペースを作る上では、marginは必須の知識となるのでぜひ自分で書いてみましょう。
同様にpaddingの書き方も紹介しているので、合わせてご覧ください。
各値の設定方法と、それによって反映される方向を実際に見てみたよ。
“margin-left”みたいに、ひとつの方向だけに余白を設定することもできるんですね。
マージンにはpxなどの長さの単位以外に、％を使ったり”auto”を値にしたりすることもできるんだ。どういうレイアウトにしたいかによって使い分けてみよう。
色んな方法を試してみます。ありがとうございました！
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。ぜひ自分で考えたWebデザインを実現しましょう！
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
