第6章 5節 親要素の始端と終端の余白を可変にする方法を練習問題を通して理解しよう

この節について

例えば「第3章 13節 mod-container-0001を作ろう」で作成したmod-container-0001のpaddingは以下のようになっています。

1
padding: 16px 16px 40px;

mod-container-0001の始端の余白というのはpadding-topのことを指しており、mod-container-0001の終端の余白というのはpadding-bottomのことを指しています。

mod-container-0001の中に設置する最初の要素の上の余白が必ず16px以上と決まっている場合や、mod-container-0001の中に設置する最後の要素の下の余白が必ず40px以上と決まっている場合はこのままで問題ありませんが、設置される要素によって余白を変更したい場合の例を練習問題を通して説明していきたいと思います。

練習問題の基礎となるHTML

前の節で作成したmargin-tutorial.htmlの、以下の箇所を基礎として、少し変更しながら説明していきます。

1
2
3
4
5
6
7
8
9
10
11
<section class="mod-container-0002">
  <div class="mod-margin-tutorial-0002">
    mod-margin-tutorial-0002
  </div>
  <div class="mod-margin-tutorial-0003">
    mod-margin-tutorial-0003
  </div>
  <div class="mod-margin-tutorial-0004">
    mod-margin-tutorial-0004
  </div>
</section>

練習問題の基礎となるSCSS

_mod-container-0002.scss

src/scss/modules/_mod-container-0002.scssはこの節では変更しませんが、ここにも載せておきます。

1
2
3
.mod-container-0002 {
  padding: 1px 16px;
}

_mod-margin-tutorial-0002.scss

src/scss/modules/_mod-margin-tutorial-0002.scssを基礎として、少し変更しながら説明していきます。

1
2
3
.mod-margin-tutorial-0002 {
  background: #ffdddd;
}

_mod-margin-tutorial-0003.scss

src/scss/modules/_mod-margin-tutorial-0003.scssを基礎として、少し変更しながら説明していきます。

1
2
3
.mod-margin-tutorial-0003 {
  background: #ddffdd;
}

_mod-margin-tutorial-0004.scss

src/scss/modules/_mod-margin-tutorial-0004.scssを基礎として、少し変更しながら説明していきます。

1
2
3
.mod-margin-tutorial-0004 {
  background: #ddddff;
}

練習問題を始める前に

「基礎となるHTML」では、以下の3つのモジュールをmod-container-0002が包括しています。

  • mod-margin-tutorial-0002
  • mod-margin-tutorial-0003
  • mod-margin-tutorial-0004

練習問題の説明をするにあたって、上記のモジュールをそれぞれ以下のように表現します。

  • mod-2
  • mod-3
  • mod-4

練習問題で想定する条件

この練習問題では、以下の条件を満たせるようなmarginをmod-2、mod-3、mod-4に設定していきましょう。

  • mod-container-0002の中には、mod-2、mod-3、mod-4が必ず表示され、同じ要素が同時に表示されないものとします。
  • mod-2、mod-3、mod-4の表示順はランダムで変化するものとします。
  • 一番上に表示されたモジュールの上の余白は、モジュール番号×10の式で算出した値を設定するものとします。例えばmod-2が一番上に表示された場合は、その上に設定する余白は2×10=20pxとします。また、このときmod-container-0001に設定されたpaddingも合わせて20pxになるものとします。
  • 一番下に表示されたモジュールの下の余白は、モジュール番号×10の式で算出した値を設定するものとします。例えばmod-4が一番下に表示された場合は、その下に設定する余白は4×10=40pxとします。また、このときmod-container-0001に設定されたpaddingも合わせて40pxになるものとします。

上記した条件を満たすSCSSを書いてみてください

余裕があれば、_mod-margin-tutorial-0002.scss、_mod-margin-tutorial-0003.scss、_mod-margin-tutorial-0004.scssを編集して、上記した条件を満たすSCSSをご自身で書いてみてください。

正しい答えの例はこの後に掲載します。

正しい答えの例

表示されるパターンを整理する

まずはパターンの整理をします。
余白のパターンさえ整理されればあとは簡単です。

一番上に表示される要素と、一番下に表示される要素だけがわかれば良いので、余白の設定をするうえで必要なパターンは以下の通りです。

一番上に表示される要素のパターン

  • mod-1が一番上に表示されるパターン
  • mod-2が一番上に表示されるパターン
  • mod-3が一番上に表示されるパターン

一番下に表示される要素のパターン

  • mod-1が一番下に表示されるパターン
  • mod-2が一番下に表示されるパターン
  • mod-3が一番下に表示されるパターン

全ての条件を満たせるSCSS

答えはとても簡単です。

一番上の要素はfirst-child、一番下の要素はlast-childなので、その通りにスタイルを設定していくだけです。

_mod-margin-tutorial-0002.scssは以下のようになりました。
.mod-container-0002の子要素のときだけに限定していることに注意してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
.mod-margin-tutorial-0002 {
  background: #ffdddd;

  // .mod-container-0002の子のとき
  .mod-container-0002 > & {
    &:first-child {
      margin-top: 19px;
    }
    &:last-child {
      margin-bottom: 19px;
    }
  }
}

_mod-margin-tutorial-0003.scssは以下のようになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
.mod-margin-tutorial-0003 {
  background: #ddffdd;

  // .mod-container-0002の子のとき
  .mod-container-0002 > & {
    &:first-child {
      margin-top: 29px;
    }
    &:last-child {
      margin-bottom: 29px;
    }
  }
}

_mod-margin-tutorial-0004.scssは以下のようになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
.mod-margin-tutorial-0004 {
  background: #ddddff;

  // .mod-container-0002の子のとき
  .mod-container-0002 > & {
    &:first-child {
      margin-top: 39px;
    }
    &:last-child {
      margin-bottom: 39px;
    }
  }
}

このmarginの役割について

このmarginは親要素のpaddingを補完する役割を担っています。

marginの方向について

この練習問題では、margin-topとmargin-bottomを使用しました。
実際にほとんどの場合、first-childにmargin-topを設定し、last-childにmargin-bottomを設定することになると思いますが、要素間のmarginを設定する場合と同じく、要素の並ぶ方向に合わせてfirst-childやlast-childに設定するmarginの方向も変更する必要があります。

親要素の始端と終端の余白を可変にする方法について

デザインにもよりますが、特にl-contents-type-xxxxやmod-container-xxxx内の一番目に設置される要素や、最後に設置される要素が変更される場合はよくあり、要素が変更されれば上下の余白の変更が必要となる場合もあります。

特に静的なページであれば、例えばl-contents-type-0001の上下の余白の変更が必要になったときの基本的な方法として、l-contents-type-0002を新しく定義したり、l-contents-type-0001のModifierクラスを新しく定義する方法があります。

この節で紹介した方法は、子要素のmarginで親要素のpaddingを補完するという面からみるとソースコードとしては少し変則的な方法に見えるかもしれませんが、余白を変更する理由としては「一番上に設置される要素が変更された」「一番下に設置される要素が変更された」ことに起因しているため、first-childやlast-childのセレクタに余白の値を持たせるのは自然なようにも見てとれると思います。

プログラムによって動的に表示要素が変化する場合はもちろんのこと、静的なページの場合でも、中に設置される要素のfirst-childやlast-childに余白を設定する方がコードの管理をしやすくなる場合があるため、実装の選択肢を増やす意味でこの節で紹介しました。

この節のおわりに

この節では、隣接兄弟要素セレクタでは対応できない、親要素の始端と終端の余白を可変にする方法について、練習問題を通して学習しました。

ほとんどの要素は初めから可変にしておく必要は無いと思いますが、とても便利な方法なので、ぜひ選択肢のひとつとして活用していただけたらと思います。

続きはこちら

  • 第6章 marginを制御する方法についてのまとめ

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