CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで要素の各辺に個別のマージンを設定する方法

CSSを使うと、要素の上下左右それぞれの外側の余白（スペース）を個別に制御することができます。CSSの margin プロパティは一括指定（ショートハンド）プロパティであり、以下の個別プロパティをまとめて設定できます。

  • margin-top（上側のマージン）
  • margin-right（右側のマージン）
  • margin-bottom（下側のマージン）
  • margin-left（左側のマージン）

構文（シンタックス）

CSS の margin 関連プロパティの基本的な記述形式は次のとおりです。

Selector {
   margin-top: /*値*/
   margin-right: /*値*/
   margin-bottom: /*値*/
   margin-left: /*値*/
}

値には、px や em、% などの長さ単位のほか、auto や負の値（ネガティブマージン）も指定できます。以下の例では、各辺のマージンを個別に設定する方法を紹介します。

サンプルコード 1：テキストブロックでマージンを個別に指定する

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin-left: auto;
   margin-bottom: 4em;
   width: 30%;
   padding: 0.6rem;
   box-shadow: inset 0 0 3px turquoise;
   outline: thin dotted;
   text-align: center;
}
div + div {
   margin-right: 30%;
   box-shadow: inset 0 0 6px teal;
}
div + div + div {
   margin-left: 45%;
   margin-top: -190px;
   box-shadow: inset 0 0 6px orange;
}
</style>
</head>
<body>
<div>
This is demo text
</div>
<div>One (different margins)</div>
<div>Two (different margins)</div>
</body>
</html>

表示結果

CSSで要素の各辺に個別のマージンを設定する方法

この例では、margin-left: auto; によって最初の div 要素が右寄せされ、兄弟セレクタ（+）を使って2番目・3番目の要素に異なる左右のマージンを適用しています。また、3番目の要素には margin-top: -190px; という負の値を指定することで、上方向に引き上げて重ねて配置しています。

サンプルコード 2：角丸ボックスと組み合わせたマージンの指定

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin-top: 7%;
   margin-left: 25%;
   margin-bottom: -3em;
   width: 40px;
   height: 40px;
   padding: 0.6rem;
   box-shadow: inset 0 0 3px turquoise;
   border-top-right-radius: 100px;
}
div + div {
   margin-right: 30%;
   border-top-right-radius: unset;
   border-top-left-radius: 100px;
   box-shadow: inset 0 0 6px teal;
}
div + div + div {
   margin-left: 25%;
   margin-top: -140px;
   box-shadow: inset 0 0 6px orange;
   border-bottom-right-radius: 100px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

表示結果

CSSで要素の各辺に個別のマージンを設定する方法

このように、margin-top・margin-right・margin-bottom・margin-left を個別に組み合わせることで、要素ごとに柔軟なレイアウトを実現できます。特に負のマージンを活用すると、通常のフローレイアウトでは難しい要素の重なり表現なども可能になります。

  1. CSSの絶対配置（position: absolute）とは？使い方をサンプルコードで解説

    CSSにおける絶対配置（absolute positioning）とは、要素を「static以外のpositionプロパティが設定された、最も近い祖先要素」を基準として配置する方法です。position: absolute;を指定した要素は、top・right・bottom・leftといったオフセットプロパティを使って正確な位置を決定できます。絶対配置された要素は通常のドキュメントフローから取り除かれるため、他の要素のレイアウトには影響を与えません。この特性を活かすことで、要素の重ね合わせや中央寄せなど、柔軟なレイアウトが実現できます。サンプルコード1：絶対配置で要素を中央に配置する以下は、C

  2. CSS Flexboxでアイテムに固定幅を設定する方法

    はじめにCSSのflexプロパティは、フレックスコンテナ内のアイテムのサイズを柔軟に制御できる強力なツールです。このプロパティを活用することで、アイテムを自由に伸縮させたり、逆に固定幅を維持させたりすることが可能になります。本記事では、flexプロパティの基本的な構文と、実際のコード例を通じて、フレックスアイテムに固定幅を設定する方法を詳しく解説します。 CSS flexプロパティの構文 CSSのflexプロパティは、次のように記述します。 Selector {     flex: /*値*/ } flexプロパティには、主に以下の3つの値を組み合わせ