CSS設計入門にも最適！BEMとSCSSで作って学ぶ！とてもやさしいCSS設計チュートリアル 中野ピク氏(著) 2021-02-05T14:51:34.347Z https://css.nakano-pixy.com/ 中野ピク氏 Hexo おわりに https://css.nakano-pixy.com/2021/02/04/afterword/ 2021-02-04T14:10:19.000Z 2021-02-05T14:51:34.347Z おわりに

ここまで読んでいただき本当にありがとうございました。

このとてもやさしいCSS設計チュートリアルを書くにあたっては、「とにかくこれだけをやっておけば大丈夫」というぐらい重要なことだけに絞って説明し、既に一般的に広く知られているMindBEMdingやSCSS記法を使用することで、新たに覚えることがなるべく少なくなるように心がけました。
また、一人ひとりの解釈によって判断に迷いが生じやすい事柄も可能な限り排除しました。

CSSが壊れていくきっかけとして、メンバーの増員や交代をしたことがきっかけとなるケースが多いように思いますが、可能な限り単純で覚えやすいルールとすることで、チームメンバーが増員される場合や、自身がプロジェクトを離れ引継ぎをした場合にも、安定的にメンテナンスを続けられるようになります。

このとてもやさしいCSS設計チュートリアルで説明してきたことは、ほとんどがとても基礎的なことの組み合わせです。
例えば隣接兄弟要素セレクタ、first-child、last-childなどはとても基礎的なセレクタですが、それらをいつどのように使用するかによって、CSSの保守性に大きな違いが生じます。

一度読んだだけで理解し使いこなすことは難しいと感じる人もいるかもしれませんが、ぜひこのとてもやさしいCSS設計チュートリアルを繰り返し読んでいただいて、理解を深めていただけたら嬉しいです。

長期的なメンテナンスを視野に入れてCSSを書くために必要な最低限のことについては、第7章までで全て説明しているつもりですが、あまり細かなことまで挙げすぎると重要なことが埋もれてしまうという考えから、重要性が低いと判断したことや、最低限とは言えない発展的な手法についてはいくつか割愛してきました。

本編は一旦一区切りとしますが、割愛してきたことについては余裕のあるときに番外編として続きを書くかもしれません。

多くの場合、このとてもやさしいCSS設計チュートリアルの通りにコーディングしていただくだけでも、色々なデザインを保守しやすいかたちでコーディングするのに充分な内容だと思っていますが、あくまでこれらを基礎として、個々のプロジェクトに対してより適切なCSS設計へと発展させていくこともできると思います。

このとてもやさしいCSS設計チュートリアルがみなさまの一助となりましたら幸いです。

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

]]> <h2 id="おわりに"><a href="#おわりに" class="headerlink" title="おわりに"></a>おわりに</h2><p>ここまで読んでいただき本当にありがとうございました。</p> <p>このとてもやさしいCSS設計チュートリアルを書くにあたっ 第7章 2節 特定の要素だけレスポンシブにするコードからポイントを読み取ろう https://css.nakano-pixy.com/2021/01/29/chapter-07-0002/ 2021-01-29T07:54:31.000Z 2021-02-19T08:23:34.818Z この節について

mod-example-0001のコードを読み返しながら、特定の要素だけレスポンシブにするときのポイントについて学んでいきましょう。

特定の要素だけレスポンシブにするときのポイントについて学ぼう

概要

特定の要素だけレスポンシブにするときのポイントとして、以下のようなことが挙げられます。

  1. どういう条件のときにどのような状態になるのか分かりやすいクラス名にする
  2. レスポンシブにするだけのためのModifierクラスを作成する

1. どういう条件のときにどのような状態になるのか分かりやすいクラス名にする

前の節で作成したModifierクラスを具体例として挙げるとmod-example-0001--display-none-if-media-query-is-smでした。

このクラス名からは、media queryがsmの場合にdisplay: none;になることがわかりやすいと思います。

少し長いクラス名になってしまいますがあまり省略せずに、自分以外の誰が読んでもわかりやすいModifierクラス名を意識して命名すると良いと思います。

2. レスポンシブにするだけのためのModifierクラスを作成する

一言で言うと、「レスポンシブにするだけのためのModifierクラスを作成する」ことがポイントです。

詳細としては、まず以下の「2つの異なる性質の条件を組み合わせている」ことに注目することで理解が深まると思います。

  • Modifierクラスを付与することによってスタイルを適用する
  • media queryによってスタイルを適用する

Modifierクラスで派生スタイルを作成すること、media queryでレスポンシブ対応をすること、これら一つひとつについては当たり前に使いこなせている人が多いと思いますが、この2つを組み合わせて、レスポンシブのためだけに使用するという発想を必要なときにパッと思いつくことは意外とできないことのように思います。

充分に理解して、いざというときに使えるようにしておきましょう。

この節のおわりに

この節では、特定の要素だけレスポンシブにするコードが、どのような条件の組み合わせによって実現されるのか、その要因を分解して詳細に学習しました。

とても便利な方法なので、ぜひ身につけてください。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>mod-example-0001のコードを読み返しながら、特定の要素だけレスポンシブにするときのポイ 第7章 1節 Modifierクラスを利用して特定の要素だけレスポンシブにしよう https://css.nakano-pixy.com/2021/01/29/chapter-07-0001/ 2021-01-29T05:27:15.000Z 2021-02-21T07:25:55.760Z この節について

この節では同じモジュールを複数設置した場合に、そのうちの1つだけにModifierクラスを付与してレスポンシブ対応する方法について紹介します。

通常のレスポンシブ対応コード

public/html/module-list.htmlの編集

module-list.htmlのmod-example-0001の下に、もう1つmod-example-0001を追記して以下のようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
  <i class="fas fa-cat"></i>

  <div class="mod-example-0001 mod-example-0001--danger">
    <div class="mod-example-0001__first-element">
      <ul class="mod-example-0001__list-group">
        <li class="mod-example-0001__list-item mod-example-0001__list-item--danger">
          サンプル
        </li>
        <li class="mod-example-0001__list-item">
          サンプル
        </li>
      </ul>
    </div>
  </div>

  <div class="mod-example-0001">
    <div class="mod-example-0001__first-element">
      <ul class="mod-example-0001__list-group">
        <li class="mod-example-0001__list-item">
          サンプル
        </li>
        <li class="mod-example-0001__list-item">
          サンプル
        </li>
      </ul>
    </div>
  </div>

  〜略〜
</body>

src/scss/modules/_mod-example-0001.scssの編集

このとき、例えばsrc/scss/modules/_mod-example-0001.scssに以下のように追記すると、windowの幅が狭まったときに2つとも非表示になります。

1
2
3
4
5
6
7
.mod-example-0001 {
  〜略〜
  @media #{$g__is-sm} {
    display: none;
  }
  〜略〜
}

一度ブラウザで確認する

public/html/module-list.html をブラウザで開いて確認してみてください。

windowの幅を狭めていくと、2つとも非表示になります。

片方だけをレスポンシブにするコード

public/html/module-list.htmlの編集

先ほど追記した方のモジュールに、mod-example-0001--display-none-if-media-query-is-smを追記して以下のようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
  <i class="fas fa-cat"></i>

  <div class="mod-example-0001 mod-example-0001--danger">
    <div class="mod-example-0001__first-element">
      <ul class="mod-example-0001__list-group">
        <li class="mod-example-0001__list-item mod-example-0001__list-item--danger">
          サンプル
        </li>
        <li class="mod-example-0001__list-item">
          サンプル
        </li>
      </ul>
    </div>
  </div>

  <div class="mod-example-0001 mod-example-0001--display-none-if-media-query-is-sm">
    <div class="mod-example-0001__first-element">
      <ul class="mod-example-0001__list-group">
        <li class="mod-example-0001__list-item">
          サンプル
        </li>
        <li class="mod-example-0001__list-item">
          サンプル
        </li>
      </ul>
    </div>
  </div>

  〜略〜
</body>

src/scss/modules/_mod-example-0001.scssの編集

さきほど追記した箇所を以下のように書き換えます。

1
2
3
4
5
6
7
8
9
.mod-example-0001 {
  〜略〜
  &.mod-example-0001--display-none-if-media-query-is-sm {
    @media #{$g__is-sm} {
      display: none;
    }
  }
  〜略〜
}

これで、windowが狭まったときには片方だけが非表示になります。

この節で編集した_mod-example-0001.scssの全容

_mod-example-0001.scssは以下のようになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.mod-example-0001 {
  padding: 12px 24px;
  background: #eeeeee;
  border: 1px solid #cccccc;
  font-size: 16px;
  &.mod-example-0001--display-none-if-media-query-is-sm {
    @media #{$g__is-sm} {
      display: none;
    }
  }
  &.mod-example-0001--danger {
    background: #ffeeee;
    border: 1px solid #cc3333;
  }
  .mod-example-0001__first-element {
    padding: 6px;
  }
  .mod-example-0001__list-group {
    list-style: disc;
  }
  .mod-example-0001__list-item {
    color: #222222;
    &.mod-example-0001__list-item--danger {
      color: #cc3333;
    }
  }
}

表示確認

public/html/module-list.html をブラウザで開いて確認してみてください。

さきほど開いた状態でそのままの場合は、_mod-example-0001.scssを編集したあとで、CSSを再読み込みするためにブラウザを忘れずにリロードしてください。

windowの幅を狭めていくと、片方だけが非表示になります。

この節のおわりに

今回は要素を非表示にする例で説明をしましたが、同様の方法を利用して色々なプロパティを制御することが可能です。

次の節ではこのコードについてポイントの解説をしていきます。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>この節では同じモジュールを複数設置した場合に、そのうちの1つだけにModifierクラスを付与してレ 第7章 概要 レスポンシブなページの作成で使えるテクニックを学ぼう https://css.nakano-pixy.com/2021/01/29/chapter-07-summary/ 2021-01-28T16:54:53.000Z 2021-02-04T13:14:10.179Z この章について

レスポンシブなWebページの作成をする機会は非常に多いと思いますが、意外と気付かない人も多い便利なテクニックについて紹介していきます。

続きはこちら

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

]]> <h2 id="この章について"><a href="#この章について" class="headerlink" title="この章について"></a>この章について</h2><p>レスポンシブなWebページの作成をする機会は非常に多いと思いますが、意外と気付かない人も多い便利なテ 第6章 まとめ https://css.nakano-pixy.com/2021/01/28/chapter-06-digest/ 2021-01-28T14:45:35.000Z 2021-02-19T08:23:34.818Z この節について

第6章では、第2章と第3章で学習してきたmarginの制御方法について復習をしてきました。

第6章自体がmarginについてのまとめなので、この節はまとめのまとめということになってしまいますが、第6章で復習した事柄について整理していこうと思います。

後で困らないようにmarginを設定するためのポイント

marginについてのポイントが第2章と第3章に散らばっていたので、「第6章 1節 marginを制御する方法について復習しよう」でまとめました。

基本的にBlockクラス(=モジュール)にはmarginを設定せず、設定する場合は隣接兄弟要素セレクタ、first-child、last-child、not(:first-child)などの条件付きでmarginを設定すると後で邪魔にならないようにできます。

また、余白を設定または変更したくなる理由が、「隣接兄弟要素が変化した」「first-childが変化した」「last-childが変化した」「なんらかの要素と隣接している(first-childでない)」などの場合は、それらに対応するセレクタを意識して使用すると余白の管理がしやすくなると思います。

この節のおわりに

marginについて「第6章 1節 marginを制御する方法について復習しよう」にまとめた内容を、ご自身にとって思い出しやすい表現に変えて、すぐに確認できる場所に書き出しておいてから、実際にコーディングをするときにそれらのポイントを確認しながらコーディングしていくと良いかもしれません。

動的に表示要素が変化するWebサイトの制作や運用をするにあたっては、第6章の練習問題で行った内容が参考になると思いますので、動的なWebサイトの制作や運用に携わる予定のある方は理解しておくと良いと思います。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>第6章では、第2章と第3章で学習してきたmarginの制御方法について復習をしてきました。</p> 第4章 7節 レイアウトのクラスの総合的な特徴や役割について学ぼう https://css.nakano-pixy.com/2020/12/18/chapter-04-0007/ 2020-12-18T09:26:07.000Z 2020-12-18T15:50:21.829Z この節について

これまで、モジュールのクラスとレイアウトのクラスを作成してきましたが、接頭辞が違うことを除けば作り方は同じでした。

作り方は同じですが、この「とてもやさしいCSS設計」では、レイアウトのクラスの特徴や役割を明確に定義しモジュールと区別しています。

モジュールのクラスとレイアウトのクラスとの違いを明確に言語化して定義できていない場合、それらのカテゴリを分ける意味がなく、チームでの制作どころか、自分一人で行っている制作においてさえ、新しく定義するクラスをどちらのカテゴリに分類するべきなのかわからなくなって、ただ混乱を生む要因となってしまいます。

既にl-body-inner-0001とl-contents-type-0001のそれぞれの命名規則や役割については説明してきましたが、この節では、それら2つを合わせた場合、つまりレイアウトのクラスの特徴や役割について総合的に学習し、モジュールとレイアウトの違いを明確に言語化できるようにしていきましょう。

新しいポイントについて学ぼう

概要

この「とてもやさしいCSS設計」における、レイアウトのクラスの特徴や役割を以下に挙げた3つの項目に分けて学んでいきましょう。

  1. レイアウトのBlockクラス名はl-body-inner-から始まるものとl-contents-type-から始まるものだけとする
  2. 必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にしてページの外郭を構成する
  3. l-body-inner-xxxxのBlockクラス、l-contents-type-xxxxのBlockクラスは各ページでそれぞれ一度だけ必ず使用する

1. レイアウトのクラス名はl-body-inner-から始まるものとl-contents-type-から始まるものだけとする

レイアウトのクラス名は、l-body-inner-から始まるものとl-contents-type-から始まるものだけに限定しています。

これまで作成してきたものから具体例を挙げると以下のクラスがあります。

  • l-body-inner-0001と、そのElementクラス
  • l-contents-type-0001と、そのElementクラス

2. 必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にしてページの外郭を構成する

必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にしてページの外郭を構成し、その中のどこかにh1タグを設置します。
つまり、l-body-inner-xxxxとl-contents-type-xxxxを合わせたものがh1セクションであり、第4章ではh1セクションまでを作成したことになります。

blog-service-top.htmlのソースコードを読み返すと、bodyタグ、l-body-inner-0001、l-contents-type-0001の順に入れ子になっていることがわかります。

3. l-body-inner-xxxxのBlockクラス、l-contents-type-xxxxのBlockクラスは各ページでそれぞれ一度だけ必ず使用する

l-body-inner-xxxxのBlockクラス、l-contents-type-xxxxのBlockクラスは各ページでそれぞれ一度だけ必ず使用するようにしてください。

一度だけというのは、あくまでもBlockクラスだけの話なので、Elementクラスは以下のように複数回使用されることがあります。

1
2
3
4
5
6
7
8
9
10
〜略〜
<div class="l-contents-type-xxxx">
  <div class="l-contents-type-xxxx__element">
    コンテンツ
  </div>
  <div class="l-contents-type-xxxx__element">
    コンテンツ
  </div>
</div>
〜略〜

この節のおわりに

レイアウトのクラスについて、一言でその役割を表すと「ページの外枠」です。
別の言い方をすると「h1セクション」であるとも言えます。

ページの外枠を正確に作成することでページ全体の作成がとても楽になるので「レイアウトのクラスの特徴や役割」をしっかりと学習して、実践できるようにしていってください。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>これまで、モジュールのクラスとレイアウトのクラスを作成してきましたが、接頭辞が違うことを除けば作り方 第4章 2節 ブログサービスのトップページを作るために準備したファイルのコードからポイントを読み取ろう https://css.nakano-pixy.com/2020/12/18/chapter-04-0002/ 2020-12-17T16:11:10.000Z 2021-02-06T09:38:54.770Z この節について

前の節で作成したコードを読み返しながら、新しいポイントについて学んでいきましょう。

前の節で作成したコードを読み返しながら新しいポイントについて学ぼう

概要

前の節で作成したコードを元に説明する新しいポイントとして以下のようなことが挙げられます。

  1. エントリーポイントをページごとに分けて必要なファイルだけをimportする

1. エントリーポイントをページごとに分けて必要なファイルだけをimportする

エントリーポイントとは、一番親となっているSCSSファイルのことです。

このとてもやさしいCSS設計チュートリアルのエントリーポイントは、これまでmodule-list.scssだけでしたが、新たにblog-service-top.scssを作成しました。

Webサイトの制作をするとき、サイト全体のページ数やモジュール数が少なくそれ以上増えないことが予めわかっているサイトの場合は、module-list.scssのようにワイルドカード( * )で全てのモジュールをimportして、全てのページでmodule-list.cssを共通して使用し続けていく運用方法でも問題はありませんが、このチュートリアルではサイトの運用に伴ってページ数やモジュールが増えていく場合を想定して、ページごとにcssファイルを分ける方法を選択し、以下のように必要なモジュールだけをimportします。

1
2
3
4
5
6
7
8
9
10
11
12
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.scss";

// modules
@import "./modules/mod-button-0001.scss";
@import "./modules/mod-container-0001.scss";
@import "./modules/mod-footer-0001.scss";
@import "./modules/mod-header-0001.scss";
@import "./modules/mod-heading-0001.scss";
@import "./modules/mod-media-0001.scss";
@import "./modules/mod-media-0002.scss";

特にサーバーサイドのプログラムによって動的に要素を出し分けているサイトでは、後からCSSファイルをページごとに分けていくのは大変なので、ページを新規に作成するときにSCSSのエントリーポイントも新規に作成することをとてもやさしいCSS設計チュートリアルでは推奨しています。

この節のおわりに

この節では、「エントリーポイントをページごとに分けて必要なファイルだけをimportする」ことについて新たに学習しました。

少し手間に感じるとは思いますが、後でCSSファイルを分割していくよりも最終的な手間としては少なく、ページの表示にかかる時間の面でも各ページ安定的に短く保てますので、ぜひ「エントリーポイントをページごとに分けて必要なファイルだけをimportする」方法を採用してみてください。

次の節では、bodyタグの中に設置する1つめのレイアウトのクラスを作成していきます。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>前の節で作成したコードを読み返しながら、新しいポイントについて学んでいきましょう。</p> <h2 第4章 まとめ https://css.nakano-pixy.com/2020/12/15/chapter-04-digest/ 2020-12-15T14:06:14.000Z 2021-02-06T09:38:54.771Z この節について

この節では第4章でやってきたことを振り返り、要点をまとめます。

ブログサービスのトップページを作るための準備で学んだポイントを振り返ろう

ページを作るための準備作業を通して、以下の項目を新たなポイントとして挙げました。

  • エントリーポイントをページごとに分けて必要なファイルだけをimportする

l-body-inner-0001の作成で学んだポイントを振り返ろう

l-body-inner-0001の作成では、以下の項目を新たなポイントとして挙げました。

  • bodyタグの中に最初に設置するBlockクラス名は必ずl-body-inner-から始まるクラス名にする
  • l-body-inner-xxxxの役割を理解する

l-contents-type-0001の作成で学んだポイントを振り返ろう

l-contents-type-0001の作成では、以下の項目を新たなポイントとして挙げました。

  • コンテンツ領域のBlockクラス名は必ずl-contents-type-から始まるクラス名にする
  • l-contents-type-xxxxの役割を理解する

レイアウトのクラスの総合的な特徴や役割について振り返ろう

レイアウトのクラスの特徴や役割について、以下の項目を新たなポイントとして挙げました。

  • レイアウトのBlockクラス名はl-body-inner-から始まるものとl-contents-type-から始まるものだけとする
  • 必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にしてページの外郭を構成する
  • l-body-inner-xxxxのBlockクラス、l-contents-type-xxxxのBlockクラスは各ページでそれぞれ一度だけ必ず使用する

この節のおわりに

箇条書きにしたこれらのポイントを見ただけで、どのような内容だったか思い出せますか？
ご自身にとって思い出しやすい表現に変えて、すぐに確認できる場所に書き出しておいてから、実際にコーディングをするときにそれらのポイントを確認しながらコーディングしていくと良いかもしれません。

レイアウトのクラスの役割をしっかりと理解して、モジュールのクラスと明確に使い分けられるようにすることは非常に重要なので、しっかりと身につけていってください。

次の章では、モジュールを設置してページを完成させます。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>この節では第4章でやってきたことを振り返り、要点をまとめます。</p> <h2 id="ブログサービ 第4章 6節 l-contents-type-0001のコードからポイントを読み取ろう https://css.nakano-pixy.com/2020/12/15/chapter-04-0006/ 2020-12-15T14:02:04.000Z 2021-02-06T09:38:54.770Z この節について

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

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

概要

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

  1. コンテンツ領域のBlockクラス名は必ずl-contents-type-から始まるクラス名にする
  2. l-contents-type-xxxxの役割を理解する

1. コンテンツ領域のBlockクラス名は必ずl-contents-type-から始まるクラス名にする

「とてもやさしいCSS設計」では、コンテンツ領域の外枠となるBlockクラス名は必ずl-contents-type-から始まるクラス名にすることを厳格に定めています。
コンテンツ領域のBlockクラス名のルールを厳格に定めることで、クラスの命名に迷うことを減らし、本質的なスタイル設定に集中できます。

例えば以下のようなBlockクラス名を付けることができます。

  • l-contents-type-0001
  • l-contents-type-example-name

l-contents-type-から始まるBlockクラス名であれば、後に続く文字列は数字でも複数の単語でも、任意の文字列で構いません。

Elementクラス名は、BEMの命名規則に則って任意の名前を付けてください。
前の節で作成したElementクラスを具体例として挙げると以下のようなものがありました。

  • l-contents-type-0001__heading-wrapper
  • l-contents-type-0001__body

l-contents-type-0001ではModifierクラスを定義しませんでしたが、BEMの命名規則に則ってModifierクラスを定義することもできます。

2. l-contents-type-xxxxの役割を理解する

l-contents-type-xxxxとしていますが、さきほど説明したようにxxxxの部分はどのような文字列でも構いません。

l-contents-type-xxxxはコンテンツ領域の外枠となるBlockクラスであり、以下の役割を担います。

4-1. l-body-inner-xxxxで分割したうちの、コンテンツ領域内に水平線を引くようにしてさらにいくつかの領域に分割する
4-2. 各領域をセンタリングするかしないか、センタリングする場合はセンタリングされる領域の幅を決定する
4-3. 各領域ごとにカラム数を決定する
4-4. 複数カラムの領域についてはカラムごとの幅を決定する

具体例を挙げると、l-contents-type-0001では以下のことを行っています。

  • h1見出しを設置する領域とcontainerを設置する領域に分割
  • h1見出しを設置する領域もcontainerを設置する領域も「1200pxの幅でセンタリング」
  • h1見出しを設置する領域もcontainerを設置する領域も「1カラム」
  • いずれも1カラムなのでセンタリングされた幅と等しい

デザインによっては、とても多くの水平線で領域を分割をすることになったり、領域ごとに異なる幅でセンタリングしたり、水平線で分割した領域内をカラム分けすることになったりと、非常に多くのことをl-contents-type-xxxxクラスで行うことになりますが、上述した4-1から4-4を一つずつ確認しながら落ち着いて進めていけば、簡単に分けられると思います。

この節のおわりに

この節では、l-contents-type-xxxxの命名規則や役割について新たに学習しました。

次の節では第4章のまとめをし、l-body-inner-xxxxとl-contents-type-xxxxを合わせて考えながら、新たなポイントについても学習していきましょう。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>l-contents-type-0001のコードを読み返しながら、新しいポイントについて学んでいきま 第4章 5節 l-contents-type-0001を作ろう https://css.nakano-pixy.com/2020/12/15/chapter-04-0005/ 2020-12-15T13:58:20.000Z 2021-02-06T09:38:54.770Z この節について

この節では、コンテンツ領域の枠であるl-contents-type-0001を作成します。
今回もModifierクラスは無く、Elementクラスがあるだけです。

今回も基本に忠実に、BlockクラスとElementクラスで、コンテンツ領域内のレイアウトを作成していきましょう。

Block名を決める

今回のBlock名は l-contents-type-0001 にします。

scssファイルの作成

ファイル名の命名規則は _Block名.scss です。

先ほど決めたBlock名の先頭にアンダースコア（_）を足したものがファイル名になりますので src/scss/layouts/_l-contents-type-0001.scss を作成します。

src/scss/blog-service-top.scssの編集

src/scss/blog-service-top.scssに @import "./layouts/l-contents-type-0001.scss"; を追記します。

追記するとsrc/scss/blog-service-top.scssの全容は以下のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.scss";

// layouts
@import "./layouts/l-body-inner-0001.scss";
@import "./layouts/l-contents-type-0001.scss";

// modules
@import "./modules/mod-button-0001.scss";
@import "./modules/mod-container-0001.scss";
@import "./modules/mod-footer-0001.scss";
@import "./modules/mod-header-0001.scss";
@import "./modules/mod-heading-0001.scss";
@import "./modules/mod-media-0001.scss";
@import "./modules/mod-media-0002.scss";

blog-service-top.htmlの編集

blog-service-top.htmlの <div class="l-body-inner-0001__contents-wrapper"> の中に以下のように記述します。
前後のコードは略して、追記するコードだけを記載しています。

1
2
3
4
5
6
7
8
9
10
〜略〜
<div class="l-contents-type-0001">
  <div class="l-contents-type-0001__heading-wrapper">
    ここにheadingモジュールが入ります。
  </div>
  <div class="l-contents-type-0001__body">
    ここにcontainerモジュールが入ります。
  </div>
</div>
〜略〜

_l-contents-type-0001.scssの編集

src/scss/layouts/_l-contents-type-0001.scss に以下のように記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.l-contents-type-0001 {
  padding: 1px 8px;
  // .l-contents-type-0001のpadding-topを補完する初期値
  > :first-child {
    margin-top: 39px;
  }
  // .l-contents-type-0001のpadding-bottomを補完する初期値
  > :last-child {
    margin-bottom: 79px;
  }
  .l-contents-type-0001__heading-wrapper {
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 8px;
    box-sizing: border-box;
    @media #{$g__is-lg} {
      width: 100%;
    }
  }
  .l-contents-type-0001__body {
    width: 1200px;
    margin-top: 32px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 8px;
    box-sizing: border-box;
    @media #{$g__is-lg} {
      width: 100%;
    }
  }
}

h1見出しを設置する

h1見出しを設置していきます。

module-list.htmlに予め作成しておいた <h1 class="mod-heading-0001 mod-heading-0001--lv-1">見出し lv1</h1> をコピーして、blog-service-top.htmlの ここにheadingモジュールが入ります。 と書いてある箇所にペーストした後、文言を ブログサービストップ にします。

この段階でのblog-service-top.htmlの全容

blog-service-top.htmlは以下のようになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>中野ピク氏流CSS設計</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../stylesheets/html5reset-1.6.1.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel="stylesheet" href="../stylesheets/blog-service-top.css">
</head>
<body>
<div class="l-body-inner-0001">
  <div class="l-body-inner-0001__header-wrapper">
    <header class="mod-header-0001">
      <div class="mod-header-0001__inner">
        <div class="mod-header-0001__logo-area">
          <a href="#" class="mod-header-0001__logo">
            ロゴ
          </a>
        </div>
        <ul class="mod-header-0001__button-group">
          <li class="mod-header-0001__login-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm">ログイン</a>
          </li>
          <li class="mod-header-0001__sign-up-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm mod-button-0001--secondary">新規登録</a>
          </li>
        </ul>
      </div>
    </header>
  </div>
  <div class="l-body-inner-0001__contents-wrapper">
    <div class="l-contents-type-0001">
      <div class="l-contents-type-0001__heading-wrapper">
        <h1 class="mod-heading-0001 mod-heading-0001--lv-1">ブログサービストップ</h1>
      </div>
      <div class="l-contents-type-0001__body">
        ここにcontainerモジュールが入ります。
      </div>
    </div>
  </div>
  <div class="l-body-inner-0001__footer-wrapper">
    <footer class="mod-footer-0001">
      <div class="mod-footer-0001__copy-area">
        <a href="#" class="mod-footer-0001__copy">
          &copy;中野ピク氏
        </a>
      </div>
    </footer>
  </div>
</div>
</body>
</html>

表示確認

public/html/blog-service-top.html をブラウザで開いて確認してみてください。

この節のおわりに

この節では、l-contents-type-0001クラスとHTML文書構造を作成して、その中にh1見出しを設置することで、h1セクションができました。

次の節ではこのコードを読み返しながら、l-contents-type-0001の役割や特徴などについて解説していきます。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>この節では、コンテンツ領域の枠であるl-contents-type-0001を作成します。<br>今 第4章 4節 l-body-inner-0001のコードからポイントを読み取ろう https://css.nakano-pixy.com/2020/12/15/chapter-04-0004/ 2020-12-15T13:54:05.000Z 2021-02-06T09:38:54.770Z この節について

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

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

概要

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

  1. bodyタグの中に最初に設置するBlockクラス名は必ずl-body-inner-から始まるクラス名にする
  2. l-body-inner-xxxxの役割を理解する

1. bodyタグの中に最初に設置するBlockクラス名は必ずl-body-inner-から始まるクラス名にする

「とてもやさしいCSS設計」では、bodyタグの中に最初に設置するBlockクラス名は必ずl-body-inner-から始まるクラス名にすることを厳格に定めています。
最初に設置するBlockクラス名のルールを厳格に定めることで、クラスの命名に迷うことを減らし、本質的なスタイル設定に集中できます。

例えば以下のようなBlockクラス名を付けることができます。

  • l-body-inner-0001
  • l-body-inner-example-name

l-body-inner-から始まるBlockクラス名であれば、後に続く文字列は数字でも複数の単語でも、任意の文字列で構いません。

Elementクラス名は、BEMの命名規則に則って任意の名前を付けてください。
前の節で作成したElementクラスを具体例として挙げると以下のようなものがありました。

  • l-body-inner-0001__header-wrapper
  • l-body-inner-0001__contents-wrapper
  • l-body-inner-0001__footer-wrapper

l-body-inner-0001ではModifierクラスを定義しませんでしたが、BEMの命名規則に則ってModifierクラスを定義することもできます。

2. l-body-inner-xxxxの役割を理解する

l-body-inner-xxxxとしていますが、さきほど説明したようにxxxxの部分はどのような文字列でも構いません。

l-body-inner-xxxxはbodyタグの中に最初に設置するBlockクラスであり、そのElementクラスでページに水平線を引くようにして、いくつかの領域に分割する役割を担います。
また、基本的に全てのページで共通利用できるところまでをl-body-inner-xxxxで作成すると考えてください。

具体例として、前の節で作成したl-body-inner-0001では以下の3つの領域に分割していることがわかります。

  • ヘッダー領域
  • コンテンツ領域
  • フッター領域

ヘッダー領域とフッター領域には、予め作成しておいたmod-header-0001とmod-footer-0001を設置しました。
モジュール同士を入れ子にしていたときと同じく、これらのモジュールのスタイルには手を加えず、ただ置くだけで済んでいます。

デザインによっては4つ以上の領域に分けることもあるとは思いますが、今回の例では上述した3つの領域に分けています。

多くの場合、l-body-inner-0001だけで足りると思いますが、一つのサイト内で全く違う構造のデザインに対応する必要が出てきた場合にはl-body-inner-0002やl-body-inner-0003などのクラスを作成して対応します。

この節のおわりに

この節では、l-body-inner-xxxxの命名規則や役割について新たに学習しました。

次の節ではコンテンツ領域内のレイアウトについて学んでいきましょう。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>l-body-inner-0001のコードを読み返しながら、新しいポイントについて学んでいきましょう 第4章 3節 l-body-inner-0001を作ろう https://css.nakano-pixy.com/2020/12/15/chapter-04-0003/ 2020-12-15T13:47:48.000Z 2021-02-06T09:38:54.770Z この節について

これまでmodulesディレクトリの中にモジュールのファイルを作成してきましたが、この節ではlayoutsディレクトリの中にレイアウトのファイルを作成します。

レイアウトのクラスの作り方については、接頭辞がmod-ではなくl-になるだけで、モジュールと同じです。

この節ではまずl-body-inner-0001クラスとHTML文書構造を作成して、次の節でその役割や特徴について説明します。

Block名を決める

今回のBlock名は l-body-inner-0001 にします。

モジュールのクラスの接頭辞はmod-でしたが、レイアウトのクラスの接頭辞はl-です。

scssファイルの作成

ファイル名の命名規則はモジュールと同じで _Block名.scss です。

先ほど決めたBlock名の先頭にアンダースコア（_）を足したものがファイル名になりますので src/scss/layouts/_l-body-inner-0001.scss を作成します。

src/scss/blog-service-top.scssの編集

src/scss/blog-service-top.scssに @import "./layouts/l-body-inner-0001.scss"; を追記して、以下のようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.scss";

// layouts
@import "./layouts/l-body-inner-0001.scss";

// modules
@import "./modules/mod-button-0001.scss";
@import "./modules/mod-container-0001.scss";
@import "./modules/mod-footer-0001.scss";
@import "./modules/mod-header-0001.scss";
@import "./modules/mod-heading-0001.scss";
@import "./modules/mod-media-0001.scss";
@import "./modules/mod-media-0002.scss";

blog-service-top.htmlの編集

blog-service-top.htmlのbodyタグの中に以下のように追記します。
bodyタグから外側は略して、追記分だけを記述しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
〜略〜
<div class="l-body-inner-0001">
  <div class="l-body-inner-0001__header-wrapper">
    ここにヘッダーのモジュールが入ります。
  </div>
  <div class="l-body-inner-0001__contents-wrapper">
    ここにコンテンツ領域のレイアウトが入ります。
  </div>
  <div class="l-body-inner-0001__footer-wrapper">
    ここにフッターのモジュールが入ります。
  </div>
</div>
〜略〜

_l-body-inner-0001.scssの編集

_l-body-inner-0001.scss に以下のように記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.l-body-inner-0001 {
  position: relative;
  min-height: 100vh;
  padding-bottom: 41px;
  box-sizing: border-box;
  background-color: #f7f7f7;
  @media #{$g__is-md} {
    min-height: 0;
  }
  .l-body-inner-0001__header-wrapper {
  }
  .l-body-inner-0001__contents-wrapper {
  }
  .l-body-inner-0001__footer-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}

mod-header-0001を設置する

module-list.htmlに作成しておいたmod-header-0001をblog-service-top.htmlにコピー＆ペーストして以下のようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="l-body-inner-0001">
  <div class="l-body-inner-0001__header-wrapper">
    <header class="mod-header-0001">
      <div class="mod-header-0001__inner">
        <div class="mod-header-0001__logo-area">
          <a href="#" class="mod-header-0001__logo">
            ロゴ
          </a>
        </div>
        <ul class="mod-header-0001__button-group">
          <li class="mod-header-0001__login-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm">ログイン</a>
          </li>
          <li class="mod-header-0001__sign-up-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm mod-button-0001--secondary">新規登録</a>
          </li>
        </ul>
      </div>
    </header>
  </div>
  <div class="l-body-inner-0001__contents-wrapper">
    ここにコンテンツ領域のレイアウトが入ります。
  </div>
  <div class="l-body-inner-0001__footer-wrapper">
    ここにフッターのモジュールが入ります。
  </div>
</div>

module-list.htmlに作成しておいたmod-footer-0001をblog-service-top.htmlにコピー＆ペーストして以下のようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="l-body-inner-0001">
  <div class="l-body-inner-0001__header-wrapper">
    <header class="mod-header-0001">
      <div class="mod-header-0001__inner">
        <div class="mod-header-0001__logo-area">
          <a href="#" class="mod-header-0001__logo">
            ロゴ
          </a>
        </div>
        <ul class="mod-header-0001__button-group">
          <li class="mod-header-0001__login-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm">ログイン</a>
          </li>
          <li class="mod-header-0001__sign-up-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm mod-button-0001--secondary">新規登録</a>
          </li>
        </ul>
      </div>
    </header>
  </div>
  <div class="l-body-inner-0001__contents-wrapper">
    ここにコンテンツ領域のレイアウトが入ります。
  </div>
  <div class="l-body-inner-0001__footer-wrapper">
    <footer class="mod-footer-0001">
      <div class="mod-footer-0001__copy-area">
        <a href="#" class="mod-footer-0001__copy">
          &copy;中野ピク氏
        </a>
      </div>
    </footer>
  </div>
</div>

この節で編集したファイルの全容

src/scss/blog-service-top.scss は以下の通りになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.scss";

// layouts
@import "./layouts/l-body-inner-0001.scss";

// modules
@import "./modules/mod-button-0001.scss";
@import "./modules/mod-container-0001.scss";
@import "./modules/mod-footer-0001.scss";
@import "./modules/mod-header-0001.scss";
@import "./modules/mod-heading-0001.scss";
@import "./modules/mod-media-0001.scss";
@import "./modules/mod-media-0002.scss";

public/html/blog-service-top.html は以下の通りになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>中野ピク氏流CSS設計</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../stylesheets/html5reset-1.6.1.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel="stylesheet" href="../stylesheets/blog-service-top.css">
</head>
<body>
<div class="l-body-inner-0001">
  <div class="l-body-inner-0001__header-wrapper">
    <header class="mod-header-0001">
      <div class="mod-header-0001__inner">
        <div class="mod-header-0001__logo-area">
          <a href="#" class="mod-header-0001__logo">
            ロゴ
          </a>
        </div>
        <ul class="mod-header-0001__button-group">
          <li class="mod-header-0001__login-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm">ログイン</a>
          </li>
          <li class="mod-header-0001__sign-up-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm mod-button-0001--secondary">新規登録</a>
          </li>
        </ul>
      </div>
    </header>
  </div>
  <div class="l-body-inner-0001__contents-wrapper">
    ここにコンテンツ領域のレイアウトが入ります。
  </div>
  <div class="l-body-inner-0001__footer-wrapper">
    <footer class="mod-footer-0001">
      <div class="mod-footer-0001__copy-area">
        <a href="#" class="mod-footer-0001__copy">
          &copy;中野ピク氏
        </a>
      </div>
    </footer>
  </div>
</div>
</body>
</html>

src/scss/layouts/_l-body-inner-0001.scss は以下の通りになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.l-body-inner-0001 {
  position: relative;
  min-height: 100vh;
  padding-bottom: 41px;
  box-sizing: border-box;
  background-color: #f7f7f7;
  @media #{$g__is-md} {
    min-height: 0;
  }
  .l-body-inner-0001__header-wrapper {
  }
  .l-body-inner-0001__contents-wrapper {
  }
  .l-body-inner-0001__footer-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}

表示確認

public/html/blog-service-top.html をブラウザで開いて確認してみてください。

この節のおわりに

l-body-inner-0001クラスとHTML文書構造を作成して、その中にmod-header-0001とmod-footer-0001を設置することによって、全てのページに共通利用できる外枠部分ができました。

次の節ではこのコードを読み返しながら、l-body-inner-0001の役割や特徴について解説していきます。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>これまでmodulesディレクトリの中にモジュールのファイルを作成してきましたが、この節ではlayo 第4章 1節 ブログサービスのトップページを作る準備をしよう https://css.nakano-pixy.com/2020/12/15/chapter-04-0001/ 2020-12-15T13:30:27.000Z 2021-02-23T16:02:48.815Z この節について

この節では、第4章を進めていくにあたって必要となるファイルの準備を行っていきます。

blog-service-top.scssの作成

第3章までに作成してきたsrc/scss/module-list.scssを同じディレクトリ内にコピー＆ペーストして、そのファイル名をblog-service-top.scssにします。

blog-service-top.scssの編集

blog-service-top.scssでは、module-list.scssで使用していた*を使用せず、以下の通り必要なファイルだけを一つずつimportします。

1
2
3
4
5
6
7
8
9
10
11
12
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.scss";

// modules
@import "./modules/mod-button-0001.scss";
@import "./modules/mod-container-0001.scss";
@import "./modules/mod-footer-0001.scss";
@import "./modules/mod-header-0001.scss";
@import "./modules/mod-heading-0001.scss";
@import "./modules/mod-media-0001.scss";
@import "./modules/mod-media-0002.scss";

public/stylesheets/blog-service-top.cssの生成

src/scss/blog-service-top.scss をコンパイルして、public/stylesheets/blog-service-top.css が生成されるようにSassの設定をして、 blog-service-top.css を生成してください。

blog-service-top.htmlの作成

第3章までに作成してきた public/html/module-list.html を同じディレクトリ内にコピー＆ペーストして、そのファイル名を blog-service-top.html にします。

第4章では、この public/html/blog-service-top.html にHTMLを記述していきます。

blog-service-top.htmlの編集

先ほど生成したblog-service-top.cssを読み込みますので、public/html/blog-service-top.htmlの

1
<link rel="stylesheet" href="../stylesheets/module-list.css">

となっている箇所を

1
<link rel="stylesheet" href="../stylesheets/blog-service-top.css">

に変更します。

次に、bodyの中を全て削除して以下のようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>中野ピク氏流CSS設計</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../stylesheets/html5reset-1.6.1.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel="stylesheet" href="../stylesheets/blog-service-top.css">
</head>
<body>

</body>
</html>

この節のおわりに

SCSSファイルとHTMLファイルの作成をして、準備が完了しました。

次の節では、今回準備したコードを読み返しながら、新しいポイントについて解説していきます。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>この節では、第4章を進めていくにあたって必要となるファイルの準備を行っていきます。</p> <h2 第6章 5節 親要素の始端と終端の余白を可変にする方法について練習問題を通して理解しよう https://css.nakano-pixy.com/2020/11/22/chapter-06-0005/ 2020-11-22T11:09:41.000Z 2021-02-21T07:25:55.760Z この節のはじめに

まず、親要素の始端と終端の余白というのはどこのことを指しているかについて説明します。

「第3章 13節 mod-container-0001を作ろう」で作成したmod-container-0001のpaddingと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の始端の余白というのは「mod-container-0001のpadding-topとfirst-childのmargin-topを足した値」のことを指しており、mod-container-0001の終端の余白というのは「mod-container-0001のpadding-bottomとlast-childのmargin-bottomを足した値」のことを指しています。
つまり始端の余白の初期値は16pxで、終端の余白の初期値は40pxです。

mod-container-0001のpadding-topとpadding-bottomを1pxで設定しておいたことで、mod-container-0001の中に最初に設置される要素(first-child)が変化することによって始端の余白を初期値(16px)より小さくしたい場合や、最後に設置される要素(last-child)が変化することによって終端の余白を初期値(40px)より小さくしたい場合にも柔軟に対応できます。

この節では、「第3章 14節 mod-container-0001のコードからポイントを読み取ろう」で解説した、「first-childの前やlast-childの後の余白が変化する箇所は擬似クラスセレクタで親要素のpaddingを制御する」という方法について、mod-container-0001のfirst-childやlast-childが変化する具体例をもとに理解を深めていきましょう。

練習問題の基礎となるHTML

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

1
2
3
4
5
6
7
8
9
10
11
<section class="mod-container-0001">
  <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-0001.scss

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

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-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-0001が包括しています。

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

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

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

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

正しい答えの例

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

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

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

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

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

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

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

全ての条件を満たせるSCSS

答えはとても簡単です。

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

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

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

  // .mod-container-0001の子のとき
  .mod-container-0001 > & {
    &: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-0001の子のとき
  .mod-container-0001 > & {
    &:first-child {
      margin-top: 29px;
    }
    &:last-child {
      margin-bottom: 29px;
    }
  }
}

_mod-margin-tutorial-0004.scssは以下のようになりました。
mod-container-0001のlast-childには、もともとmargin-bottom: 39px;が設定されているため、このファイルには記述していません。

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

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

このmarginの役割について

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

marginの方向について

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

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

デザインにもよりますが、このとてもやさしいCSS設計に沿ってコーディングをした場合、特にl-contents-type-xxxxやmod-container-xxxxを色々なページで再利用していくと、その中に一番目に設置される要素または最後に設置される要素がページによって変更される場合はよくあり、それらの要素が変更されたことにより、親要素の始端や終端の余白の変更が必要となる場合もあります。

そのようなとき、例えばl-contents-type-0001の始端と終端の余白を変更する基本的な方法として、l-contents-type-0001のModifierクラスを新しく定義して付与したり、l-contents-type-0002を新しく定義してクラスを差し替えたりする方法があります。

それらの基本的な方法に比べて、この節で解説してきた方法は子要素のmarginを使って親要素のpaddingを補完するという点から見ていくと変則的な方法に見えます。しかし、少し視点を変えて、始端と終端の余白を変更する理由がどのようなものであったかという点から見ていくと「一番上に設置される要素が変更された」「一番下に設置される要素が変更された」ということをきっかけに余白を変更する必要が生じているため、first-childやlast-childのセレクタを使用して余白を変更することは自然なようにも見てとれます。

この方法を使用するとクラスの付け替えが不要であることから、プログラムによって動的に表示要素が変化するページはもちろんのこと、静的なページの作成においてもコードの管理をしやすくなることがありますので、ぜひ選択肢のひとつとして検討してみてください。

表示確認

public/html/margin-tutorial.html をブラウザで開いて確認してみてください。

この節のおわりに

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

mod-container-0001はこの練習問題で使用することも見越してpadding-topとpadding-bottomを1pxに設定していましたが、ほとんどの要素は初めから可変にしておく必要はありません。

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

モジュールを作成する時点において、first-childやlast-childが変化するかどうかわからない場合や、それらが変化するとしても余白を変化させない場合は、親要素のpaddingだけを使用して余白を設定しておき、可変にする必要に迫られてから対応するのが良いと思います。

過剰な実装にならないように、適宜使い分けてみてください。

続きはこちら

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

]]> <h2 id="この節のはじめに"><a href="#この節のはじめに" class="headerlink" title="この節のはじめに"></a>この節のはじめに</h2><p>まず、親要素の始端と終端の余白というのはどこのことを指しているかについて説明します。</p> 第6章 4節 親要素の始端と終端の余白を可変にする方法についての練習問題の準備をしよう https://css.nakano-pixy.com/2020/11/21/chapter-06-0004/ 2020-11-20T18:17:55.000Z 2021-02-19T12:07:06.449Z この節について

この節では、次の節で学習するための下準備を行っていきます。

_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;
}

margin-tutorial.htmlの編集

margin-tutorial.htmlのmod-container-0001の下に以下の4つのタグを追記し、

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

以下のようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
〜略〜
<section class="mod-container-0001">
  <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>
〜略〜

追記した後のmargin-tutorial.htmlの全容は以下のようになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>中野ピク氏流CSS設計</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../stylesheets/html5reset-1.6.1.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  <link rel="stylesheet" href="../stylesheets/module-list.css">
</head>
<body>
<div class="l-body-inner-0001">
  <div class="l-body-inner-0001__header-wrapper">
    <header class="mod-header-0001">
      <div class="mod-header-0001__inner">
        <div class="mod-header-0001__logo-area">
          <a href="#" class="mod-header-0001__logo">
            ロゴ
          </a>
        </div>
        <ul class="mod-header-0001__button-group">
          <li class="mod-header-0001__login-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm">ログイン</a>
          </li>
          <li class="mod-header-0001__sign-up-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm mod-button-0001--secondary">新規登録</a>
          </li>
        </ul>
      </div>
    </header>
  </div>
  <div class="l-body-inner-0001__contents-wrapper">
    <div class="l-contents-type-0001">
      <div class="l-contents-type-0001__heading-wrapper">
        <h1 class="mod-heading-0001 mod-heading-0001--lv-1">margin設定についての練習問題</h1>
      </div>
      <div class="l-contents-type-0001__body">
        <section class="mod-container-0001">
          <div class="mod-container-0001__heading-wrapper">
            <h2 class="mod-heading-0001">h2セクション</h2>
          </div>
          <div class="mod-container-0001__body">
            <ul class="mod-margin-tutorial-0001">
              <li class="mod-margin-tutorial-0001__item-basic">
                item-basic
              </li>
              <li class="mod-margin-tutorial-0001__item-1">
                item-1
              </li>
              <li class="mod-margin-tutorial-0001__item-2">
                item-2
              </li>
              <li class="mod-margin-tutorial-0001__item-3">
                item-3
              </li>
            </ul>
          </div>
        </section>
        <section class="mod-container-0001">
          <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>
      </div>
    </div>
  </div>
  <div class="l-body-inner-0001__footer-wrapper">
    <footer class="mod-footer-0001">
      <div class="mod-footer-0001__copy-area">
        <a href="#" class="mod-footer-0001__copy">
          &copy;中野ピク氏
        </a>
      </div>
    </footer>
  </div>
</div>
</body>
</html>

この節のおわりに

この節では、次の節で学習するための下準備を行いました。

次の節では、実際に手を動かしながら、mod-container-0001の始端と終端の余白を可変にする方法について、練習問題を通して理解を深めていきましょう。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>この節では、次の節で学習するための下準備を行っていきます。</p> <h2 id="mod-marg 第6章 3節 後で困らない要素間のmarginの設定方法を練習問題を通して理解しよう https://css.nakano-pixy.com/2020/11/20/chapter-06-0003/ 2020-11-20T09:00:12.000Z 2021-02-21T03:36:35.171Z この節のはじめに

モジュールの再利用をするときやプログラムによって表示要素を出し分けるとき隣接する要素の組み合わせは変化し、その組み合わせが変化したときには、2つの要素間のmarginも変更したい場合があります。

この節では、隣接する要素の組み合わせが変化する具体例をもとに、後で困ることのないmarginの設定方法について学習していきましょう。

margin設定についての練習問題の基礎となるHTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="mod-margin-tutorial-0001">
  <li class="mod-margin-tutorial-0001__item-basic">
    item-basic
  </li>
  <li class="mod-margin-tutorial-0001__item-1">
    item-1
  </li>
  <li class="mod-margin-tutorial-0001__item-2">
    item-2
  </li>
  <li class="mod-margin-tutorial-0001__item-3">
    item-3
  </li>
</ul>

margin設定についての練習問題の基礎となるSCSS

前の節で以下の通り記述した_mod-margin-tutorial-0001.scssを基礎として、少し変更しながら説明していきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.mod-margin-tutorial-0001 {
  display: flex;
  flex-direction: column;
  .mod-margin-tutorial-0001__item-basic {
    background: #dddddd;
  }
  .mod-margin-tutorial-0001__item-1 {
    background: #ffdddd;
  }
  .mod-margin-tutorial-0001__item-2 {
    background: #ddffdd;
  }
  .mod-margin-tutorial-0001__item-3 {
    background: #ddddff;
  }
}

margin設定についての練習問題を始める前に

「基礎となるHTML」では、以下の4つのElementクラスが付与されたli要素をul要素が包括しています。

  • mod-margin-tutorial-0001__item-basic
  • mod-margin-tutorial-0001__item-1
  • mod-margin-tutorial-0001__item-2
  • mod-margin-tutorial-0001__item-3

練習問題の説明をするにあたって、上記した4つのElementクラスが付与されたli要素をそれぞれ以下のように表現します。

  • item-basic
  • item-1
  • item-2
  • item-3

margin設定についての練習問題で想定する条件

このmargin設定についての練習問題では、以下の条件を満たせるようなmarginをElementクラスに設定していきましょう。

  • ul要素の中には、item-basic、item-1、item-2、item-3がランダムで1つまたは2つ表示されるものとします。
  • item-1とitem-1など、同じ要素が2つ表示される場合もあるものとします。
  • いずれか1つだけが表示される場合のmarginは0とします。
  • 隣接要素の無い方向、つまり最初のli要素のmargin-top、最後のli要素のmargin-bottomは0とします。
  • item-basicとitem-1、item-2、item-3のいずれかが隣接する場合、2つの要素間のmarginは20pxとします。
  • item-1、item-2、item-3のいずれか2つが隣接する場合は、2つの要素間のmarginは、item番号×item番号×10pxの式で算出した値を設定するものとします。例えばitem-1とitem-2が隣接する場合のmarginは、1×2×10=20pxとします。

この条件を満たすSCSSを書いてみてください

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

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

正しい答えの例

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

まずは表示されるパターンを整理してみます。
表示されるパターンさえ整理されれば、あとは簡単です。

いずれか1つ表示されるパターン

以下のパターンがありますが、いずれの場合もmarginは0です。

  • item-basic
  • item-1
  • item-2
  • item-3

いずれか2つ表示されるパターン

以下のパターンがあります。

item-basicが前にくるパターン

  • item-basic、item-basicの順に表示 margin-top: 20px;
  • item-basic、item-1の順に表示 margin-top: 20px;
  • item-basic、item-2の順に表示 margin-top: 20px;
  • item-basic、item-3の順に表示 margin-top: 20px;

item-1が前にくるパターン

  • item-1、item-basicの順に表示 margin-top: 20px;
  • item-1、item-1の順に表示 margin-top: 10px;
  • item-1、item-2の順に表示 margin-top: 20px;
  • item-1、item-3の順に表示 margin-top: 30px;

item-2が前にくるパターン

  • item-2、item-basicの順に表示 margin-top: 20px;
  • item-2、item-1の順に表示 margin-top: 20px;
  • item-2、item-2の順に表示 margin-top: 40px;
  • item-2、item-3の順に表示 margin-top: 60px;

item-3が前にくるパターン

  • item-3、item-basicの順に表示 margin-top: 20px;
  • item-3、item-1の順に表示 margin-top: 30px;
  • item-3、item-2の順に表示 margin-top: 60px;
  • item-3、item-3の順に表示 margin-top: 90px;

全ての条件を満たせるSCSS

答えはとても簡単です。

「第3章 14節 mod-container-0001のコードからポイントを読み取ろう」で学習した「隣接する兄弟要素が変化する可能性のある箇所は隣接兄弟要素セレクタでmarginを制御する」というポイントの通り、以下のように隣接兄弟要素セレクタを使ってmarginを制御します。

以下のように書くのが最も基本的な方法だと思います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.mod-margin-tutorial-0001 {
  display: flex;
  flex-direction: column;
  .mod-margin-tutorial-0001__item-basic {
    background: #dddddd;
    & + .mod-margin-tutorial-0001__item-basic,
    & + .mod-margin-tutorial-0001__item-1,
    & + .mod-margin-tutorial-0001__item-2,
    & + .mod-margin-tutorial-0001__item-3 {
      margin-top: 20px;
    }
  }
  .mod-margin-tutorial-0001__item-1 {
    background: #ffdddd;
    & + .mod-margin-tutorial-0001__item-basic,
    & + .mod-margin-tutorial-0001__item-2 {
      margin-top: 20px;
    }
    & + .mod-margin-tutorial-0001__item-1 {
      margin-top: 10px;
    }
    & + .mod-margin-tutorial-0001__item-3 {
      margin-top: 30px;
    }
  }
  .mod-margin-tutorial-0001__item-2 {
    background: #ddffdd;
    & + .mod-margin-tutorial-0001__item-basic,
    & + .mod-margin-tutorial-0001__item-1 {
      margin-top: 20px;
    }
    & + .mod-margin-tutorial-0001__item-2 {
      margin-top: 40px;
    }
    & + .mod-margin-tutorial-0001__item-3 {
      margin-top: 60px;
    }
  }
  .mod-margin-tutorial-0001__item-3 {
    background: #ddddff;
    & + .mod-margin-tutorial-0001__item-basic {
      margin-top: 20px;
    }
    & + .mod-margin-tutorial-0001__item-1 {
      margin-top: 30px;
    }
    & + .mod-margin-tutorial-0001__item-2 {
      margin-top: 60px;
    }
    & + .mod-margin-tutorial-0001__item-3 {
      margin-top: 90px;
    }
  }
}

参考程度ですが、:not(:first-child)擬似クラスを使用して以下のように書き換えることもできますので、実際のWebサイト制作では、読みやすさや編集効率などを考慮して使い分けると良いと思います。
以下のように擬似クラスを使用する場合と、隣接兄弟要素セレクタを使用する場合ではセレクタの詳細度は等しいため、隣接兄弟要素セレクタの方をより下に記述するようにしてください。
実際のWebサイト制作では、一番よく使う値がわかってきた段階で:not(:first-child)擬似クラスのセレクタで置き換えるとその後の編集効率が良くなります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.mod-margin-tutorial-0001 {
  display: flex;
  flex-direction: column;
  .mod-margin-tutorial-0001__item-basic {
    background: #dddddd;
    &:not(:first-child) {
      margin-top: 20px;
    }
  }
  .mod-margin-tutorial-0001__item-1 {
    background: #ffdddd;
    &:not(:first-child) {
      margin-top: 20px;
    }
    & + .mod-margin-tutorial-0001__item-1 {
      margin-top: 10px;
    }
    & + .mod-margin-tutorial-0001__item-3 {
      margin-top: 30px;
    }
  }
  .mod-margin-tutorial-0001__item-2 {
    background: #ddffdd;
    &:not(:first-child) {
      margin-top: 20px;
    }
    & + .mod-margin-tutorial-0001__item-2 {
      margin-top: 40px;
    }
    & + .mod-margin-tutorial-0001__item-3 {
      margin-top: 60px;
    }
  }
  .mod-margin-tutorial-0001__item-3 {
    background: #ddddff;
    & + .mod-margin-tutorial-0001__item-basic {
      margin-top: 20px;
    }
    & + .mod-margin-tutorial-0001__item-1 {
      margin-top: 30px;
    }
    & + .mod-margin-tutorial-0001__item-2 {
      margin-top: 60px;
    }
    & + .mod-margin-tutorial-0001__item-3 {
      margin-top: 90px;
    }
  }
}

marginの方向について

この練習問題では、margin-topを使用しました。
実際のWebサイト制作でもmargin-topを設定する機会が一番多くなると思います。

少し補足説明をしておきますが、以下のように flex-direction: column-reverse; を設定した場合は視覚的には下から上へ要素が並べられるため、隣接兄弟要素セレクタでmargin-bottomを設定することになります。

1
2
3
4
5
.mod-margin-tutorial-0001 {
  display: flex;
  flex-direction: column-reverse;
  〜略〜
}

以下の場合はmargin-leftを設定することになります。

1
2
3
4
5
.mod-margin-tutorial-0001 {
  display: flex;
  flex-direction: row;
  〜略〜
}

以下の場合はmargin-rightを設定することになります。

1
2
3
4
5
.mod-margin-tutorial-0001 {
  display: flex;
  flex-direction: row-reverse;
  〜略〜
}

この節のおわりに

このmargin設定についての練習問題をやってみることで、「第3章 4節 mod-heading-0001のコードからポイントを読み取ろう」で学習した「2つの要素間のmarginを設定するときは後の要素に設定する」というポイントのメリットや、逆に前の要素にmarginを使用してしまうと、隣接要素の組み合わせが変化した場合に困ることになるということがわかったと思います。

一応補足しておくと、「隣接する2つの要素の組み合わせが変化しない」または「隣接する2つの要素の組み合わせが変化したとしてもmarginは変化しない」ということが決まっている箇所であれば、前の要素にmarginを設定しても問題は起こりませんが、制作や運用の現場では、ときに予期しない変更依頼がくることもあります。

前の要素にmarginを設定することに大きなメリットが無いのであれば「2つの要素間のmarginを設定するときは後の要素に設定する」という方法を選択しておくと、予期しない変更があったときにも柔軟に対応できるのでお勧めです。

続きはこちら

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

]]> <h2 id="この節のはじめに"><a href="#この節のはじめに" class="headerlink" title="この節のはじめに"></a>この節のはじめに</h2><p>モジュールの再利用をするときやプログラムによって表示要素を出し分けるとき隣接する要素の組み合 第6章 2節 要素間のmargin設定についての練習問題の準備をしよう https://css.nakano-pixy.com/2020/11/17/chapter-06-0002/ 2020-11-17T14:54:12.000Z 2021-02-23T16:25:19.999Z この節について

この節では、margin設定についての練習問題を進めていくにあたって必要となるファイルの準備を行っていきます。

margin-tutorial.htmlの作成

まずは空のHTMLファイルで良いので public/html/margin-tutorial.html を作成してください。
コマンドで作成しても良いですし、右クリックなどで開くコンテキストメニューなどからでも良いです。

第6章のmargin設定についての練習問題では、この public/html/margin-tutorial.html にHTMLを記述していきます。

Windowsのコマンドプロンプトで作成する場合

tutorialディレクトリ内で以下のコマンドを実行すると空ファイルが作成できます。

1
copy nul public\html\margin-tutorial.html

Macのターミナルで作成する場合

tutorialディレクトリ内で以下のコマンドを実行すると空ファイルが作成できます。

1
touch public/html/margin-tutorial.html

margin-tutorial.htmlの編集

margin-tutorial.html には以下のように記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>中野ピク氏流CSS設計</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../stylesheets/html5reset-1.6.1.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  <link rel="stylesheet" href="../stylesheets/module-list.css">
</head>
<body>
<div class="l-body-inner-0001">
  <div class="l-body-inner-0001__header-wrapper">
    <header class="mod-header-0001">
      <div class="mod-header-0001__inner">
        <div class="mod-header-0001__logo-area">
          <a href="#" class="mod-header-0001__logo">
            ロゴ
          </a>
        </div>
        <ul class="mod-header-0001__button-group">
          <li class="mod-header-0001__login-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm">ログイン</a>
          </li>
          <li class="mod-header-0001__sign-up-button-wrapper">
            <a href="#" class="mod-button-0001 mod-button-0001--size-sm mod-button-0001--secondary">新規登録</a>
          </li>
        </ul>
      </div>
    </header>
  </div>
  <div class="l-body-inner-0001__contents-wrapper">
    <div class="l-contents-type-0001">
      <div class="l-contents-type-0001__heading-wrapper">
        <h1 class="mod-heading-0001 mod-heading-0001--lv-1">margin設定についての練習問題</h1>
      </div>
      <div class="l-contents-type-0001__body">
        <section class="mod-container-0001">
          <div class="mod-container-0001__heading-wrapper">
            <h2 class="mod-heading-0001">h2セクション</h2>
          </div>
          <div class="mod-container-0001__body">
            <ul class="mod-margin-tutorial-0001">
              <li class="mod-margin-tutorial-0001__item-basic">
                item-basic
              </li>
              <li class="mod-margin-tutorial-0001__item-1">
                item-1
              </li>
              <li class="mod-margin-tutorial-0001__item-2">
                item-2
              </li>
              <li class="mod-margin-tutorial-0001__item-3">
                item-3
              </li>
            </ul>
          </div>
        </section>
      </div>
    </div>
  </div>
  <div class="l-body-inner-0001__footer-wrapper">
    <footer class="mod-footer-0001">
      <div class="mod-footer-0001__copy-area">
        <a href="#" class="mod-footer-0001__copy">
          &copy;中野ピク氏
        </a>
      </div>
    </footer>
  </div>
</div>
</body>
</html>

上記したHTMLのうち、練習問題では、以下の部分だけを使用します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="mod-margin-tutorial-0001">
  <li class="mod-margin-tutorial-0001__item-basic">
    item-basic
  </li>
  <li class="mod-margin-tutorial-0001__item-1">
    item-1
  </li>
  <li class="mod-margin-tutorial-0001__item-2">
    item-2
  </li>
  <li class="mod-margin-tutorial-0001__item-3">
    item-3
  </li>
</ul>

CSSファイルについて

練習問題用のHTMLファイルなので、専用のCSSファイルは作成せずにmodule-list.cssを読み込むことにします。

src/scss/module-list.scssの編集

src/scss/module-list.scssに

1
2
// layouts
@import "./layouts/*";

を追記して、以下のようにします。

1
2
3
4
5
6
7
8
9
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.scss";

// layouts
@import "./layouts/*";

// modules
@import "./modules/*";

_mod-margin-tutorial-0001.scssの作成

src/scss/modules/_mod-margin-tutorial-0001.scss を作成します。

_mod-margin-tutorial-0001.scssの編集

margin設定についての練習問題で使用するモジュールのクラスの基礎となる部分を作成します。

_mod-margin-tutorial-0001.scssに以下のように記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.mod-margin-tutorial-0001 {
  display: flex;
  flex-direction: column;
  .mod-margin-tutorial-0001__item-basic {
    background: #dddddd;
  }
  .mod-margin-tutorial-0001__item-1 {
    background: #ffdddd;
  }
  .mod-margin-tutorial-0001__item-2 {
    background: #ddffdd;
  }
  .mod-margin-tutorial-0001__item-3 {
    background: #ddddff;
  }
}

表示確認

public/html/margin-tutorial.html をブラウザで開いて確認してみてください。

この節のおわりに

この節では、margin設定についての練習問題で使用するファイルの準備だけを行いました。

次の節では、実際に手を動かしながら、プログラムによって表示要素の数や順番が変化する動的なページにも対応しやすいmarginの設定方法を学習していきましょう。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>この節では、margin設定についての練習問題を進めていくにあたって必要となるファイルの準備を行って 第6章 1節 marginを制御する方法について復習しよう https://css.nakano-pixy.com/2020/11/13/chapter-06-0001/ 2020-11-13T10:46:16.000Z 2021-02-21T07:25:55.760Z この節について

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

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

概要

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

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

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

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

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

実際には、Blockクラスのmarginは、first-childやnot(:first-child)などの擬似クラスを使用したり、隣接兄弟要素セレクタを使用するなどして、条件付きで設定する方が編集効率の面で効果的な場合が多くありますが、第2章の段階では最も簡単で覚えやすい方法として「marginはBlockクラスに設定しない」としました。

擬似クラスや隣接兄弟要素セレクタを使用して条件付きでmarginを設定する方法については、この第6章のmargin設定についての練習問題をやりながら具体的に学習できるようにしています。

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

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

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

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

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

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

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

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

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

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

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

この節のおわりに

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

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>これまでmarginを制御する方法についていくつかのポイントを学習してきましたが、比較的わかり難い部 第6章 概要 marginを制御する方法についてより深く理解しよう https://css.nakano-pixy.com/2020/11/13/chapter-06-summary/ 2020-11-13T05:26:38.000Z 2021-02-12T10:49:42.857Z この章について

marginは誰もが使用する基本的なプロパティであると同時に、CSS設計をするうえでは、あとで邪魔にならないように設定していくのが難しいプロパティでもあります。

レイアウトのクラスやモジュールのクラスを適切に組み合わせてページを作成し、長期的にCSSをメンテナンスしていくには、marginを制御する方法についてより深く理解することがとても効果的です。

marginを制御する方法については、第3章で全て紹介を終えていますが、比較的ややこしい部分でもあると思いますので、この章で復習して知識を正しく定着させていきましょう。

続きはこちら

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

]]> <h2 id="この章について"><a href="#この章について" class="headerlink" title="この章について"></a>この章について</h2><p>marginは誰もが使用する基本的なプロパティであると同時に、CSS設計をするうえでは、あとで邪魔に 第5章 まとめ https://css.nakano-pixy.com/2020/11/12/chapter-05-digest/ 2020-11-12T12:29:25.000Z 2021-02-06T09:38:54.771Z この節について

完成したblog-service-top.htmlのコードを元に、l-body-inner-xxxx、l-contents-type-xxxx、mod-container-xxxxについて、補足説明をしていこうと思います。

bodyタグからh2セクションの外郭(mod-container-xxxx)までの定型化について

完成したblog-service-top.htmlのHTML文書構造のツリーを簡略化すると以下のように表すことができます。

  • body
    • l-body-inner-0001
      • mod-header-0001
      • l-contents-type-0001
        • mod-heading-0001（h1見出し）
        • mod-container-0001
          • mod-heading-0001（h2見出し）
          • mod-media-0001
        • mod-container-0001
          • mod-heading-0001（h2見出し）
          • mod-media-0002
        • mod-container-0001
          • mod-heading-0001（h2見出し）
          • mod-media-0002
      • mod-footer-0001

「第4章 7節 レイアウトのクラスの総合的な特徴や役割について学ぼう」で「必ずbodyタグ、l-body-inner-xxxx、l-contents-type-xxxxの順に入れ子にして、h1セクションを作成する」ということについて説明しました。

「第3章 14節 mod-container-0001のコードからポイントを読み取ろう」で「h2のセクションの外郭を担うのがmod-container-xxxxの役割」であるということについて説明しました。

第4章と第3章で説明したこれらのことが、完成したblog-service-top.htmlのHTML文書のツリーにも当てはまることがわかります。

この「とてもやさしいCSS設計」では「常にbodyタグ、l-body-inner-xxxx、l-contents-type-xxxx、mod-container-xxxxの順に入れ子にして、その中にh2タグを設置する。」という風に、h2セクションの外郭までのクラス命名規則とページの構造を定型化して捉えられるように設計指針を定めることで、クラスの命名やブロックの分け方などに迷うことを減らし、本質的なスタイリングに集中できるようにしています。

mod-container-xxxxの中に設置する要素について

また、「第3章 14節 mod-container-0001のコードからポイントを読み取ろう」で一度説明したことの繰り返しになりますが、h2セクション内に設置する要素には特にクラス名のルールは設けていません。
あまり細部まで厳格なルールを設けると後から変更し難いコードになってしまう側面もあるため、厳格なルールを設けるのはh2セクションの外郭までに留めています。

第5章までに作成したblog-service-top.htmlでは、mod-container-0001の中にmod-media-0001やmod-media-0002が設置されて、それ以上モジュールが入れ子になることはありませんでしたが、実際のWebサイト制作ではmod-container-xxxxの中に色々なモジュールが多重に入れ子になる場合がほとんどだと思います。

その場合も特に難しいことはなく、mod-header-0001の中にmod-button-0001を入れ子にしたときと同じく、親モジュールのElementクラスで表示位置や幅を決め、その中に子モジュールを設置する。という方法を繰り返していくだけでコンテンツは上手く配置できると思います。

ページ作成手順のまとめ

実際にページを作成するときに、クラス命名規則などを手早く確認できるようにまとめておきます。

ページを作成する手順の概要

  1. bodyタグの中に、l-body-inner-0001を設置する
  2. l-body-inner-0001の中にmod-header-0001を設置する
  3. l-body-inner-0001の中にmod-footer-0001を設置する
  4. l-body-inner-0001の中にl-contents-type-0001を設置する
  5. l-contents-type-0001の中にh1タグとh1に属するコンテンツを設置する
  6. l-contents-type-0001の中にmod-container-0001を設置する
  7. mod-container-0001の中に適宜モジュールを入れ子にしていくとページが完成する

1. bodyタグの中に、l-body-inner-0001を設置する

bodyタグの中に最初に設置されるクラスが、l-body-inner-0001です。
bodyタグの中に最初に設置するレイアウトのクラスの命名規則はl-body-inner-xxxxとするように厳格に定めています。
そのElementクラスで、以下の3つの領域に分けます。

  • ヘッダー領域
  • コンテンツ領域
  • フッター領域

デザインによっては4つ以上の領域に分けることもあります。

2. l-body-inner-0001の中にmod-header-0001を設置する

ヘッダー領域内にmod-header-0001を設置します。

3. l-body-inner-0001の中にmod-footer-0001を設置する

フッター領域内にmod-footer-0001を設置します。

4. l-body-inner-0001の中にl-contents-type-0001を設置する

コンテンツ領域内にl-contents-type-0001を設置します。
コンテンツ領域に設置するレイアウトのクラスの命名規則はl-contents-type-xxxxとするように厳格に定めています。
そのElementクラスで、以下のことをします。

  • 水平線を引くようにして、いくつかの領域に分ける
  • 領域ごとに幅を決めて、センタリングが必要な場合は margin-right: 0; margin-left: 0; などを設定してセンタリングする
  • 領域内をカラム分けする場合はカラム分けをする

ここまでが、l-contents-type-xxxxの役割です。

5. l-contents-type-0001の中にh1タグとh1に属するコンテンツを設置する

さきほど分けた領域のうち、見出し領域にh1タグを設置します。

他にもh1セクションに属するコンテンツがある場合は設置し、h1セクションにあたる部分を完成させます。

6. l-contents-type-0001の中にmod-container-0001を設置する

さきほど分けた領域のうち、h2セクションにあたる領域にmod-container-0001を設置します。
h2セクションの外郭として使用する要素のクラス命名規則はmod-container-xxxxとするように厳格に定めています。

bodyタグ、l-body-inner-xxxx、l-contents-type-xxxx、mod-container-xxxx の順に入れ子にします。

bodyタグ、l-body-inner-xxxx、l-contents-type-xxxx までがh1セクション、mod-container-xxxxからはh2セクションとしてコーディングします。

7. mod-container-0001の中に適宜モジュールを入れ子にしていくとページが完成する

h2セクション内に適宜モジュールを入れ子にしていき、隣接兄弟要素セレクタやfirst-child、last-childなどで余白調整をしていくとページが完成します。

この節のおわりに

いよいよページの作成まで完了し、レイアウトのクラスについての説明を終えました。

「第3章 - まとめ」や「第4章 まとめ」に書いた項目について、ご自身にとって思い出しやすい表現に変えて、すぐに確認できる場所に書き出しておいてから、実際にコーディングをするときにそれらのポイントを確認しながらコーディングしていくと良いかもしれません。

最初のうちは思い出すのに苦労するかもしれませんが、継続していくうちにパターンが身についてあまり頭を使わなくても自然とできるようになってくると思います。

チュートリアルを最後まで終えたときに、まだ身についていないと感じた場合は、2章から何回か繰り返してみるのも良いと思います。

すぐにはできなくとも、焦らずに学習と実践を繰り返し行なってみてください。

続きはこちら

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

]]> <h2 id="この節について"><a href="#この節について" class="headerlink" title="この節について"></a>この節について</h2><p>完成したblog-service-top.htmlのコードを元に、l-body-inner-xxxx