スタート!CSS入門

上下マージンの相殺

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素間の上下マージンには、大きい方の値が採用されるという特性があります。これをマージンの相殺と呼びます。ここでは、マージンの相殺について紹介します。
講師:
04:40

字幕

CSS では複数のボックスが隣接、隣り合った場合にそれぞれのマージンを結合し1つのマージンにすることがあります。このことをマージンを相殺すると言い、結果として結合されたマージンを相殺マージンと呼びます。ここでは簡単な例を紹介します。ウェブブラウザを見ると「 h1 」要素と「 p 」要素こちらが上下に並んで表示されています。HTML を確認しても「 h1 」要素と「 p 」要素が上下に並んでいます。この要素にはそれぞれマージンが設定されています。まず「 h1 」要素。見出しを定義する「 h1 」要素には上下にマージンが 24px左右には 0このマージンが設定されています。続いて「 p 」要素。こちらの「 p 」要素に対しては上下のマージンに 12px左右に同じく 0 この値がマージンとして設定されています。このとき普通に考えれば「 h1 」要素の下のマージンが 24px「 p 」要素の上のマージンが 12px で「 h1 」要素と「 p 」要素の間は 24+12 で36px になりそうと考えられます。しかし CSS では上部と下部のマージンが隣り合った場合はマージンが相殺されるようになっています。 Google Chrome のデベロッパーツールでその様子を確認してみましょう。メニューボタンをクリックします。「ツール」から「デベロッパーツール」を表示します。デベロッパーツールの「 Elements 」タブで該当の要素をクリックします。「 h1 」要素をクリックします。すると「 h1 」要素に対して適用されているマージンがウェブブラウザ上でオレンジ色の領域で表示されています。こちらの画面右側のスクロールバーをスクロールしていくとこちらにもマージンの領域を確認できる表示があります。さらに「 p 」要素に対しても確認してみましょう。「 p 」要素をクリックして選択します。「 p 」要素にも上下にたいして 12px のマージンが設定されていることが分かります。こちらの画面でも同じように 12px が設定されていることが分かります。しかし「 h1 」要素と「 p 」要素のマージンを見比べてみても「 h1 」要素と「 p 」要素の間は「 h1 」要素に指定した 24px のマージンのみが確保されています。これが上下マージンの相殺です。上下マージンの相殺ではマージンの値の大きい方が優先されて適用される仕様になっています。 またマージンの値が正負、プラスマイナスで混在している場合は一定のルールに沿って適用されます。次のリストを見てみましょう。上下マージンの相殺では上下に並んだ要素のマージンの値が両方とも正の場合は大きい方の値が適用されるということを先ほどお話しました。次に片方が正プラス、片方が負マイナスの値の場合は、正から負の絶対値を引いた値を適用します。また両方が負マイナスの値だった場合は小さいほうの値が適用されます。このレッスンでは複数の要素が上下に並んだ場合のマージンの相殺について学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。