ネガティブマージン関数の紹介と使用方法の概要

1998 年の CSS2 勧告の時点で、テーブルは徐々に舞台から消え、歴史の中に記録されるようになりました。このため、CSS レイアウトはエレガントなコーディングと同義になりました。
デザイナーが使用してきたすべての CSS コンセプトの中で、負のマージンはおそらく最も話題に上らない配置方法です。誰もが使用しているが、誰も議論しないタブーのようなものです。
1. マイナスマージンを「回復」する
私たちは皆、CSS でマージンを使用しますが、マージンを負の数に設定するのは難しい場合があります。 Web デザインでは、ネガティブマージンの使用に対する人々の態度は大きく異なり、それを好む人もいれば、悪魔の所業だと考える人もいます。
負のマージンは次のように設定されます。

コードをコピー

コードは次のとおりです。

#コンテンツ {左マージン:-100px;}

マイナスのマージンはほとんど使用されませんが、すぐにそれが多くのことを可能にすることがわかります。マイナスマージンについて注意すべき点がいくつかあります。
A. 負のマージンは絶対的に標準的なCSSです
これは冗談ではありません。 W3Cは、マージン属性に負の値が許容されることを指摘しました。これがNuffが言ったことです
B. ネガティブマーリングはハック手法ではないというのは全くその通りです。ネガティブマーリングに対する理解が不足しているから、あるいはハックのように見えるからというだけで、それをハック手法だと考えてはいけません。他の場所で犯した間違いを修正するために使用する場合を除きます。
C. ドキュメントフローを中断せず、フロートを使用しない場合、負のマージン要素によってページのドキュメントフローが中断されることはありません。したがって、負のマージンを使用して要素を上に移動すると、後続のすべての要素も上に移動します。
D. 完全な互換性すべての最新ブラウザは負のマージンを完全にサポートしています (IE6 もほとんどの場合サポートしています)。
E. フローティングは負のマージンの使用に影響します。負のマージンは毎日使用する CSS プロパティではないため、適用する際には注意が必要です。
F. Dreamweaverは負のマージンを解釈しません
DW のデザインビューでは、負のマージンが解釈されません。しかし、なぜデザインビューで Web サイトをチェックする必要があるのでしょうか?
2. マイナスマージンを使う
負のマージンは、適切に使用すれば非常に強力なプロパティです。負のマージンが優先されるシナリオを 2 つ示します。
静的要素の負のマージンプロパティ

デオデザイン

静的要素は、フロートに設定されていない要素です。次の図は、静的要素に対する負のマージンの影響を示しています。静的要素の margin-top/margin-left に負の値が割り当てられると、要素は指定された方向に引っ張られます。例えば：

コードをコピー

コードは次のとおりです。

/* 要素を 10px 上に移動する */
#mydiv1 {マージン上部:-10px;}

ただし、margin-bottom/right を負の数に設定すると、要素は期待どおりに下/右に移動せず、後続の要素がドラッグされて元の要素を覆います。

コードをコピー

コードは次のとおりです。

/*
* #mydiv1 の後続の要素は 10px 上に移動しますが、#mydiv1 自体は移動しません。
*/
#mydiv1 {マージン下部:-10px;}

width 属性が設定されていない場合、負の margin-left/right を設定すると、要素が対応する方向にドラッグされ、幅が増加します。このとき、マージンはパディングのように機能します。
3. フローティング要素の負のマージン
次の状況を考えてみましょう
html

コードをコピー

コードは次のとおりです。

フロート要素に反対方向に負のマージンを与えると、行間隔がゼロになり、コンテンツが重なり合います。これは、1 つの列の幅が 100% で、他の列の幅が固定 (例: 100 ピクセル) である適応型レイアウトを作成するのに非常に便利な方法です。

コードをコピー

コードは次のとおりです。

/* float の反対方向に負のマージンを適用 */
#mydiv1 {float:left; margin-right:-100px;}

両方の要素がフロートされている場合、#mydiv1 要素は margin-right を 20px に設定します。こうすることで、#mydiv2 は #mydiv1 が元の幅より 20 ピクセル短いと認識します (そのため、重なり合うことになります)。しかし興味深いのは、#mydiv1 のコンテンツは影響を受けず、元の幅を維持していることです。
負のマージンが実際の幅と等しい場合、要素は完全に覆われます。これは、要素の全幅がマージン、パディング、境界線、幅の合計に等しいため、負のマージンが残りの 3 つの合計に等しい場合、要素の実際の幅は 0px になるからです。
4. 実践的なスキル
負のマージンの使用は CSS2 準拠のコードであることがわかっているので、この機能を使用していくつかの興味深い CSS テクニックを作成できます。
3列の単一の<ul>を作成する

デオデザイン

アイテムのリストが長すぎて縦に表示できない場合は、代わりに列に分割してみてはいかがでしょうか。負のマージンを使用すると、フロートやタグを追加せずにこの効果を実現できます。以下に示すように、このような簡単な操作でコレクションを 3 つの列に分割できるのは驚くべきことです。
html

コードをコピー

コードは次のとおりです。

コードをコピー

コードは次のとおりです。

ul {リストスタイル:なし;}
li {行の高さ:1.3em;}
.col2 {左マージン:100px;}
.col3 {左マージン:200px;}
.top {margin-top:-2.6em;} /* 決め手 */

topクラスに margin-top:-2.6em (<li> タグの行の高さの 2 倍) を設定すると、すべての要素が完全に揃います。各 <li> の相対位置を設定する代わりに、各列の最初のタグに負のマージンを適用するだけで、より適切に収まるようになります。すばらしいと思いませんか?
重なりを利用して強調する

デオデザイン

要素を意図的に重ね合わせることも、奥行き感を演出し、特定の要素を強調する優れたデザイン手法です。その良い例は、オーバーレイ技術を使用してレビューの数を強調表示する Phlashers.com のレビューセクションです。負のマージン、z-index プロパティ、そして少しの創造性があれば、あなたもそれを実現できます。
優れた3Dテキスト効果

デオデザイン

Safari フォントに似たものを作成する賢い方法は次のとおりです。2 つの色を使用して、わずかに傾いた 2 つの同一のテキストを作成し、負の余白を使用して 1 ～ 2 ピクセルの差を残して 1 つのテキストをもう 1 つのテキストに重ねます。これで、オプションのロボット対応テキストができました。容量が大きく、帯域幅を消費する jpeg や gif はもう必要ありません。
シンプルな 2 列レイアウトネガティブマージンも、シンプルな 2 列のアダプティブレイアウトを作成するのに適した方法です。 2 列のレスポンシブレイアウトは、100% リキッド幅のコンテンツ列と固定幅のサイドバーを持つレイアウトです。
html

コードをコピー

コードは次のとおりです。

<div id="content"> <p>メインコンテンツはここ</p> </div>
<div id="sidebar"> <p>私はサイドバーです! </p> </div>

コードをコピー

コードは次のとおりです。

#content {幅:100%; フロート:左; 右マージン:-200px;}
#サイドバー {幅:200px; フロート:左;}

これで、IE6 でも問題なく動作するシンプルな 2 列レイアウトが完成しました。ここで、#sidebarが#contentのテキストに隠れないようにするには、

コードをコピー

コードは次のとおりです。

/* テキストが重ならないようにする */
#コンテンツ p {マージン右:210px;}
/* 200px + 10px で、10px は間隔です */

適切に使用すれば、負のマージンをテーブルタグに完全に置き換えて、柔軟なドキュメント構造を形成できます。この構造は、タグをほぼ任意の順序で配置できるアクセシビリティ SEO テクニックです。
要素の位置を微調整する<br />これは、ネガティブマージンの最も一般的に使用される最も簡単な方法です。 9 つの div の間に 10 番目の div を挿入すると、何らかの理由で div が揃わない場合があります。負のマージンを使用すると、他の 9 つの要素を変更せずに、10 番目の div のみを微調整できます。
5. バグ修正<br />テキストとリンクの問題フローティング要素が負のマージンを使用すると、一部の古いブラウザで問題が発生する場合があります。症状は次のとおりです。
リンクはクリックできません。
テキストを選択するのが難しい。
フォーカスを失うと、タブ内のリンクはすべて消えます。
解決策: 要素に position:relative を追加すると、正常に動作するようになります。
画像が切り捨てられる不幸にしてオフィスで IE6 を使用している場合、重なり合った要素やフローティング要素のコンテンツが突然切り捨てられることがあります。
解決策: 同様に、フローティング要素に position:relative を追加すると、すべてが正常に戻ります。
6. まとめ
マイナスマージンは、余分なマークアップを追加せずに要素を配置できるため、現代の Web デザインで定着しています。より多くのユーザーがブラウザ（IE8 を含む）をアップグレードするにつれて、このテクノロジの将来は非常に明るくなり、より多くの Web サイトがこれに依存するようになります。
マイナスマージンに関する特別な経験があれば、メッセージを残して教えてください。

1. タブにおける負のマージンの適用
2. ネガティブマージンとネガティブ変位技術の応用：
3. 負のマージンを使用して、適応型の左右レイアウトを作成します。このタイプのレイアウト効果 (左側に固定画像、右側にコンテンツ) の場合、負のマージンでフロートレイアウトを置き換え、左右レイアウト計画を実行し、フロートにはない適応型効果を得ることができます。この例を確認するには、「Weder」ボタンと「Narrow」ボタンをクリックしてみてください。 3 番目の「最小幅を設定しない」ボタンにも気づいたかもしれません。これは何のためでしょうか?標準ブラウザを使用して上記の例を表示し、幅ボタンをクリックして最大幅に設定してから、最小幅を設定しないボタンをクリックすると、バグが発生していることがわかります。ネガティブマージンはレイアウト効果において確かにユニークですが、小さな欠点もあります。つまり、ネガティブマージンを使用して内部の最後の子要素を上に移動した場合、親要素はそのマージン要素であるため、内部の子要素が上に移動したために、その実際の高さも小さくなります。解決策は、最小の高さを設定することです。最小の高さの値は、より小さい固定要素の高さ（この場合は、左側の固定画像の高さ）です。これにより、負のマージンが上に移動し、親要素の高さに影響を与えるというバグを完全に解決できます。
4. 画像を実装し、負のマージンを使用してブロック要素を垂直方向に中央揃えにします。要約：負のマージン値は、ボックスの実際のサイズには影響しません。負の上または左の値の場合、ボックスが上または左に移動します。下または右の場合は、下のボックスによって表示される基準線にのみ影響します。

<<: mysql 計算関数の詳細

>>: Linux コマンドライン操作 Baidu クラウドのファイルのアップロードとダウンロード