【今すぐ無料で試す】ゼロから始める定額・学び放題のプログラミング学習サービス「侍テラコヤ」

【図解】margin/paddingとは?違い・覚え方・使い分ければいいのか分かりやすく解説

HTMLとCSSを知っている人

CSSで余白を作りたい場合、「margin」と「padding」を使用します。

 

「margin」は境界線の外側の余白を作る際に使用して、「padding」は境界線の内側の余白を作る際に使用します。

 

paddingとmarginが、どちらも余白を指定するCSSのプロパティだということは分かっても、非常に多くの方が混同してしまっています。

 

しかし実は、paddingとmarginがいったいどこの余白を設定しているかは図にすれば簡単に理解できます。

 

そこでこの記事では図解を交えて「margin」と「padding」をどのように使い分ければいいのかを分かりやすく解説していきます。

 

気になる方は是非最後まで読んで頂ければと思います。

 




 

marginとpaddingとは? 覚え方・使い分けを解説!

 

まずはじめにpadding(パディング)とmargin(マージン)にはどのような役割があるのか見ていきましょう。

 

「margin」と「padding」は両方とも余白をつくるためのプロパティですが、余白を作る場所が異なります。

 

プロパティでは、セレクタで選んだ要素の色や背景の色などといった、「要素の特性」を表します。

 

今回の場合では、セレクタで選んだ要素の余白を作るという特性をpaddingとmarginを使って表します。

 

余白を作るという特性は同じでもpaddingとmarginには大きな違いがあります。

 

marginとpaddingの違い
  • margin:外側に余白を作る
  • padding:内側に余白に作る

 

まずはmarginとpaddingとは何かボックスを用いてお話していきたいと思います。

 

 

 

内側と外側の境界線となっているのが「ボーダー」と呼ばれるものです。

 

「ボーダー」の外側に余白を作るプロパティを「margin」と呼び、「ボーダー」の内側に余白を作るプロパティを「padding」と呼びます。

 

この段階ではピンときていなくても、実際に余白を作ってみるとわかることもあります。

 

ぜひここから読み進めていく中で、自分自身でもコードを書いてみてください。

 




 

HTML&CSS事典を欲しい方必見(kindle unlimitedだと無料で読めます)

 

HTMLとCSSを知っている人

本書はHTMLの要素(タグ)とCSSのプロパティを解説したリファレンスです。

 

開きやすく手元に置きやすいB6判で、タグやプロパティの内容をサッと調べることができます。

 

タグやプロパティの解説だけでなく、基礎知識編ではHTMLやCSSの仕様、記述方法に加え、文字参照、URLといったWeb制作者として不可欠な知識も解説しています。

 

また、読者特典として、本書で使用しているサンプルコードをダウンロードできます。

 

 

HTML&CSSを学びたい方必見

 

HTMLとCSSを知っている人

本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。

 

現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。

 

実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。

 

 




 

marginの使い方

 

marginで余白を設定・調整することによりコンテンツ間に適切な余白を設け、見やすさ・読みやすさを向上させることができます。

 

なお、marginは「領域間」の余白を調整します。

 

領域間余白とは、要素と要素の間やコンテンツ同士の間など、「要素のエリア外の余白」を指します。

 

「margin」を利用して上下左右をそれぞれ設定する場合と上下左右を一括設定する場合の2つの方法があります。

 

marginのプロパティに指定できる値

 

marginは「px」と「%」で指定することができます。

 

値は半角スペースで区切って複数設定することができます。

 

 




 

上下左右をそれぞれ設定する場合

 

プロパティ名 説明
margin-top 上のマージン
margin-bottom 下のマージン
margin-right 右のマージン
margin-left 左のマージン

 

それでは上記のプロパティを利用してマージン設定をしていきましょう。

 

上のマージンを30px・下のマージンを30pxと設定したい場合、以下のようなソースコードとなります。

 

p {

 margin-top: 30px;

 margin-bottom: 30px;

}

 




上下左右を一括設定する場合

 

プロパティ名 説明
margin 上下左右のマージン

 

それでは上記のプロパティを利用してマージン設定をしていきましょう。

 

上のマージンを30px・下のマージンを30pxと設定したい場合、以下のようなソースコードとなります。

 

p {  

 margin: 30px 0 30px 0;

}

 

上下左右を一括設定できるmarginはプロパティ値を半角スペースで区切ることで上下左右自由に設定することができます。

 

marginの上下左右の設定方法は以下の通りです。

 

marginの指定場所 指定例
上下左右 margin: 30px;
上下 左右 margin: 30px 30px;
上 左右 下 margin: 30px 10px 30px;
上 右 下 左 margin: 30px 10px 30px 10px;

 

marginの注意点

 

各要素間でmarginで余白を設定している時、外部余白は足し算になるのではなくどちらか大きい方の余白が採用されることに注意してください。

 

例えば見出しのh2の下側にmarginが60px、文章のpタグの上側にmarginが30pxあるとします。

 

この場合h2タグとpタグの間に合計90px空くようなイメージがありますが、marginの相殺という特徴によって60pxしか余白が生まれません。

 

 




 

paddingの使い方

 

要素の余白を調整するには、paddingプロパティで調整幅を指定します。

 

paddingで余白を設定・調整することによりコンテンツ間に適切な余白を設けたり、文字の飾り付けやレイアウトを調整する際に重宝します。

 

なお、marginと違いpaddingは領域内の余白を調整します。

 

「padding」を利用して上下左右をそれぞれ設定する場合と上下左右を一括設定する2つの方法があります。

 

marginのプロパティに指定できる値

 

paddingは「px」と「%」で指定することができます。

 

値は半角スペースで区切って複数設定することができます。

 

 




 

上下左右をそれぞれ設定する場合

 

プロパティ名 説明
padding-top 上のパディング
padding-bottom 下のパディング
padding-right 右のパディング
padding-left 左のパディング

 

それでは上記のプロパティを利用してマージン設定をしていきましょう。

 

上のパディングを30px・下のパディングを30pxと設定したい場合、以下のようなソースコードとなります。

 

p {

 padding-top: 30px;

 padding-bottom: 30px;

}

 




 

上下左右を一括設定する場合

 

プロパティ名 説明
padding 上下左右のパディング

 

それでは上記のプロパティを利用してパディング設定をしていきましょう。

 

上のパディングを30px・下のパディングを30pxと設定したい場合、以下のようなソースコードとなります。

 

p {  

 padding: 30px 0 30px 0;

}

 

上下左右を一括設定できるpaddingはプロパティ値を半角スペースで区切ることで上下左右自由に設定することができます。

paddingの上下左右の設定方法は以下の通りです。

 

paddingの指定場所 指定例
上下左右 padding: 30px;
上下 左右 padding: 30px 30px;
上 左右 下 padding: 30px 10px 30px;
上 右 下 左 padding: 30px 10px 30px 10px;

 




 

【実践編】レンタルサーバーにファイルをアップロードしてみましょう!

 

HTMLやCSSで使ったファイルをレンタルサーバーにアップロードすることでインターネット上にWebサイトが公開されます。

 

今までローカル環境でしか見れなかったWebサイトがインターネット上に公開されるとわくわくしますよね!

 

余裕がある方はレンタルサーバーにファイルをアップロードしてみましょう。

 

無料お試し期間もあるので是非レンタルサーバーを利用して学習してみてはいかがでしょうか!?

 

HTMLとCSSを知っている人

月額100円程度で利用できるおすすめのレンタルサーバーとして以下のものがあげられます。

 

 

 




 

格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

 

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

 

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

 

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

 

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

 

HTMLとCSSを知っている人

以下のプログラミングスクールもオススメです。

 

是非検討してみてはいかがでしょうか?

 

  1. 侍テラコヤ初月50%OFF学び応援キャンペーン実施中)(解説記事はこちら
    学び応援キャンペーンでお得に申し込む!
    ・コスパ最高! 月額2,980円〜利用できる!
    ・単月定額と比べて総額最大44,400円OFF!

    ・学び応援キャンペーン実施中!
  2. ZeroPlus Gate受講料98,000円がなんと0円!)(解説記事はこちら
    受講料0円でプログラミングを学ぶ!
    ・受講料0円
    ・現役エンジニアに質問し放題
    ・30日で副業レベルのWebスキルを学べる
  3. 本気のパソコン塾無料体験特典3つあり解説記事はこちら
    7日間無料体験または無料相談会に申し込む!
    ・実際に役立つウェブデザイン、ウェブプログラミングを身につけることができる
    ・【期間限定】無料相談会参加特典3つあり!

    ・7日間無料体験・無料相談会実施中!

 

 




 

まとめ

 

HTMLとCSSを知っている人

最後まで読んで頂きまして、ありがとうございました。

 

CSSでmarginとpaddingはよく使用するプロパティとなっているので、しっかりと理解しておく必要があります。

 

途中で分からないことがあり、中々進まないこともあると思います。

 

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です