NKOH独自ルールブック

# NKOH独自ルールブック - [作業の前に知っておいてほしいこと（カバヤ食品/オハヨー乳業共通）](#作業の前に知っておいてほしいこと) - [本番環境との差異について](#本番環境との差異について) - [作業ディレクトリについて](#作業ディレクトリについて) - [タスクランナー、プリコンパイラについて](#タスクランナー、プリコンパイラについて) - [動画コンテンツにおける実装方法](#動画コンテンツにおける実装方法) - [アクセス解析のための実装留意点](#アクセス解析のための実装留意点) - [制約事項](#制約事項) - [カバヤ食品編](#カバヤ食品編) - [使ってほしい共通パーツ](#使ってほしい共通パーツ) - [使用は任意のパーツ・記述](#使用は任意のパーツ・記述) - [フォントについて](#フォントについて) --- ## 作業の前に知っておいてほしいこと ### 本番環境との差異についてカバヤ食品、オハヨー乳業のコーポレートサイトはWebReleaseという静的コンテンツ配信型のCMSを介してファイルをアップロードしています。またページによって更新担当が異なるなど運用上の都合により、完全にリポジトリと同期がとれてはおりません。そのため、ご担当いただくページ以外の画像リンク切れ等はご放念ください。 ### 作業ディレクトリについて基本的には指定のディレクトリ配下以外触らないでください。 `/dest 配下` プリコンパイルが必要ないファイルを格納するディレクトリ。 dest配下のみが本番環境にデプロイされます。 `/src 配下` EJS、Sassといったコンパイル前のファイルを格納するディレクトリ。ディレクトリ構造を維持してdest配下にコンパイル結果を出力するようになっていますので、フォルダ構成はdestに合わせてください。 ※ ディレクトリの用意がない場合は作成をお願いいたします。 ### タスクランナー、プリコンパイラについてタスクランナーにはGulpを導入しています。基本的には弊社で導入したGulpをご利用いただくことを推奨しています。理由としては、制作会社様毎に独自のgulpfile.jsの定義を行ってしまうと、統制がとれずページ毎に出力されるCSSに若干の違いが出るなど、管理が煩雑となる可能性があげられます。設定ファイルはリポジトリ最上部のgulpfile.jsにございます。極力こちらのgulpfile.jsをご利用いただけますようお願い申し上げます。またプリコンパイルも上記gulpfile.jsでのみ行ってください。必要なプリコンパイラがgulpfile.jsに存在しない場合は、編集等は行わず、弊社担当までお気軽にご相談ください。 --- ## 動画コンテンツにおける実装方法準備中 --- ## アクセス解析のための実装留意点 ### idの付与が必要です！ GAでイベントトラッキングの情報を把握しやすくするために、ブロックごとにidを付与しています。デザインが確定しましたら、別途イベントトラッキング計測のための仕様をまとめて共有させていただきます。まずはそういったものがあることだけ、ご認識ください。 ※上記の理由から装飾目的でのid利用を禁止しています。装飾で使用する場合はclass指定でお願いします。 --- ## 制約事項 ### カバヤ食品編対象サイトカバヤ食品: https://www.kabaya.co.jp/ **CMS（WebRelease2）の仕様上、いくつか制限があります** - head内にタグを追加することはできません。 - ライブラリなど外部URLの読み込みは指定できません。ファイルをダウンロード、制作しているディレクトリに格納のうえ、読み込ませてください。 - 要素の中身が空のタグは、CMS上で削除されるため使用しないでください。 - SPだけ、PCだけで改行したいケースはよくありますが、`<br>`にclassを振り、CSSで表示を切り替える方法は使えません。CMSの仕様で`<br>`が優先され改行されます。CSSで調整してください。 ``` NG: <br class="className"> OK: <span class="className"> ``` --- ## 使ってほしい共通パーツ ### JS｜共通関数汎用性の高い処理に関しては```dest/assets/js/lib/main.min.js```に記述しております。下記の処理に関しては独自の処理を追加するのではなく、共通関数の方をご使用くださいますようお願いいたします。 #### スムーススクロールスムーススクロールを発火させる要素に```class="scroll"```を設定してください [例] ``` <li><a href="#prize" class="scroll">プレゼント</a></li> ``` ※ ```共通headerの読み込みがない場合```は```id="header"```の要素をbody直下に必ず配置ください。 [例] ``` <body class="ja" itemscope itemtype="http://schema.org/WebPage"> <header id="header"></header> <div id="wrapper" class="wrapper mf_finder_container">  ``` ## 使用は任意のパーツ・記述全体共通設定で書かれているCSSをご紹介。ただし使用するかしないかのご判断は制作チームに委ねます。 ### CSS｜サイト共通CSSで定義されているブレークポイント style.min.cssの設定は以下の通りです。ただし現在の推奨記述方法`min-width`に対し`max-width`で指定されていることから使用の有無はお任せしています。 ``` .main__inr { max-width: 1040px; margin: 0 auto; padding: 0 30px 80px; } @media screen and (max-width: 767px) .main__inr { padding: 0 20px 80px; } ``` --- ## フォントについて - カバヤ食品の基本フォントはNotoSansCJKjp、基本サイズは16pxです。（`style.min.css`で定義されています） - テキストについてデザイナーから指定がない場合、こちらを使用してください。 ### 導入可能なWebFont - AdobeFont、モリサワが提供しているモリサワパスポートに含まれる書体は使用可能です。その他GoogleFontなどをご希望の際はご相談ください。