ネガティブマージンの使いどころ

2023/09/07 16 users margin CSS 川上 使い 大抵

はじめに こんにちわ、フロントエンジニアの川上です。今回は自分も初めて見た時に使い方に戸惑ったCSSのネガティブマージンについて記事を書かせていただきます。 ネガティブマージンとは、CSSのmarginにマイナス値を設定することを指します。大抵は正の数をしてしますが、負の数を設定するとどうなるのでしょうか。 特... 続きを読む

[CSS]リスト要素を左寄せぴったりに配置するスタイルシートのテクニック | コリス

2014/03/10 210 users コリス 黒丸 CSS 四角 テクニック

中黒のような黒丸、四角、数字など、リストの先頭につくマークを左寄せに揃えるスタイルシートのテクニックを紹介します。 対応ブラウザはIE8+で、ネガティブマージンは使用しません。 Align Lists Flush Left ブラウザごとに異なるサイズのマークでも、数字のリストで1桁から2, 3桁と増えても全てに対応できるテクニックです。 まずは、マークアップから。 HTML ulもolもシンプルな... 続きを読む

CSSでボックスを上下左右中央に配置する第３の方法 | 3streamer blog

2012/01/17 108 users CSS 上下左右中央 ボックス ウインドウサイズ Box

ポイントはboxの横と高さの1/2 をネガティブマージンで指定するところですね。class=”box”に指定しているmin-widthはブラウザのウィンドウサイズをboxの大きさよりも小さくした時の対策です。これが無いとカラム落ちのような状態になってしまいます。 このやり方のネックは中央に配置される子要素のboxの幅と高さをCSSで指定しないと使えないという点です。例えば、内包する子要素が画像で色... 続きを読む

[CSS]ネガティブマージンの理解を深め、活用するテクニック集 | コリス

2009/07/28 563 users コリス margin CSS テクニック集 理解

スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニッ... 続きを読む

[CSS]スタイルシートを自動でIE6対応にするオンラインサービス -ie6fixer | コリス

2009/04/07 343 users フロート コリス パク Give me 記述

手元のスタイルシートをフロートやネガティブマージンなどIE6のバグを回避する記述を自動生成するオンラインサービスをonderhond.comから紹介します。 ie6fixer IE6に対応したスタイルシートを生成する方法は、以下の手順です。 「master stylesheet」の欄に、スタイルシートを入力。 「Give me my ie6 fixes」ボタンをクリック。 以上で、IE6のバグに対... 続きを読む