第6章 - 0001 marginを制御する方法について復習しよう

この節について

これまでmarginを制御する方法についていくつかのポイントを学習してきましたが、比較的わかり難い部分でもあると思いますので、これまで学習してきたポイントについて振り返っていきましょう。

これまで学習してきたポイントのまとめ

概要

これまで学習してきたポイントのうち、marginが関係する項目を箇条書きにすると以下のようになります。

  • 位置調整のプロパティはBlockクラスやBlockのModifierクラスに設定しない
  • モジュールを入れ子にする場合はモジュールを包むElementクラスで幅や表示位置を調整する
  • 2つの要素間のmarginを設定するときは後の要素に設定する
  • 隣接する兄弟要素が変化する可能性のある箇所は隣接兄弟要素セレクタでmarginを制御する

位置調整のプロパティはBlockクラスやBlockのModifierクラスに設定しない

これは「第2章 - 0002 mod-example-0001の復習をしながらとてもやさしいCSS設計の「最重要ポイント」を学ぼう」で学習した最重要ポイントの一部です。

そこからmarginに関係するポイントだけを抜粋すると「左右のmarginをBlockクラスやBlockのModifierクラスに設定しない」ということになります。

モジュールを入れ子にする場合はモジュールを包むElementクラスで幅や表示位置を調整する

これは「第3章 - 0008 mod-header-0001のコードからポイントを読み取ろう」で学習したポイントの一部です。

そこからmarginに関係するポイントだけを抜粋すると「左右のmarginは親モジュールのElementクラスにだけ設定することができる」ということになります。

2つの要素間のmarginを設定するときは後の要素に設定する

これは「第3章 - 0004 mod-heading-0001のコードからポイントを読み取ろう」で学習したポイントの一部です。

「2つの要素間のmarginを設定するときは後の要素に設定する」ということを推奨しています。

隣接する兄弟要素が変化する可能性のある箇所は隣接兄弟要素セレクタでmarginを制御する

これは「第3章 - 0014 mod-container-0001のコードからポイントを読み取ろう」で学習したポイントの一部です。

「隣接する兄弟要素が変化する可能性のある箇所は隣接兄弟要素セレクタでmarginを制御する」という方法について解説しています。

これについては、この第6章のmargin設定についての練習問題をやりながら具体的に学習できるようにしています。

この節のおわりに

marginを制御する方法についてより深く学んでいく前に、これまで学習してきたポイントについて振り返ってきました。

続きはこちら

とてもやさしいCSS設計チュートリアルの目次へ戻る