CSSテンプレート：マージン・パディング調整クラス
📝 使用用途
このテンプレートは、上下の余白（margin/padding）を調整したいときに使います。あらかじめ定義したクラスを使えば、何度でも簡単に再利用できます。
📘 解説
.mt-10 は margin-top: 10px、.mb-20 は margin-bottom: 20px を意味します。同様に .pt-10 や .pb-20 なども用意しておけば、HTML内での調整が楽になります。
✅ デモ
📄 コード（部分）
<style>
.mt-10 { margin-top: 10px; }
.mb-20 { margin-bottom: 20px; }
.pt-10 { padding-top: 10px; }
.pb-20 { padding-bottom: 20px; }
.box {
background: #f2f2f2;
padding: 1rem;
border: 1px solid #ccc;
}
</style>
<div class="box mt-10 mb-20">マージン付き</div>
<div class="box pt-10 pb-20">パディング付き</div>
📦 コード（HTML全体）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>マージン・パディング調整クラス</title>
<style>
.mt-10 { margin-top: 10px; }
.mb-20 { margin-bottom: 20px; }
.pt-10 { padding-top: 10px; }
.pb-20 { padding-bottom: 20px; }
.box {
background: #f2f2f2;
padding: 1rem;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box mt-10 mb-20">上に10px、下に20pxのマージンを持つボックス</div>
<div class="box pt-10 pb-20">内側の上に10px、下に20pxのパディング</div>
</body>
</html>
📐 ユーティリティクラスの体系的な活用方法
マージン・パディング用のユーティリティクラスは、CSS設計の効率化に大きく貢献します。一貫した命名規則でクラスを定義することで、プロジェクト全体で統一されたスペーシングを実現できます。
📏 体系的なクラス命名のすすめ
クラス名の規則を{property}{direction}-{size}と統一すると理解しやすくなります。例えば.mt-16は「margin-top:16px」、.px-24は「padding-leftとpadding-right:24px」を意味します。サイズは4pxや8pxの倍数(4,8,12,16,20,24,...)で揃えると、デザインの統一感が生まれます。
🛠️ 実践的な拡張例
左右一括指定の.mx-auto(margin-left/right:auto)や、全方向の.m-16(margin:16px)なども追加すると便利です。レスポンシブ対応には.md:mt-20のようにブレークポイントをプレフィックスにしたクラスを定義します。また、rem単位(.mt-2rem)や%指定(.w-50%)のバリエーションも状況に応じて追加可能です。
⚖️ 適切な使用バランス
ユーティリティクラスは便利ですが、コンポーネント単位でのCSS設計と組み合わせることが重要です。個別のコンポーネント内では詳細なスタイルを定義し、レイアウト調整や微調整にのみユーティリティクラスを使用すると、メンテナンス性の高いコードになります。また、!importantの使用は極力避け、CSSの詳細度を適切に管理しましょう。
これらのテクニックを駆使すれば、デザインシステム全体の一貫性を保ちつつ、柔軟なレイアウト調整が可能になります。ただし、プロジェクトの規模やチームの慣習に合わせて、適切な粒度でクラスを設計することが肝心です。