SCSSファイル構成
ディレクトリ構成
本デザインシステムではデザイン領域をSCSSにて記述する前提で設計されています。そのため、SCSSの記述ルールを本ページにて紹介していきます。
全体図
htmlディレクトリと並列にsassディレクトリを配置しています。コンパイル時にsassディレクトリ内のファイル記述内容を /html/common/css/style.css に上書きます。
※コンパイル方法については現在指定はありません。
sassのディレクトリ位置などの変更も可能です。その際はこちらのデザインシステムに追記をしてください。
SCSS群：各ファイルの役割
- style.scss
- コンパイル対象の.scssファイルを設定します。
- _set.scss
- 基本となるスタイルの変数を設定します。
- _body.scss
- 骨格となるスタイルの変数を設定します。
例）ヘッダー/ナビ/コンテンツ/フッター など。
- _head_foot.scss
- ヘッダー、フッダー、ナビゲーションのスタイル設定をします。
- _modules.scss
- 使いまわせるコンポーネントのスタイル設定をします。
例）一覧 / テーブル / タブ / モーダル など。
- _tips.scss
- CLASSに追記することで、レイアウト変更が可能なスタイルを設定します。
例）右寄せ / フォントサイズ / タグラベル / 枠付き背景 など。
- _tags.scss
- 各種タグの基本設定を記述します。
- _link.scss
- リンクやボタンに関連する設定を記述します。
- _title.scss
- 見出しに関連する設定を記述します。
- _ui.scss (※本番使用不可)
- 各パーツのスタイルを設定しています。本番で必要なものは_modules.scssにコピーして編集してください。
SCSSダウンロード
対象のSCSSはこちらより一式ダウンロード（ZIP）してください。
_set.scss の記述について
_set.scss には、基本となるスタイルを変数に代入する記述が書かれています。
カラー
以下はサンプルです。各種カラーは初期制作時のみ案件ごとに変更可能ですが、コントラストはAA対応でお願いします。（※機能以外の色数を増やすことは禁止です。）
| 変数 | 属性 | 内容 |
|---|---|---|
| $color-key | 基本 | 対象のWEBサイト・システムのキーとなるカラーです。ブランドカラーになる場合が多いです。 |
| $color-sub | 基本 | キーカラーを補助するカラーです。（キーカラーの背景にも馴染むカラーを推奨します。） |
| $color-point | 基本 | [※基本的には不要] ポイント、差し色となるカラーです。 （※キーカラーが目立たないなど、ポイント色に合わない場合こちらのカラーを使用します。） |
| $color-bg | 背景 | まとめの記述など、コンテンツと切り離して独立しても成り立つ要素の背景や、フォームUIのグループを明示する際に利用します。 |
| $color-bg-hiligh | 背景 | 背景をホバー（hover）した際にマーキングしたい場合利用します。 |
| $color-bg-active | 背景 | 背景がアクティブになった際にマーキングしたい場合利用します。 |
| $color-black | モノトーン | 黒 |
| $color-text | モノトーン | テキストに使用 |
| $color-gray-dark | モノトーン | ネガティブなボタンに使用。 |
| $color-gray | モノトーン | 枠線の基本となるカラー |
| $color-gray-bright | モノトーン | 非アクティブのボタンに使用。 |
| $color-white | モノトーン | 白 |
| $color-link | 機能 | リンク色に使用します。 |
| $color-link-bg | 機能 | マウスオンで背景が明るくなります。 |
| $color-caution | 機能 | エラーや注意書きに使用します。 |
| $color-caution-bg | 機能 | エラーや注意書きの背景に使用します。 |
| $color-label-XXXXX | 機能 | ラベルなど、機能的なオブジェクトに対してのみカラー追加が可能です。 |
| $bg-btn | 要素 | 要素を初期設定で装飾します。（input系の枠線） |
| $bg-btn-dark | 要素 | 要素を初期設定で装飾します。（input系の枠線） |
| $bg-btn-bright | 要素 | ボタンの明るい色（ホバー背景など）で装飾します |
| $color-element-dark | 要素 | 要素を初期設定で装飾します。（input系の枠線） |
フォント
フォントサイズの単位はremを採用します。以下サンプルでピクセル換算を参考にしてください。尚、各種サイズは初期制作時のみ、案件ごとに変更可能です。
| 変数 | PX | 内容 |
|---|---|---|
| $font-size-5xl | 48px | 画面名（ページタイトル） |
| $font-size-4xl | 36px | 大見出し（H2相当） |
| $font-size-3xl | 30px | 中見出し（H3相当） |
| $font-size-2xl | 24px | 見出し（H4相当） |
| $font-xl | 20px | 小見出し（H5相当） |
| $font-lg | 18px | （H6相当）大きな文字、目立たせたい文字に使用します。 |
| $font-size-base | 16px | フォントの基本サイズです。 |
| $font-size-sm | 14px | 補足説明に使用します。 |
| $font-size-2sm | 13px | 補足説明に使用します。（フォーム関連のエラーや注意書き、アクションのあるUIの補足で使用します。） |
| $font-size-xs | 12px | 補足説明に使用します。（フォーム関連のエラーや注意書き、アクションのあるUIの補足で使用します。） |
領域
以下はサンプルです。初期制作時のみ案件ごとに変更可能です。（※数を増やすことは基本的に禁止です。）
| 変数 | 値 | 属性 | 内容 |
|---|---|---|---|
| $margin-xl | $SPACE*4 | 余白 | 骨格構造の切れ目など最大の余白地として使用します |
| $margin-lg | $SPACE*2 | 余白 | 一番大きなセクション（SECTION）の下部余白などに使用します。 |
| $margin-base | $SPACE (36px) | 余白 | 段落（P）の基本的な下部余白です。 |
| $margin-sm | $SPACE*1/2 | 余白 | グループのマージン（フォームの項目毎）、一覧の余白、見出し下部余白で使用します。 |
| $margin-xs | $SPACE*1/4 | 余白 | グループ（小）のマージン（ラジオボタンとテキストなど）、一覧の余白、見出し下部余白で使用します。 |
| $baseWide | 1140px | Break Point | ワイド画面用ブレークポイント |
| $basePad | 1024px | Break Point | タブレット用ブレークポイント |
| $baseBody | 1000px | Break Point | コンテンツ領域最大値など |
| $baseSp | 860px | Break Point | スマートフォン用ブレークポイント |
| $baseSpMin | 380px | Break Point | スマートフォン（小）用ブレークポイント |
| $btn-size-long | 250px | ボタン | 幅広のボタン |
| $btn-size-base | 110px | ボタン | 基本的なボタンサイズ |
| $btn-size-small | 40px | ボタン | アイコンボタン |
CSS について
セレクターの命名規則
基本方針
- スタイルシートのセレクタ名は camelCase を基本としています。
- _tips.scss に記載している utility / tips 系クラスのみ kebab-case を採用しています。
- 保守・更新時に、実装担当者が直感的に扱いやすい命名を優先しています。
命名構造
- 複数単語は xxxYyy の形式で記載します。
- xxx-yyy の形式は utility 系クラスを除き使用しません。
- クラス名は「見た目」ではなく、「役割」や「機能」を基準に命名します。
命名例
| 推奨 | cardList / tableWrap / mainVisual / tabTypeA |
|---|---|
| 非推奨 | blueBox / bigText / leftMenu |
状態管理
- 状態変更を伴うクラスは is-active 等の is- 系を使用します。
- JavaScript制御用クラスは js- 系を使用可能とします。
Type系クラス
- Type 系クラスは、共通構造を持つ派生パターンとして使用します。
- 例：tabTypeA / tableTypeB / btnTypeC
ファイル作成について
グローバルCSS
SASSディレクトリ内のSCSSファイル（※全体図参照）をコンパイルすることで style.css が出来上がります。アップデートの際もSCSSファイルに変更してコンパイルすることでstyle.cssがアップデートされます。この SCSSファイル は誰もが改変できるファイルではなく、決められたメンバーのみ改変出来ることとします。
ローカルCSS
グローバルCSSで対応出来ない事案が発生した場合のみ、ローカルCSSを個別に作成して対応します。ローカルCSSは該当ページごとに設置します。
- 命名ルール
ローカルCSSはグローバルCSSと同じディレクトリに設置して、命名ルールは以下の通りとします。
ディレクトリ名_ファイル名.css（common/css/ディレクトリ名_ファイル名.css）