もう迷わない！CSS marginとpaddingの省略記法をマスターするための完全ガイド

2024-04-08

CSS marginとpaddingの省略記法を覚えるための記憶術

しかし、省略記法の順番を覚えるのは難しいと感じる人もいるでしょう。そこで、今回は**「CSS marginとpaddingの省略記法を覚えるための記憶術」**をご紹介します。

語呂合わせ

"Top Right Bottom Left" の頭文字を取って TRBL と覚える方法です。これは、marginとpaddingの省略記法で、それぞれ上、右、下、左の順に値を設定することを表しています。

例：

/* 全ての方向に10pxの余白を設定 */
margin: 10px;
padding: 10px;

/* 上下に10px、左右に20pxの余白を設定 */
margin: 10px 20px;
padding: 10px 20px;

/* 上下に10px、左右はそれぞれ5pxと30pxの余白を設定 */
margin: 10px 5px 10px 30px;
padding: 10px 5px 10px 30px;

方角と関連付け

東西南北とmargin、paddingを関連付ける方法です。

東：margin-right
南：margin-bottom

と覚えます。

イメージ

封筒をイメージする方法です。

封筒の外側の余白がmargin、内側の余白がpaddingとなります。封筒の上下左右にTRBLを当てはめて、それぞれの位置を覚えます。

手のひら

手のひらを上にして、指が右、左、親指が下となります。手のひらの中心が上、指の付け根が左右、手のひら全体が下と考えると、marginとpaddingの位置を覚えることができます。

自分に合った方法を選ぶ

これらの方法の中で、自分に合ったものを選んでください。いくつか試してみて、一番覚えやすい方法を見つけるのも良いでしょう。

CSSのmarginとpaddingの省略記法は、4つの値を順番に記述する必要があります。今回紹介した記憶術を活用することで、順番を簡単に覚えることができます。

練習を重ねることで、省略記法をスムーズに使いこなせるようになり、CSSの記述をより効率化できるでしょう。

/* 全ての方向に10pxの余白を設定 */
body {
  margin: 10px;
  padding: 10px;
}

例2：特定の要素に異なる余白を設定

/* 見出し要素に上と下に20px、左右に10pxの余白を設定 */
h1 {
  margin: 20px 10px;
  padding: 20px 10px;
}

/* 段落要素に上と下に10px、左右に5pxの余白を設定 */
p {
  margin: 10px 5px;
  padding: 10px 5px;
}

例3：負の値を使用して要素を内側に配置

/* 画像要素を左右に10pxずつ内側に配置 */
img {
  margin: 0 -10px;
}

例4：中央寄せ

/* 要素を水平方向に中央寄せ */
.container {
  margin: 0 auto;
}

例5：ボックスモデル

/* ボックスモデルを理解するために、要素の各部分の余白を異なる色で表示 */
.box {
  border: 1px solid black;
  margin: 10px;
  padding: 20px;

  /* 各部分の余白を異なる色で表示 */
  margin-top: red;
  margin-right: green;
  margin-bottom: blue;
  margin-left: yellow;
  padding-top: orange;
  padding-right: purple;
  padding-bottom: pink;
  padding-left: cyan;
}