コーディングについて

CSS構成

FLOCSSの考え方を基本として、以下の構成です。

命名規則

クラスの命名規則はBEM記法が基本となります。

その他に、blockを包括するクラスblks（blocks）やblksを包括するpagename-secというクラスも使用します。
また、モジュール（コンポーネント）の場合はクラス名の頭に「m-」を付与します。

HTMLソース例

ブレイクポイント

パソコン表示とスマホ表示の切り替えのブレイクポイントにつきましては、特に指定がない場合768pxで設定いたします。
（デバイス幅が768px以下の場合にスマホ表示に切り替わります）

パソコン表示のレイアウト

パソコン表示時のレイアウトにつきましては、特に指定がない場合ソリッドレイアウトで作成いたします。

taiga_fukにおけるソリッドレイアウトとは、デザインデータのコンテンツ部分の幅に沿って『最低表示サイズ』を設定し、最低表示サイズよりブラウザサイズが小さい場合は、横スクロールバーを表示させる方法です。

逆に、どのブラウザサイズでも横スクロールバーを発生させず、レイアウト等を変化することによってコンテンツが隠れないようする方法をリキッドレイアウトと呼びます。

コンテンツ部分の横幅が1080pxの
デザインの例

●ブラウザサイズが1080px以上の場合

ソリッド＆リキッド共通

コンテンツ部分は1080pxで固定されます。

背景色があるなど、横幅100%が想定される部分（例だとヘッダー・メインビジュアル・フッター）については、ブラウザの幅いっぱいまで広げるようコーディングします。

●ブラウザサイズが769px～1079pxの場合

ソリッドレイアウト

コンテンツ幅以下のブラウザサイズになると、横スクロールバーが発生します。

100%表示の部分については、必要に応じてレイアウトなど調整し、1080pxに収まるようします。

リキッドレイアウト

コンテンツ幅以下のブラウザサイズになっても、横スクロールバーは発生しません。

必要に応じてレイアウトを変化させ、コンテンツ内容が隠れてしまわないようします。

基本的にはソリッドレイアウトでの対応とはなりますが、リキッドレイアウトでの対応も可能です。
その場合はご依頼時などにお申し付けください。
※リキッドレイアウトでの作成の場合、コーディング工数が増加するため、その分お見積りにも反映されます。

スマホ表示のレイアウト

スマホ表示については、基本的にリキッドレイアウトでのコーディングとなります。