第3章 14節 mod-container-0001のコードからポイントを読み取ろう

この節について

mod-container-0001のコードを読み返しながら、新しいポイントについて学んでいきましょう。

mod-container-0001のコードを読み返しながら新しいポイントについて学ぼう

概要

mod-container-0001のコードを元に説明する新しいポイントとして以下のようなことが挙げられます。

  1. mod-container-xxxxクラスの役割を理解する
  2. 隣接する兄弟要素が変化する可能性のある箇所は隣接兄弟要素セレクタでmarginを制御する
  3. first-childの前やlast-childの後の余白が変化する箇所は擬似クラスセレクタで親要素のpaddingを制御する

1. mod-container-xxxxクラスの役割を理解する

このとてもやさしいCSS設計では、mod-container-xxxxと命名するクラスに特別な役割を持たせています。
mod-container-xxxxのxxxxの部分は数字でも良いですし、複数の単語でも大丈夫です。

例えば以下のようなHTMLドキュメントがあった場合に、h2のセクションの外郭を担うのがmod-container-xxxxの役割としています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
  <h1>ドキュメント</h1>

  <div class="mod-container-xxxx">
    <h2>h2セクション</h2>
    <div class="mod-other-name">
      <h3>h3セクション</h3>
    </div>
  </div>

  <div class="mod-container-xxxx">
    <h2>h2セクション</h2>
    <div class="mod-other-name">
      <h3>h3セクション</h3>
    </div>
  </div>
</body>

色々なページを作っていくうえで、mod-container-0002やmod-container-0003などを作成していく場合も、h2セクションの外郭を表現する役割を与えます。
これは第5章でページを作成する過程で説明することにも関係がありますが、bodyからh2セクションの外郭のクラス名までは、厳格な命名規則を設けてHTMLとCSSのコーディングを定型化して捉えることで、クラスの命名やブロックの分け方などに迷うことを減らし、本質的なスタイリングに集中できるようにしています。

h2セクション内に設置する要素には、BEMに則って命名するということ以外には特にクラス名のルールは設けていません。
あまり細部まで厳格なルールを設けると後から変更し難いコードになってしまう側面もあるため、厳格なルールを設けるのはh2セクションの外郭までに留めています。

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

Webページを作るとき、Blockクラス、Elementクラス、Modifierクラス、それぞれが付与されたタグが色々な組み合わせで隣接します。
Elementクラス同士は同じ組み合わせで隣接する場合が多くありますが、それでも同じ組み合わせばかりではありません。

_mod-container-0001.scssでは、以下のように隣接兄弟要素セレクタでmargin-topを設定しました。

1
2
3
.mod-container-0001 + & {
  margin-top: 48px;
}

この方法は例えば以下の場合に有効です。

  • mod-container-0001がどの要素とも隣接していないとき(:first-childのとき)にはmargin-topを設定したくない場合
  • 何か別の要素とmod-container-0001が隣接兄弟要素となったときにはmargin-topを変更したい場合

記述する場所としては_mod-container-0001.scssに記述したように、各scssファイルの下部にコメントと一緒にまとめて書いておくと良いと思います。

また、例えばmod-example-0001とmod-container-0001が隣接兄弟要素となった場合の、mod-container-0001のmargin-topを設定したいときは、_mod-example-0001.scssの方に書かないように気をつけましょう。
あくまでも.mod-container-0001のスタイルを設定しているので_mod-container-0001.scssの方に書きます。

この方法を使用してサイトの構築や運用を続けていくと、例えば以下のように色々な要素とのmarginを個別に定義しやすくなります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.mod-container-0001 {
  〜略〜

  // 隣接兄弟要素セレクタによるマージン
  .mod-a + &,
  .mod-b + &,
  .mod-c + &,
  .mod-d + &,
  .mod-container-0001 + & {
    margin-top: 48px;
  }
  .mod-e__element + & {
    margin-top: 12px;
  }
  .mod-f--modifier + & {
    margin-top: 24px;
  }
}

上記したように、ElementクラスやModifierクラスとの隣接兄弟要素セレクタを使用しても問題ありません。

今回はBlockクラスのmargin-topを設定する例での説明となりましたが、「第3章 4節 mod-heading-0001のコードからポイントを読み取ろう」でも説明した通り、ElementクラスやModifierクラスが隣接する場合でも隣接兄弟要素セレクタを使用することが効果的であることと、marginの方向も場合によって変化することは知っておいてください。

この例は、要素間のmarginを変更したくなる理由が「兄弟要素が変化したこと」に起因しているため、隣接兄弟要素セレクタを使用してmarginを制御している。という風に考えると理解しやすいと思います。

3. first-childの前やlast-childの後の余白が変化する箇所は擬似クラスセレクタで親要素のpaddingを制御する

_mod-container-0001.scssのコードからは、以下のようにmod-container-0001のpadding-topとpadding-bottomを1pxにして、子要素のmarginで余白を補完していることがわかります。

1
2
3
4
5
6
7
8
9
10
11
12
13
.mod-container-0001 {
  padding: 1px 16px;
  background-color: #ffffff;
  // .mod-container-0001のpadding-topを補完する初期値
  > :first-child {
    margin-top: 15px;
  }
  // .mod-container-0001のpadding-bottomを補完する初期値
  > :last-child {
    margin-bottom: 39px;
  }
  〜略〜
}

さきほどmod-container-0001はh2セクションとして使用されるという役割があることを説明しましたが、ページ内にmod-container-0001を一つだけしか設置しない場合に、デザイン上h2見出しが省略されることも想定されます。

h2見出しが省略された場合、以下の要素がfirst-childになります。

1
2
3
<div class="mod-container-0001__body">
  ここにコンテンツのモジュールが入ります。
</div>

このようにfirst-childが変化した場合に、デザインによっては余白を変更したい場合があります。

そのようなときは、例えば以下のようにすることで.mod-container-0001__bodyがfirst-childになった場合の余白を変更することができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.mod-container-0001 {
  padding: 1px 16px;
  background-color: #ffffff;
  // .mod-container-0001のpadding-topを補完する初期値
  > :first-child {
    margin-top: 15px;
  }
  // .mod-container-0001のpadding-bottomを補完する初期値
  > :last-child {
    margin-bottom: 39px;
  }

  > .mod-container-0001__body {
    &:first-child {
      margin-top: 31px;
    }
  }
  〜略〜
}

first-childの要素が変化する場合を例に説明をしてきましたが、last-childの要素が変化する場合についても同様のことができ、この例では最小1pxまで余白を減らすことができます。

ただしこの方法を使用するのは、first-childまたはlast-childが変化したときに親要素の余白を変化させたい場合に限ります。

今回、こういった方法があることを説明をするためにmod-container-0001のpadding-topとpadding-bottomを1pxで設定していますが、モジュールを作成する時点において、first-childやlast-childが変化するかどうかわからない場合や、それらが変化するとしても余白を変化させない場合は、親要素のpaddingだけを使用して余白を設定しておき、可変にする必要に迫られてから対応するのが良いと思います。

この方法についてまだよくわからないという方も「第6章 5節 親要素の始端と終端の余白を可変にする方法について練習問題を通して理解しよう」で実際に手を動かしながら理解を深めていけるようにしていますので、今は完全に理解できていなくても安心して続きを読み進めていってください。

この節のおわりに

この節では、mod-container-xxxxの役割や、隣接兄弟要素セレクタによるmarginの制御の方法、擬似クラスによる余白の制御の方法について新たに学習しました。

重要なポイントなのでしっかりと身につけていきましょう。

続きはこちら

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