CSSの小技 - ネガティブマージン

今回は、CSSの小技についてです。

CSSで余白などをつける際は「margin: 10px;」の様な数値を用いると思いますが、

この数値をマイナスにつけることが出来ます。

特に、マージンにマイナス方向の数値をとる事を「ネガティブマージン」と呼び、

通常では設定できないレイアウトをすることが出来ます。

今回のブログでは、数値をマイナス方向に付けることによって、

実現可能な小技を2種類紹介したいと思います。

1.ネガティブマージン

フロートをしている時と通常時で使用方法が変わりますが、

今回は通常時のお話です。

マージンをマイナス方向につけると、その要素を外側に引っ張ることが出来ます。

例えば、この例のように、見出しの下のボーダー以外は内側に揃えたい・・といった時、

発想を逆転して「ボーダーだけ外に出す」という処理をします。

通常は、ボーダー以外にパディングなどを施していきますが、

逆に見出しにだけネガティブマージンをつけると見出しだけ外に飛び出します。

このように、うまく使うことによりコーディングの簡略化になります。

2.テキストインデント

テキストインデントもマイナス方向につけることが可能です。

例えば・・・

注釈を用いるときなど、アスタリスク「＊」を文頭につけたい場合、

そのままの設定だと改行したときに、アスタリスクの真下から始まってしまいます。

このアスタリスクは、他の文字列より一文字分左にはみ出ていたほうが

文体としてきれいなので、pタグに「text-indent: -1em;」と入れます。

テキストインデントは段落の一番最初だけに効き、

さらに「1em」で一文字分、という調整が出来ます。

結果、アスタリスクだけ一文字分はみだしてレイアウトすることが可能です。

このように、マイナス方向で値をつけることにより、

通常だと複雑に設定しなければいけない部分も、簡単に設定することが可能です。

発想の逆転で、作品を制作していきましょう！

--------------------------------------------------------------------------------

この記事に書かれている内容は、KENスクールで学習することができます！

⇒【CSS上級レイアウト講座】
CSSが書けるようになった、でもまだまだ不安の残るあなたにおススメ。
より高度なWebサイトのレイアウト構築をマスターして、
Web制作に更なるスピードアップを図りましょう！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 馬場