CSSのマージン短縮プロパティ（shorthand）の使い方｜基本構文と実例コードを解説
CSSのマージン短縮プロパティとは？
CSSのマージン短縮プロパティ（margin shorthand）は、要素の外側の余白（マージン領域）をまとめて定義するためのプロパティです。margin-top、margin-right、margin-bottom、margin-leftを個別に指定する代わりに、1つのmarginプロパティだけで一括設定できます。
値は時計回りの順序で適用されます。つまり、「上（margin-top）→ 右（margin-right）→ 下（margin-bottom）→ 左（margin-left）」の順です。
構文
CSSのmarginプロパティの基本構文は以下のとおりです。
セレクタ {
margin: /* 値 */;
}値の個数による指定方法の違い
marginプロパティは、指定する値の個数によって適用される辺が変わります。このルールを覚えておくと、コードを簡潔に書けるようになります。
- 値が1つ：全4辺に同じ値が適用される（例：
margin: 10px;） - 値が2つ：1つ目が上下、2つ目が左右に適用される（例：
margin: 10px 20px;） - 値が3つ：上、左右、下の順に適用される（例：
margin: 10px 20px 30px;） - 値が4つ：上、右、下、左の順（時計回り）に適用される（例：
margin: 10px 20px 30px 40px;）
また、左右にautoを指定すると、要素を中央揃え（センタリング）できます。さらに負の値（マイナスマージン）を使えば、要素同士を意図的に重ねるといった高度なレイアウト調整も可能です。
実例1：入れ子のdiv要素にマージンを指定
以下の例では、入れ子構造になったdiv要素に対して、マージン短縮プロパティで異なる値（パーセント値・auto・負の値など）を設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 7% auto -3% 25%;
width: 40px;
height: 40px;
padding: 0.9rem;
box-shadow: inset 0 0 50px turquoise;
border: thin solid;
}
div > div {
border-top-right-radius: 100px;
border-bottom-right-radius: 500px;
border-top-left-radius: 30px;
box-shadow: inset 0 0 6px navy;
}
div > div > div {
padding: 0.3em;
margin: 2px -40px;
box-shadow: inset 0 0 16px orange;
border-radius: 50%;
}
#one {
padding: 50px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="one">
<div>
<div></div>
</div>
</div>
</body>
</html>
表示結果
この例では、外側のdivにmargin: 7% auto -3% 25%;を指定することで、上7%、左右はautoによる中央配置、下に-3%、左に25%のマージンが適用されます。また、最も内側のdivではmargin: 2px -40px;により負のマージンを使って要素を重ねて表示しています。
実例2：article要素とspan要素にマージンを指定
次の例では、article要素にmargin: 2em 1em;（上下2em、左右1em）を指定し、span要素には負の値と大きなパーセント値を組み合わせたマージンを設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 2em 1em;
background-color: bisque;
}
span {
margin: -23% 83%;
border-left: dashed;
background-image: linear-gradient(to right, lightgreen, forestgreen);
font-size: 1.4em;
font-style: italic;
}
</style>
</head>
<body>
<h2>Spring Frameworkとは？</h2>
<article>
SpringフレームワークはオープンソースのJavaプラットフォームです。Rod Johnsonによって最初に執筆され、2003年6月にApache 2.0ライセンスのもとで初めてリリースされました。<span> Springはサイズと透過性の面で軽量です。Springフレームワークの基本バージョンは約2MBです。</span>
</article>
</body>
</html>
表示結果
span要素のmargin: -23% 83%;により、負の上マージンでテキストを上方向に引き上げ、大きな左右マージンで表示位置を調整しています。このように短縮プロパティを使えば、複数の辺の余白を1行で柔軟にコントロールできます。
まとめ
margin短縮プロパティを活用すると、CSSコードをすっきりと短く記述でき、メンテナンス性も向上します。「値は時計回りに適用される」「値の個数で適用される辺が変わる」という基本ルールを押さえておけば、レイアウト調整の効率が格段に上がります。負の値やautoも組み合わせれば、より自由度の高いデザインが実現できるでしょう。
-
CSSのoutlineショートハンドプロパティとは？構文と使い方を実例付きで解説
CSS outlineショートハンドプロパティとは？ outlineショートハンドプロパティを使うと、要素の境界線の外側に、スタイル（必須）・太さ・色を指定した線をまとめて定義できます。borderプロパティとは異なり、outlineは要素の寸法（幅や高さ）に含まれないため、レイアウトに影響を与えずに輪郭線を表示できるのが大きな特徴です。 構文 CSS outlineショートハンドプロパティの構文は次のとおりです。 Selector { outline: /*値*/ } 指定できる値 outline-width：線の太さ（thin / medium / thic
-
CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード
CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。 また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。 border-styleで指定できる主な値 none / hidden … 枠線を表示しない solid … 1本の実線 double … 2本の二重線 da