コーディングについて
Coding
コーディングにつきましては、ご依頼時にガイドラインや仕様の指定がない場合、
下記の通りの内容で納品させていただきます。
フォルダ構成について
納品時のフォルダ構成は以下の通りです。
フォルダ構成
上記以外のフォルダ構成をご希望の場合は、依頼時などに指定いただくようお願いします。
CSS設計について
FLOCSSの考え方、BEM記法を基本として、以下のように構成いたします。
CSS構成
FLOCSSの考え方を基本として、以下の構成です。
CSS名 | 読み込むページ | 内容 |
---|---|---|
base.css | 全ページ | ブラウザのスタイルの初期化や、htmlやbody要素に対する基本的なスタイルを定義します。 |
layout.css | 全ページ | ヘッダーやフッター、コンテンツエリアなど、サイト共通箇所のスタイルを定義します。 |
module.css | 全ページ | 共通の見出しやボタンなど、サイト全体で共通で使用するモジュール(コンポーネント)を定義します。 |
ページ名.css | ページ固有 | そのページ独自の要素や、モジュール間のマージンなど、ページ毎に異なる内容を定義します。 |
命名規則
クラスの命名規則はBEM記法が基本となります。
その他に、blockを包括するクラスblks(blocks)やblksを包括するpagename-secというクラスも使用します。
また、モジュール(コンポーネント)の場合はクラス名の頭に「m-」を付与します。
HTMLソース例
レスポンシブ対応について
ブレイクポイント
パソコン表示とスマホ表示の切り替えのブレイクポイントにつきましては、特に指定がない場合768pxで設定いたします。
(デバイス幅が768px以下の場合にスマホ表示に切り替わります)
パソコン表示のレイアウト
パソコン表示時のレイアウトにつきましては、特に指定がない場合ソリッドレイアウトで作成いたします。
taiga_fukにおけるソリッドレイアウトとは、デザインデータのコンテンツ部分の幅に沿って『最低表示サイズ』を設定し、最低表示サイズよりブラウザサイズが小さい場合は、横スクロールバーを表示させる方法です。
逆に、どのブラウザサイズでも横スクロールバーを発生させず、レイアウト等を変化することによってコンテンツが隠れないようする方法をリキッドレイアウトと呼びます。
コンテンツ部分の横幅が1080pxの
デザインの例
●ブラウザサイズが1080px以上の場合
ソリッド&リキッド共通
コンテンツ部分は1080pxで固定されます。
背景色があるなど、横幅100%が想定される部分(例だとヘッダー・メインビジュアル・フッター)については、ブラウザの幅いっぱいまで広げるようコーディングします。
●ブラウザサイズが769px~1079pxの場合
ソリッドレイアウト
コンテンツ幅以下のブラウザサイズになると、横スクロールバーが発生します。
100%表示の部分については、必要に応じてレイアウトなど調整し、1080pxに収まるようします。
リキッドレイアウト
コンテンツ幅以下のブラウザサイズになっても、横スクロールバーは発生しません。
必要に応じてレイアウトを変化させ、コンテンツ内容が隠れてしまわないようします。
基本的にはソリッドレイアウトでの対応とはなりますが、リキッドレイアウトでの対応も可能です。
その場合はご依頼時などにお申し付けください。
※リキッドレイアウトでの作成の場合、コーディング工数が増加するため、その分お見積りにも反映されます。
スマホ表示のレイアウト
スマホ表示については、基本的にリキッドレイアウトでのコーディングとなります。
その他
フォントについて
フォントはメイリオ、ヒラギノ等、WindowsやMac固有のフォントでデザインされている部分(デバイス文字でのコーディングがデザイン時に想定されている箇所)については、Google Fontを使用してコーディングいたします。使用するフォントは主にNoto Sans系です。
※デバイス文字ではなく、画像文字でのコーディングが想定されている箇所については、画像文字で対応いたします。
表示チェック環境について
制作物の表示チェックは下記のデバイス・ブラウザで実施いたします。
パソコン | Windows 10 | IE11,Edge,Chrome,FireFox |
---|---|---|
Mac | Safari | |
スマホ | Android10(Google PIXEL) | Chrome |
iOS最新(iPhone12 Pro MAX) | Safari |
※各ブラウザ最新バージョンでの確認