その他のcomponentの命名規則とコーディングルール

その他のcomponentのカスタマイズに関する規則

CSSでその他のパーツ（component）のカスタマイズをする際に遵守すべき命名規則とコーディングルールについてまとめています。

その他のパーツ（component）のパーツ配置についてはこちらのページをご確認ください

その他のcomponentについては、決まった接頭語・接尾語をつけるなどのルールはありませんが、
他の人から見てもわかりやすいクラスをつけてください。
componentnの中でも、見出しとボタンについてはそれぞれ詳細にルールが定められていますので、各ページをご確認ください。

見出し（component）のルールについては
こちらをご確認ください

ボタン（component）のルールについては
こちらをご確認ください

その他のcomponentには、ベースCSSで上下に10pxのmarginが設定されています。
デザイン上、余白をなくしたり広げたりする必要がある場合を除き、基本的にはこのmarginはそのまま活用する形で余白を調整していきます。

注意事項

旧CMSのコピー元サイトでは、SP時にこのmarginが0になり、代わりにカスタムCSSで上下にpaddingがつけられています。
CSSで余白を調整する際にはご注意ください。

編集画面の崩れにつながる可能性が高いため、
イメージ（画像）パーツに対して幅の指定をしたい時には、componentの中のimgタグに対して幅を指定するようにしてください。
（以下は新CMSでの記述の一例）

@include theme-fo-base {
.inner {
.row {
.col {
.component {
//画像パーツ
&.image {
//●●ページで使用
&.test_img {
img {
max-width: 100px;
}
… 以下省略

共通パーツの中は、他のパーツとHTML構造が違っていますので、ご注意ください。
共通パーツの行（row）、カラム（col）にはそれぞれ、「cta-row」「cta-column」というクラスが出力されています。