coding-guideline

実装ルール・品質基準

ご指定の実装ルール・開発環境がある場合は、それに合わせて実装します。
ご指定がない場合は、以下を基準に実装します。

仕様書／ガイドライン

対応ブラウザ

Windows：Chrome / Firefox / Edge
Mac：Chrome / Firefox / Safari
iPhone：Safari　／　Android：Chrome
いずれも制作時点の最新版。実機で表示を確認します

画像

SP/PC共通は2倍で書き出し（svg・favicon・ogp 等は1倍）
picture で SP/PC を切替
alt は装飾目的なら空にする。装飾目的とは、その画像がなくても本文だけでセクションの文脈が成立する状態を指す
ファーストビュー以下は遅延読み込み（loading="lazy"）
width / height 指定でレイアウトシフトを防止

開発環境

静的サイト：Astro（次点で gulp）
WordPress：Local + webpack
SCSSコンパイル・JS圧縮・コード整形・メディアクエリ統合を標準で行います

package.json・設定ファイル一式のお渡しも可能です。

品質チェック

HTMLは Nu Html Checker と html-validate の2種にかけ、結果を突き合わせます
CSSはバリデータで検証します
コンソールエラーがないか確認します
ブラウザ・実機で表示と操作を確かめます

表示速度に影響する箇所（画像・読み込み）は実装しながら確認します。

コーディングルール

HTML / アクセシビリティ

body直下はランドマークタグのみ（同じ役割が重複する場合は aria-label で識別）
WAI-ARIA は乱用せず、タグ本来の Role を基本にする
キーボード操作・フォーカストラップの回避、クリック判定 24×24 以上

WCAG 2.2 AA を可能な範囲で適用します。

CSS / SCSS

FLOCSS系のレイヤ構成（l- / p- / c- / u-）＋BEM
接頭辞は上記を基本とし、内包要素で命名が冗長になる場合は省略することがあります
CSS変数はスコープで命名を分ける（グローバル --x ／ローカル --_x）
単位指定は関数を経由して管理（px→rem の unit()、フォント指定の fs()）
ブレイクポイントは 375 / 768 / 1280 を基本とし、ブラウザ拡大時に vw ベースの等倍表示が崩れるケースへ対応するため 1537 / 1920 を使用
メディアクエリの max-width 側は、境界の重複を避けるため 0.02px 減算（例：767.98px）

JavaScript

生JS（Vanilla JS）を基本、ライブラリは必要に応じて使用
機能単位でファイルを分割して管理
JSから参照する要素の指定には js- クラス名を使用
aria-expanded など、UI状態を表すARIA属性は実際の状態と同期させる