Webで遊ぼ!

Web制作を
遊び感覚で。

MENU BOX
Webで
遊ぼ!
OPEN

ホーム

 > 

 > 

余白を設定しよう!(marginとpadding)

余白を設定しよう!(marginとpadding)


CSSで1番よく使われるプロパティと言えば何か?と聞かれたら、おそらくは今回紹介するmarginとpaddingだと答えます。
それぐらい使用頻度が高いので、marginとpaddingの違いを理解して、余白設定マスターになりましょう!

簡単なようでちょっと複雑!?

色々なWebサイトを見てみると、文章や画像などのコンテンツを見やすくするための様々な工夫がなされていることがわかります。その中の1つが適切な余白の設定です。
この記事も、左や右に寄りすぎず真ん中をキープしていると思います。(全てのブラウザ・バージョンで確認したわけではないので断言はしませんw)
いくら内容が充実していても、「配置が整っていなくて見にくい」というだけでWebデザインとしては致命的です。
そのため、CSSでまず何から覚えた方が良いか迷った場合は、今回紹介する余白設定(marginとpadding)からが良いです。

ただ、余白の設定は単純なようでかなり奥が深く、一朝一夕で簡単にマスターできるものではないということは頭に入れておいた方が良いかもしれません。
というのも、余白の調整はホームページ制作アシストソフトでも使わない限り、マウスのドラッグ&ドロップで感覚的にできるわけではなく、地道にCSSで細かく設定する必要があります。
そしてレイアウトによっては余白設定ではなく、positionプロパティや display:flex などで行なった方が良い場合も多いです。(※positionやdisplayについては別の回で説明します)

Web制作初心者の目標としては、まずは基本的な余白設定を覚えて「完璧じゃなくてもある程度見た目を整えられる」というあたりを目指すと良いと思います。
それでは、余白設定の仕方について説明していきます!


◆ margin(マージン)とは ◆

margin(マージン)プロパティは、要素の外側の余白の設定を調整するプロパティです。
margin-top, margin-right, margin-bottom, margin-left というふうに、4方向への余白の幅を設定することができます。
4方向すべて別々に設定しなくても、margin: 20px; と記述すると「上下左右にそれぞれ20pxの余白を設定」という意味になります。
また、margin: 20px 10px; というふうに値を2つ指定すると、「上下は20px、左右は10pxの余白を設定」となります。
さらに、margin: 20px 10px 15px 0; というように値を4つ指定すると、「上は20px、右は10px、下は15px、左は余白なし(0px)」となり、1行で4方向の余白を指定することが可能です。
※1度に指定する場合は、上から順に時計回りに指定されると覚えると分かりやすいです。

また、marginプロパティの値は単位が必須です。(0、auto指定の場合を除く)
以前の記事で紹介した単位(px、%、em、rem)は全て使用可能なのですが、まずは絶対単位の px で慣れてから相対単位での調整にチャレンジするとスムーズに習得できるのではないかと思います。

それでは、marginの基本を押さえたところでサンプルコードを見てみましょう!


HTML
<p>この文章の左の余白を30pxに設定</p>

CSS
     p {
        margin-left: 20px;
        background-color: lightyellow;
        width: fit-content;
      }

bockground-colorとwidthは、分かりやすくするための記述なので気にしないで下さい。
上記のコードを実行するとこのようになります。


この文章の左の余白を30pxに設定


いかがでしょうか?要素の左側に少し間隔ができたのが確認できますね。

また、marginプロパティの値では「auto」を指定することもできますが、auto指定にすると親要素の幅によって外側の余白が自動的に指定されます。
といっても、「コンピューターが人間にとって見やすいように、良い感じに間隔を計算してくれる」というような便利なものではありません。
margin: auto; は、要素を中央に配置したい場合などによく使うのですが、中央揃えについては他のやり方もあって、ここで説明するとかなり長くなるので別の回で詳しく説明します。

    POINT!
  1. ・margin(マージン)は要素の外側の余白を指定する!
  2. ・余白を指定できるのは上下左右の4方向!

◆ padding(パディング)とは ◆

paddingプロパティは、要素の内側の余白の設定を調整するプロパティです。
また、値の設定の仕方はmarginと全く同じなので割愛します。
唯一、 paddingプロパティがmarginプロパティと異なる点は、marginは要素の外側の余白を調整しますが、paddingは内側の余白を調整するという点だけです。

というか、要素の外側とか内側とか言われてもピンときませんよね。
百聞は一見にしかず。先程はmarginプロパティを使って要素の左側に余白をつけましたが、今度はpaddingプロパティで同じように要素の左側に余白をつけてみます。

それではまずは、コードの紹介からです。


HTML
<p>この文章の左の内側の余白を30pxに設定</p>

CSS
     p {
        padding-left: 20px;
        background-color: lightyellow;
        width: fit-content;
      }

marginの6文字がpaddingに変わったのと、文章中に「内側の」という文言を入れた他に変えたところはありません。
それでは、上のコードを実際に表示させてみましょう。


この文章の左の内側の余白を30pxに設定


左側に余白ができるのはmarginと同じですが、余白のでき方が違いますね。
marginは背景色(薄い黄色)のところに変化はなく、そのまま左側に余白ができていました。
一方、paddingは背景色のところが少し広がる形で左側に余白ができています。
より分かりやすくするために、marginで設定したものとpaddingで設定したものをくっつけて並べてみましょう。

上がmargin、下がpaddingです。


この文章の左の余白を30pxに設定


この文章の左の内側の余白を30pxに設定


細かい違いではありますが、違いは一目瞭然ですね。
このように、余白といってもどこを広げたいかによって使い分ける必要があります。

    POINT!
  1. ・paddingは要素の内側の余白を設定する!
  2. ・値の指定の仕方はmarginと全く同じ!

◆ marginが効かないパターン ◆

要素の配置調整にとても便利な margin・paddingですが、どんな場合にも使えるというわけではありません。
margin・paddingに限らず、一部の要素に一部のCSSが効かないということはよくあるので、全ての例外を覚えていたら正直キリがありませんし、全部覚える必要はありません。

ということで、今回は例外を2つに絞ってご紹介します。とりあえずこの2パターンだけ覚えてもらえたらWeb制作初心者としては上出来だと思います。

例外1:tableタグのtdやtrタグにmarginは効かない

tableタグを使った表は扱いが少々特殊になります。paddingでセルの内側の余白を広げることはできますが、marginで列・行間隔を調整することはできません。
以下のコードをご覧ください。表のセルにmarginとpaddingをそれぞれ設定していますが…


<table border="1" >
      <tr style ="margin-bottom:120px">
        <td style ="margin: 30px; padding:30px">セル1</td>
        <td style="margin: 30px; padding:30px">セル2</td>
      </tr>
    </table>

これを表示させるとこんな感じになってしまいます。

セル1 セル2

表のセルの内側は広がっていますが、セル同士の間隔が空かない=marginが効かない というのが分かりますね。
ちなみにですが、表の行や列の間隔を空けるためのCSSプロパティは別にちゃんと用意されています。

そしてもう1つ、margin・paddingが効かない例外を紹介します。

例外2:spanタグには縦方向のmarginが効かない

こちらも実際に見てもらおうと思います。

<span style="width: fit-content; height:50px; margin-top:100px; margin-left: 50px; background-color:lightyellow;">縦方向の間隔が空きません!</span>


上のコードでは、spanタグにmarginで左側と上側に余白を設定しています。
コードを表示させてみて、左側は効くのに上側は効かないことを確認してみましょう。
縦方向の間隔が空きません!
spanタグはインラインレベルのタグなのでこういうことがよく起こります。displayプロパティでspanタグをブロックレベルにすれば、効くようになります。

このように、marginとpaddingを始めとしたCSSプロパティはいつも、何に対しても効くわけではありません。「効かないな?」と思ったら、CSSプロパティの詳細を検索して、調べてみるクセをつけておくと良いです。

    POINT!
  1. ・margin、paddingを始めとしたCSSは全てに効くわけではない!
  2. ・インラインレベルとブロックレベルの違いに要注意!

ワンポイントチェック

要素と要素の上下の間隔を空ける方法には、marginやpadding以外にも「改行を入れる」という方法もありますが、基本的に改行( < br > タグ)で見た目を整えることはお勧めしません。
もちろん、同じ文章の要素の途中で改行タグを入れて一行空けることは何の問題もありません。そうではなくて、画像と画像の間を空けるのに改行で調整したり…ということがNGなのです。
では、なぜ改行で上下の間隔を空ける(見た目を整える)ことがダメなのでしょうか?

大きな理由の1つに、「間隔の広さを調整できない」というものがあります。

marginなどを使えばpx単位で間隔の大きさの微調整が可能ですが、改行だとそうはいきません。
Webページが一通り完成した後で、クライエントさんから「やっぱり、AとBの間隔をもう少し空けたい(狭めたい)ので修正お願いします。」ということはよくあります。
こんな時、最初からmarginで調整していたらCSSの値を少し変えるだけで済みますが、改行で調整していたら改行を削除して改めてmarginを設定するしかありません。ハイパー面倒くさい2度手間になってしまいます。
改行を入れるぐらいなら、高さを設定した < div > タグを要素と要素の間に入れて、その高さによって微調整を入れた方がまだやりやすいです。

今回の動画で紹介したコード!

今回の解説動画で使用したコードを掲載しています。
学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)
HTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/css4.css">
  </head>
  <body>
    <p class="hellow">こんにちは</p>
    <p class="sentence">上の文章との間隔をあけたい。</p>
  </body>
</html>

CSS

.hellow {
  background-color: skyblue;
  padding: 100px;
}

.sentence {
  background-color: pink;
  width: fit-content;
  margin: 0 auto;
}

»

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
RO・Y・DO(rowaido)

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン