新CMS完全対応マニュアル
目次
ルールを守って品質の高いサイトを制作しましょう
サイト制作では別の担当者が修正や改修を行いやすいようにソースコードの視認性や可読性を高める必要があります。またfOでは納品したあとの顧客による更新・運用を見据えてコーディングする必要もあるため、決められた命名規則やコーディングルールに沿って作業を行ってください。
ルールが守られていない場合、納品後に問題が発生しクライアントからのクレーム・追加修正の原因となります。
ルールが守られていない場合、納品後に問題が発生しクライアントからのクレーム・追加修正の原因となります。
CSS記述に関するルール
1. 装飾時のクラスについて
スタイルを当てて装飾する場合には、必ず独自クラスを付与し、そこから紐づけてCSSを記述してください。
その独自クラスを外すことでベースCSSがあたるような設計でなければいけません。
クラス名のつけ方は要素ごとに命名規則が定められていますので以下よりご確認ください。
その独自クラスを外すことでベースCSSがあたるような設計でなければいけません。
クラス名のつけ方は要素ごとに命名規則が定められていますので以下よりご確認ください。
正式なルールではないが意識してほしいこと
クラス名は第三者が見ても中身がわかりやすく、意味のある名前をつけてください。
- OKな例：「maxW500_img」（max-widthを指定していると想像がしやすい）
- NGな例：「abc_row」（意味のない文字列）
2. エディタ上での記法について
2.1 - ネスト構造は省略せず記述する
基本のネスト構造（section > inner > row > col > component）は崩さず記述してください。
※「sectionの次にinnerやrowを飛ばしてcolを記述」などはNG記述
※「sectionの次にinnerやrowを飛ばしてcolを記述」などはNG記述
2.2 - ブレイクポイント内でセレクタ追加はしない
ブレイクポイントの中はプロパティのみの記述としてください。
※グロナビ内のみ例外です
※グロナビ内のみ例外です
2.3 - コメントアウトでメモを残す
- 独自クラスを付与しスタイルをあてるパーツを記述する際は、
コメントアウト（//~~~~）を追加して、サイト内のどのページのどの箇所で使用しているか分かるようにしてください。
複数ページにまたがって使用している場合には、代表する1ページのみの記載でも構いません。 - アップセル案件などCSSの一部にコードを追記した場合は追記した日付をコメントで残してください。
以前とルールが変わった点
以前はTOPと下層ページで記述場所が区切られていましたが、新CMSのコピー元からは統合され、1箇所にまとめて書くように変更されました。
そのため、どのページで使っているかがわからなくならないよう、忘れずにコメントアウトを記述してください。
記述場所の統合以前に作られたサイトでは、記述場所が分かれている場合には、書き方を合わせ、TOPと下層はそれぞれの場所に書くようにしてください。
そのため、どのページで使っているかがわからなくならないよう、忘れずにコメントアウトを記述してください。
記述場所の統合以前に作られたサイトでは、記述場所が分かれている場合には、書き方を合わせ、TOPと下層はそれぞれの場所に書くようにしてください。
2.4 - 「common（ウェブサイト共通）」の中の記述は変更しない
変更したい場合は、「main（コンテンツ）」内の指定されている場所で独自クラスを付与したクラス内で上書きする形で記述してください。
（ベースCSSの表示崩れを修正している箇所など含まれているため）
正式なルールではないが意識してほしいこと
第三者が見ても分かりやすいように記述方法は統一してください。また無駄を省くという観点でも意識していただきたいポイントです。
- コロン「:」のあとや「important」の前に半角スペースを入れる
- 0.1 など小数点を記述する際は「.1」と記述する
- 0に「px」は書かない
- プロパティの書き順やキーフレームの記述位置 など
3. 留意事項
3.1 - 余白の記述に関して
20px以上の余白については、ベースデザイン設定を紐づけてください。
ベースデザイン設定の中で余白を設定できる箇所があります。制作時には「標準」で作りますが、顧客がこちらの値を変更した際に連動するよう、20px以上の余白に関しては、ベースデザイン設定を紐づけて記述してください。（20px未満は影響がかなり小さいため、本ルールから除外としています）
ベースデザイン設定の余白は、「--fo-spacing-coef」という変数で出力されます。こちらの変数を係数として紐づけて記述してください。
例：30pxの余白 → padding: calc(30px * var(--fo-spacing-coef));
また、コピー元サイトには余白系の計算式を記述したmixinが準備されていますので、必要に応じてこちらを利用すると効率的です。
ベースデザイン設定の余白は、「--fo-spacing-coef」という変数で出力されます。こちらの変数を係数として紐づけて記述してください。
例：30pxの余白 → padding: calc(30px * var(--fo-spacing-coef));
また、コピー元サイトには余白系の計算式を記述したmixinが準備されていますので、必要に応じてこちらを利用すると効率的です。
3.2 - テキストに関して
太字設定は必ず編集画面から設定
ボタンパーツやテキストパーツの太字設定は顧客が編集画面で変更できるよう、編集画面内の「太字選択」機能でつけてください。
テキストサイズの変更はCSSで
テキストサイズはline-heightが崩れるので基本はCSSで調整してください。ただしテキストの中の一部だけを変える場合には編集画面で変更して構いません。
テキストの太さは2種類まで
編集画面の太字設定では太字かノーマルのどちらかしか選べないためテキストの太さは基本2種類とします。
カンプで3種類用意されている場合はデザイナーに指摘してください。
カンプで3種類用意されている場合はデザイナーに指摘してください。
3.3 - 背景画像設定は編集画面から設定
顧客が編集画面で変更できなくなるので、特別な理由がない限りは編集画面で設定してください。
3.4 - 自動で出力されるIDやクラスへのプロパティ記述は禁止
各種パーツには、配置する際に生成される自動出力クラス / IDが自動で付与されますが、これらにはスタイルを当てないでください。
また順番を指定したセレクタの使い方には注意（内容によっては禁止）
また順番を指定したセレクタの使い方には注意（内容によっては禁止）
スタイルを当ててはいけない理由
fOでは要素を追加するたびに、「row-1」や「row-2」、「col-3」「col-4」「component-2」といった番号つきのクラスが自動で付与されます。この番号は並び順に合わせて自動で出力（昇順）されるので、rowやcolの配置を変更したり、新たにrowやcolを追加し並び順が変わると自動で末尾の番号も変動する仕様となっています。
これらに対してCSSを記述すると、ページのデザインが少し変わった場合や、納品後クライアントが何かを追加しただけでクラスが変わることになり、スタイルがあたらず表示崩れの原因となります。
ですので、そのような移動や追加の操作をしても特定のブロック・コンポーネントにCSSがあたるよう、制作者が独自のクラスを追加する必要があります。
これらに対してCSSを記述すると、ページのデザインが少し変わった場合や、納品後クライアントが何かを追加しただけでクラスが変わることになり、スタイルがあたらず表示崩れの原因となります。
ですので、そのような移動や追加の操作をしても特定のブロック・コンポーネントにCSSがあたるよう、制作者が独自のクラスを追加する必要があります。
例えばイメージパーツを配置後、さらに見出しを追加した場合、クラスが自動で変化することがある（イメージ）
3.5 - 「first-child」、「nth-of-type」など順番を指定する記述には注意が必要
納品後に顧客が順番を変更できる箇所には、順番を指定する記述はしないようにしてください。
例えば、セクションの中で行（row）に対して「last-of-type」を使用してしまった場合、顧客がセクションに新しい行（row）を追加すると意図したスタイルが当たらなくなってしまいます。
こういった崩れが発生しないよう、独自クラスをつけてスタイルを当てるか、「& + .●_row」のように2つ以上同じクラスが続く時に効くような形で記述するなど工夫をしてください。
順番を指定して記述する方法でしか再現できないデザインの場合には、事前に必ず担当ディレクター・デザイナーと相談し、顧客編集時の懸念があることを伝えた上で実装方法を検討してください。
例えば、セクションの中で行（row）に対して「last-of-type」を使用してしまった場合、顧客がセクションに新しい行（row）を追加すると意図したスタイルが当たらなくなってしまいます。
こういった崩れが発生しないよう、独自クラスをつけてスタイルを当てるか、「& + .●_row」のように2つ以上同じクラスが続く時に効くような形で記述するなど工夫をしてください。
順番を指定して記述する方法でしか再現できないデザインの場合には、事前に必ず担当ディレクター・デザイナーと相談し、顧客編集時の懸念があることを伝えた上で実装方法を検討してください。
3.6 - !importantをつける前に「:not(:root)」で対応できるか確認
!importantはCSSにおいて強制的に特定のスタイルを適用するための方法です。過剰に使用すると、他のスタイルとの競合や予期しないレイアウト崩れを引き起こす可能性があります。
代わりに、CSSの特異性（セレクタの優先度）を理解し、:not(:root)セレクタを使用すると、:root要素には!importantを適用せず、他の要素にのみ適用することが可能です。
!importantを使用する前に、特異性を上手に活用して、意図したスタイルを実現できるかを確認することが重要です。
代わりに、CSSの特異性（セレクタの優先度）を理解し、:not(:root)セレクタを使用すると、:root要素には!importantを適用せず、他の要素にのみ適用することが可能です。
!importantを使用する前に、特異性を上手に活用して、意図したスタイルを実現できるかを確認することが重要です。
具体的な例
fOの仕様上 、!importantをつける必要がある場合を除いて、セレクタの優先度で対応できる場合は対象のクラス（fOが自動生成するクラス以外）の末尾に:not(:root)を付与する。セレクタの優先度が:not(:root) をつけても低い場合は、都度追加して確認するようにしてください。
//この書き方は強すぎてしまうのでNG
.row {
.example_row {
display: block !important;
}
}
//セレクタの優先度を上げて効かせる方法
.row {
.example_row:not(:root) {
display: block;
}
}
//セレクタの優先度がまだ低い場合
.row {
.example_row:not(:root):not(:root) {
display: block;
}
}
3.7 - empty処理について
- 複数のcol（カラム）に対して装飾をしている場合、空のカラム（col）を使用し、デザインを保つ場合は「:empty」を利用して装飾を外す形で実装を行ってください。新規制作時 / アップセル時ともに必須となります。
外す必要のあるおもなスタイル：ボーダー、シャドウ、背景色、SP時の余白
※比較的新しいアカウントにはデフォルトでcol（カラム）全体に対してこの対策がなされていますので、対応が必要ない場合があります。 -
なお、古い案件に対してアップセルを行う際、col（カラム）全体へのempty処理がない場合があります。その場合は、新たに制作するパーツにのみ個別にempty処理を書いてください。
※col（カラム）全体に当たるように書いてしまうのは、既存のパーツに影響してしまうためNGです。必ず今回のパーツに個別で処理を書いてください。
具体的な例
「資料ダウンロード一覧」のようなページはbox_shadow系の3カラム（画像・見出し・ボタンが１つのカラムに入った構造）が多く、もしこの3カラムの3つ目のカラムが空（見出しなどデザインパーツが１つも入っていない状態）の場合、「shadow」というクラスに対し、影が残らないように「:empty」で対策を入れます。
（参考例：初期プリセット情報ページ 複数サービス用 ＞ 資料ダウンロード一覧ページ内の「wp_col」のCSS参照）
（参考例：初期プリセット情報ページ 複数サービス用 ＞ 資料ダウンロード一覧ページ内の「wp_col」のCSS参照）
3.8 - for文など繰り返し処理をする記述は禁止
サーバーへの負担がかかる可能性があることから、for文のように繰り返し処理をするSCSSの記述は禁止になりました。
（例：旧CMSのコピー元で使用されていた「pt●●_all」など）
アップセルの際など、for文の記述が既存で存在している場合には、そのまま使用してもかまいませんが、新たにfor文の記述を追加することはしないでください。
（例：旧CMSのコピー元で使用されていた「pt●●_all」など）
アップセルの際など、for文の記述が既存で存在している場合には、そのまま使用してもかまいませんが、新たにfor文の記述を追加することはしないでください。
3.9 - （旧CMSのみ）ページ単位のCSSカスタマイズ機能は使用禁止
旧CMSではページ単位のCSSを記述する機能が搭載されていますが原則使用禁止です。
こちらで記述したコードは優先度が高く制作時や更新・運用時に不具合が起きることがあるためです。
こちらで記述したコードは優先度が高く制作時や更新・運用時に不具合が起きることがあるためです。
要素ごとのコーディングルール
CMSの使用で自動出力されるIDやクラスについて解説しています。
セクションにクラスを付与する際の規則とルールをまとめています。
行（row）にクラスを付与する際の規則とルールをまとめています。
カラム（col）にクラスを付与する際の規則とルールをまとめています。
見出し（component）にクラスを付与する際の規則とルールをまとめています。
ボタン（component）にクラスを付与する際の規則とルールをまとめています。
その他のcomponentにクラスを付与する際の規則とルールをまとめています。
© Basic Inc. All Rights Reserved.