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

1つの宣言でCSSマージンプロパティを設定するにはどうすればよいですか？

CSSのmarginプロパティは、HTML要素の周囲にある余白（スペース）を定義します。負の値を指定することで、隣接するコンテンツ同士を意図的に重ねて表示することも可能です。

また、marginプロパティはショートハンド（省略形）プロパティとして機能し、上下左右それぞれのマージンを個別に宣言しなくても、たった1つの宣言だけでまとめて設定できます。

marginショートハンドの値の指定ルール

指定する値の数によって、適用される辺が変わります。

  • 値が1つの場合： 上下左右のすべての辺に同じ値が適用されます（例： margin: 20px;）
  • 値が2つの場合： 1つ目が上下、2つ目が左右に適用されます
  • 値が3つの場合： 上 → 左右 → 下の順に適用されます
  • 値が4つの場合： 上 → 右 → 下 → 左の順（時計回り）に適用されます

値には px のような絶対単位や、% のような相対単位、さらには負の値も使用できます。

記述例

以下のコードを実行して、1つの宣言でマージンを設定する方法を確認してみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "margin: 20px; border:2px solid yellow;">
         4辺すべてのマージンが20pxになります
      </p>
      <p style = "margin: 15px 4% -10px; border:2px solid red;">
         上マージンは15px、左右のマージンはドキュメント全体の幅の4%、
         下マージンは-10pxになります
      </p>
   </body>
</html>

この例では、最初の段落のように値を1つだけ指定すると全4辺に同じマージンが適用され、2つ目の段落のように3つの値を指定すると「上・左右・下」に個別の値が反映されることがわかります。

  1. CSSのanimationショートハンド（省略形）プロパティでアニメーションをまとめて設定する方法

    CSSでは、アニメーションに関するすべてのプロパティを一度に指定できるショートハンド（省略形）プロパティとして animation が用意されています。このプロパティを使うことで、アニメーションの再生時間（duration）やアニメーション名（name）、タイミング関数、遅延時間、繰り返し回数などを、1行のコードでまとめて設定できます。animationショートハンドの基本構文animation: アニメーション名 再生時間 タイミング関数 遅延時間 繰り返し回数 方向 塗りつぶしモード;最低限、「アニメーション名」と「再生時間」を指定すれば動作します。値の順序はある程度自由ですが、時間を表す

  2. 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プロパティの基本構文は以下のとおりです