.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. HTML・CSS
  5. Bootstrapの余白を解説。マージンとパディングの違いとは?

Bootstrapの余白を解説。マージンとパディングの違いとは?

  • HTML・CSS
公開日時:   更新日時:
Bootstrapの余白を解説。マージンとパディングの違いとは?
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    最新情報や関心のある情報を毎日お届け。 FEnetメールマガジン メルマガ登録はこちらから>>

    サイトデザインを行うと必ず目にする「マージン」と「パディング」。どちらも余白を指定するときのプロパティですが、「とりあえず書いたら整った!」と理由なく使っている方も多いのではないでしょうか。今回は、マージンとパディングの違いを、Bootstrapを用いながら解説していきたいと思います。ぜひ、参考にしてみてください。

    システム
    エンジニア
    確かに、どっちがどっちだっけ?ってよく分からなくなりますね。
    プロジェクト
    リーダー
    大丈夫です。覚えやすい方法をお伝えするのでご安心ください。

    マージンとパディングの違い

    マージンは、ボックスの外側の余白です。ボックスをどこに設置するか、という位置を調整するために使用されるプロパティです。一方パディングは、ボックスの内側の余白です。パディングには「詰める」という意味があり、ボックス内のテキストや画像の位置を調整するために使用します。以下のようなイメージです。(青:マージン/グレー:パディング)

    マージンとパディング

    マージン・パディングどちらもデフォルトは「0」に設定されています。
    それぞれ何も設定していない場合は以下のようになります。

    ■マージン:未設定/パディング:設定
    マージン:未設定、パディング:設定

    ■マージン:設定/パディング:未設定
    マージン:設定、パディング:未設定

    何となく違いはお分かりいただけましたでしょうか。「マージン=ボックスの配置を調整、パディング=要素の余白を調整」と覚えておいてください。
    次項では、Bootstrapを使用してマージンとパディングを調整していきます。

    マージンとパディングを実際に設定してみよう

    前提
    ここではBootstrapを使用します。まだ導入していない方は、下記リンクよりダウンロードしてください。(CDNでも可)
    https://getbootstrap.jp/docs/4.3/getting-started/introduction/

    さっそく設定していくのですが、Bootstrapでは少し記述方法が異なります。例えばマージンは「m」・パディングは「p」という風にです。
    また、余白を入れる場所は以下のように記述します。

    • 上(top)→ t
    • 下(bottom)→ b
    • 右(right)→ r
    • 左(left)→ l
    • 上下 → y
    • 左右 → x

    また、ハイフンの後ろにどのくらいの余白を取るのかを設定していきます。
    Bootstrapでは、以下の0~5までの間で設定することができます。
    ※1rem=16px(デフォルト)

    0 0rem
    1 0.25rem
    2 0.5rem
    3 1rem
    4 1.5rem
    5 3rem

    これらを組み合わせ、以下のように記述します。

    • 上に0.25remのマージン → mt-1
    • 下に1remのパディング → pb-3
    • 左右に3remのマージン → mx-5

    アルファベットの頭文字を取れば良いだけなのでとても簡単ですね。
    実際のソースコードはこのようになります。

    ソースコード

    ソースコード

    結果
    実行結果

    このように、それぞれ指定した余白ができました。

    システム
    エンジニア
    マージンとパディングの違い、以前よりも分かるようになった気がします。
    プロジェクト
    リーダー
    ぜひ使い分けられるようになってくださいね。

    マージンは外、パディングは内

    使い分けに迷ってしまうマージンとパディングですが、今回で大分違いをご理解いただけたのではないかと思います。「マージンは外側の余白、パディングは内側の余白(詰め物を入れるみたいなイメージ)」と覚えてしまえば、もう迷うことはありません。この記事を参考に、ぜひ余白マスターになってくださいね。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job