セクションの命名規則とコーディングルール

目次

セクション（section）のカスタマイズに関する規則

CSSでセクションのカスタマイズをする際に遵守すべき命名規則とコーディングルールについてまとめています。

セクション（section）の配置

セクション（section）のパーツ配置についてはこちらのページをご確認ください
セクションの配置

1.セクション（section）の命名規則

セクションに独自クラスを付与する場合、末尾に「_sec」をつけたものを命名してください。
なお、「●●_sec」へのオプションクラスとして使うクラスには「 _sec」はつけなくても構いません。
  命名規則 命名例
セクション（section） [任意のクラス名]_sec custom_sec,
bg_sec

2. innerについて

公開画面では、セクションの中に「inner」というクラスのついたdivが生成されます。
こちらはベースCSSで以下のスタイルが当たっていますが、原則としてこのスタイルはそのまま使用してください。
（デザイン上、余白をなくしたいなど特別な事情がある場合は除く）

【PC・SP共通】

  • max-width: 1100px;
  • margin: 0 auto;
  • padding: 20px;
  • width: 100%;
  • inner
注意事項
以前の案件では、inner全体に対して、tab時にmax-width: 640px; が記述されているケースもありますが、その場合にはそのまま使用して構いません。
記述が入っていない場合には、特に指示がない限りは上記を追記する必要はありません。

また、innerは編集画面上では触ることができないため、クラスをつけることができません。
顧客の混乱を防ぐために、innerに対しては、必要がない限りはCSSでの調整はなるべく加えないようにしてください。
デザイン上、innerに対してデザインを当てる必要がある場合には、セクションに独自クラスを付けて紐づける形で記述をしてください。

//新CMSコピー元での記述例

/*----------------------------------
    main（コンテンツ）
----------------------------------*/
@include theme-fo-base {
  &.maxW_sec {
    .inner {
      ここに記述
    }
    ...

注意事項
デザイン上、innerの幅を広げたり左右の余白をゼロにした場合などは、tab、sp時に画面の端にコンテンツが余白なくピッタリくっついてしまうことがありますので、必ず調整してください。
特別な指定がない限りは、原則として左右は画面端から最低20px空けるようにしてください。
  • innerの余白設定NG例

3. 余白のカスタマイズについて

余白の原則

セクション間の余白はサイト内で統一するように構築してください。
カンプ上で「セクション間余白 100px」のようにテキストで指定されている場合もあります。

デザイン上、一部のセクションの余白を変更したい場合には、該当のセクションに独自クラスをつけ、
その中で余白に対するスタイルを記述します。
注意事項
原則として、セクションにmarginで余白をつけることは禁止されています。
marginを使うと、編集画面から余白の調整ができなくなったり、背景画像や背景色に余白がついてしまい顧客が混乱することにもつながりますので、ご留意ください。

新CMSでの余白の記述（サイト全体に対する記述）

セクション余白の変更が必要な場合は「カスタム用 common（ウェブサイト共通）」内のmixin「sectionSpace」に対して記述を行います。
( )内に指定したいサイズ(例：100px)を入れるとその値が適用され、数値が入ってない場合はデフォルト設定が適用されます。
サイト全体に対して余白を調整する場合は、独自クラスなしでCSSにて直接指定して構いません。

/*----------- 外観 --------------*/
.theme-fo-base {
  .wrapper {
    .contents {
      //各セクションの余白
      section {
        padding: $section_padding;
        @include breakpoint-sp {
          padding: $section_sp_padding;
        }
      }
    }
  }
}

旧CMSでの余白の記述（サイト全体に対する記述）

セクション余白の変更は「common（ウェブサイト共通）」内の「外観」の部分に記述を行います。
コピー元サイトでは数値に変数が当てられていますので、こちらを利用すると便利です。
特定のセクションのみの余白を変更する場合や、その他のスタイルを当てる場合には、独自クラスを付与し、section内ににネストの形で記述を行います。

※カスタムCSS内で「セクション余白」で検索すると変数箇所が見つかります。

/*----------- 外観 --------------*/
.theme-fo-base {
  .wrapper {
    .contents {
      //各セクションの余白
      section {
        padding: $section_padding;
        @include breakpoint-sp {
          padding: $section_sp_padding;
        }
      }
    }
  }
}

変数の記述箇所

//セクション余白
$section_padding: 70px 0 60px; //PC時のパディング
$section_sp_padding: 0; //SP時のパディング

4. 余白以外のカスタマイズについて

必ず独自クラスをつけた上で、その中で効くようにスタイルを記述してください。

新CMSでの記述

一部のセクションに対する余白の変更やスタイル調整が必要な場合は「main（コンテンツ） 」内のtheme-fo-baseのmixinの中にネストの形で記述を行います。
※カスタムCSS内で「main（コンテンツ）」で検索すると見つかります。

/*----------------------------------
    main（コンテンツ）
----------------------------------*/
@include theme-fo-base {
  //テストセクション ●●ページで使用
  &.test_sec {
    //ここに記述
  }
  .inner {
    .row {
      …以下省略

旧CMSでの記述

新CMSと同様です。
注意事項
旧CMSではTOPページと下層ページで記述場所が分かれているので、ご注意ください。
下記はTOPページへの記述例です。

/*----------------------------------
    main（コンテンツ）
----------------------------------*/
/*--- TOP ---*/
.theme-fo-base {
  .wrapper {
    .contents {
      section {
        //テストセクション
        &.test_sec {
          //ここに記述
        }
        .inner {
          .row {
            …以下省略

fOでの基本設定

パーツ配置

CSSでの装飾

サイトチェック

pagetop

© Basic Inc. All Rights Reserved.