スタイルシート(CSS)

CSSファイルの構成と読み込み順

CSSファイルは複数ありますが、制作者が修正するファイルは、基本的に以下の3つです。

1. variables.css
2. layout.css
3. page-main.css

 .com ルートディレクトリー
└ css
　 ├ reset.css----------：【編集不要】リセット
　 ├ variables.css------：【編集する】CSS変数（カラー・フォント等）
　 ├ foundation.css-----：【編集不要】基盤スタイル（タイポグラフィ等）
　 ├ layout.css---------：【編集する】レイアウト
　 ├ component.css------：共通コンポーネント
　 ├ page-archive.css---：ページ別スタイル（エリアページ、業種別ページなど 編集をしない内部ページ用）
　 ├ page-agent.css-----：ページ別スタイル（Agentが編集をする内部ページ）
　 ├ page-main.css------：ページ別スタイル（人が編集をするトップページ、会社概要ページ等）
　 └ vendor
　 　 ├ fontawesome_all.css--------:【編集不要】
　 　 ├ colorbox.css---------------:【編集不要】
　 　 ├ jquery.subwindow.css-------:【編集不要】(フォーム用)
　 　 ├ validationEngine.jquery.css:【編集不要】(フォーム用)
　 　 └ code-prettify.css----------:【編集不要】(レギュレーション用)

CSSファイルは下記の順序で読み込まれます。後に読み込まれるファイルが優先され上書きされます（page-main.css は最後に読み込まれるため、このファイルの記述が優先されます）。

1. reset.css
2. variables.css
3. foundation.css
4. layout.css
5. component.css
6. page-archive.css
7. page-agent.css
8. page-main.css

page-main.css の編集

page-main.css は、作業者が編集をするCSSファイルで、主に、トップページ、会社概要ページ等のスタイルを管理します。

1. トップページ
2. 会社概要ページ

page-agent.css の編集

page-agent.css は、Cursor Agentが編集をするCSSファイルで、内部ページのスタイルを管理します。page-main.cssで編集された、トップページ、会社概要ページ以外の内部ページのCSSを編集します。必要に応じて、作業者が手作業でCSSファイルを編集することは問題ありません。

表示確認のブレークポイント

それぞれの表示を確認するため、トップページのみ、以下のサイズで表示確認をして、それぞれのスクリーンショットをBacklogで送ってください。その他のページ（内部ページ）に関しては、スクリーンショットは不要ですが、以下のサイズでCSS担当者が必ず確認をしてください。