【CSS Modules】negativeアットルール記述子の使い方

Copy
1/*
2 * システムエンジニア初心者向けCSSサンプルコード
3 * 負のマージン (Negative Margin) の使用例
4 */
5
6/*
7 * .negative-margin-example クラスは、負のマージンを適用して要素のレイアウトを調整する方法を示します。
8 * 通常、マージンは要素の外側の余白（スペース）を設定しますが、
9 * 負の値を指定することで、要素をその通常の位置から「引き戻したり」、
10 * 隣接する要素に「重ねたり」することができます。
11 */
12.negative-margin-example {
13  /* 要素の背景色とボーダーを設定し、要素の範囲を視覚的に分かりやすくします。 */
14  background-color: lightcoral; /* 明るい赤色 */
15  border: 1px solid red;      /* 赤色の1pxの線 */
16  width: 150px;                 /* 要素の幅を150ピクセルに設定 */
17  height: 80px;                 /* 要素の高さを80ピクセルに設定 */
18  display: inline-block;        /* 複数の要素を横に並べるために使用 */
19
20  /* ここから負のマージンの設定 */
21
22  /*
23   * margin-top に負の値を設定すると、要素が上方向に移動します。
24   * 例えば、-30pxは、要素を30ピクセル上方向に引き上げます。
25   * これにより、上の要素や前の行の要素と重なることがあります。
26   */
27  margin-top: -30px;
28
29  /*
30   * margin-left に負の値を設定すると、要素が左方向に移動します。
31   * 例えば、-20pxは、要素を20ピクセル左方向に引き寄せます。
32   * これにより、左隣の要素と重なることがあります。
33   */
34  margin-left: -20px;
35
36  /*
37   * 負のマージンは強力なレイアウト調整ツールですが、レイアウトの複雑性を増す可能性があるため、
38   * 慎重に使用し、様々なブラウザやデバイスでの表示を確認することが重要です。
39   * 不必要に多用すると、予期せぬレイアウト崩れの原因となることがあります。
40   */
41}

CSSのmarginプロパティは、要素の外側の余白を設定するために使用されます。通常は正の値を指定して要素同士の間隔を広げますが、「負のマージン」とは、marginにnegative（負）の値を指定することです。これにより、要素は通常の配置位置から指定された距離だけ引き戻され、隣接する要素や親要素の領域に重なる形で表示されます。

このサンプルコードでは、.negative-margin-example クラスを持つ要素に負のマージンを適用する方法を示しています。まず、background-color、border、width、height、display: inline-blockで要素の見た目と基本的なサイズを設定し、その範囲を視覚的に分かりやすくしています。

次に、margin-top: -30px; と設定することで、この要素が上方向に30ピクセル移動し、その上にある要素と重なる可能性があります。同様に、margin-left: -20px; と設定すると、要素は左方向に20ピクセル移動し、左隣の要素と重なることがあります。

CSSのプロパティであるマージンには、関数のような引数や、何らかの結果を返す戻り値という概念はありません。指定された負の値が直接要素のレイアウトに影響を与えます。

負のマージンは、要素を重ねて配置したり、特定の要素を他の要素の裏に隠したりするなど、複雑なレイアウトを調整する際に非常に強力なツールとなります。しかし、レイアウトの予期せぬ崩れや、ブラウザ・デバイス間での表示の差異を引き起こす可能性もあるため、使用する際は慎重に、そして複数の環境で十分に検証することが重要です。

Copy
1/*
2 * CSSのpaddingプロパティに負の値を指定することはできません。
3 * paddingは要素のコンテンツとボーダーの間の内側のスペースであり、
4 * 負の値は仕様上無効とされています。
5 *
6 * もし要素を重ねたり、互いに引き寄せたりする視覚的な効果を望む場合は、
7 * 代わりにmarginプロパティに負の値を指定します。
8 * marginは要素のボーダーの外側のスペースを制御するため、負の値が有効です。
9 */
10
11.container {
12  display: flex; /* 子要素を横並びにするためにFlexboxを使用 */
13  border: 2px solid #333;
14  padding: 20px; /* コンテナの内側には通常のパディングを適用 */
15  margin-bottom: 30px; /* 後続のコンテンツとの間にスペースを確保 */
16  width: 300px;
17  height: 100px;
18  background-color: #f0f0f0;
19  box-sizing: border-box; /* パディングとボーダーを幅に含める */
20}
21
22.item {
23  width: 100px;
24  height: 60px;
25  background-color: lightblue;
26  border: 1px solid steelblue;
27  display: flex;
28  align-items: center;
29  justify-content: center;
30  font-size: 0.9em;
31  color: #333;
32  box-sizing: border-box;
33}
34
35/* 負のマージンを使用して、前の要素に左から20px重ねる例 */
36.item.negative-left {
37  margin-left: -20px;
38  background-color: lightcoral;
39  z-index: 1; /* 重なり順を前面にする */
40}
41
42/* 負のマージンを使用して、前の要素に上から10px重ねる例 */
43.item.negative-top {
44  margin-top: -10px;
45  margin-left: -30px; /* さらに左に重ねる */
46  background-color: lightgreen;
47  z-index: 2; /* 最も前面にする */
48}
49
50/* 以下は、負のパディングを適用しようとした場合の例（効果はありません） */
51.item.invalid-padding {
52  /* paddingには負の値は適用されず、デフォルト値または0として扱われます */
53  padding: -10px;
54  background-color: #ffdddd;
55}

CSSのpaddingプロパティは、要素のコンテンツとボーダーの間の内側のスペースを定義します。このpaddingに負の値を指定することは、CSSの仕様上許可されていません。

もしpaddingに負の値を指定しても、それは無効と見なされ、通常は0として扱われるか、ブラウザのデフォルト値にフォールバックされます。そのため、サンプルコードの.item.invalid-paddingのように負の値を指定しても、要素の内側のスペースが縮小されたり、コンテンツがボーダーの外に飛び出したりするような視覚的な効果は得られません。

要素を重ね合わせたり、互いに引き寄せたりする視覚効果を期待する場合は、代わりにmarginプロパティに負の値を指定します。marginは要素のボーダーの外側のスペースを制御するため、負の値が有効です。負のマージンを使用すると、要素をその隣接要素の位置に食い込ませることができます。

サンプルコードでは、.item.negative-leftクラスでmargin-left: -20px;と指定し、前の要素に左から20px重ねて表示しています。同様に、.item.negative-topクラスではmargin-top: -10px;とmargin-left: -30px;を組み合わせて、上の要素や左側の要素に重ねる効果を実現しています。要素が重なる際の表示順はz-indexプロパティで制御でき、値が大きいほど手前に表示されます。

CSSのプロパティは、特定の引数を取ったり処理結果を返したりするものではなく、設定された値が直接的に要素の見た目に影響を与えます。