ご指定の実装ルール・開発環境があればそれに合わせます。 ご指定がない場合は、以下の基準で実装します。
| 項目 | 内容 | 補足 |
|---|---|---|
| 対応ブラウザ | Windows：Chrome／Firefox／Edge | |
| Android：Chrome（必要に応じて： Firefox／Edge） | ||
| Mac：Chrome／Firefox／Safari | ||
| iPhone：Safari(必要に応じて：Chrome／Firefox) | いずれもその時の最新版 | |
| 画像に関して | SP/PC共通：2倍で書き出し | |
| svg、favicon、ogpなどサイト自体に表示されないもの：1倍書き出し |
・pictureタグを用いてSP画像とPC画像で切り替えを行い、表示速度高速化 ・alt属性の記述（電話で内容を伝えるとき、その画像に触れなくても文脈が通じるなら装飾(alt空)） ・FVより下の画像に関してはloading="lazy"記述 ・width,heightを記述しレイアウトシフトを防ぐ ・画像圧縮は必要であればwebp/avif変換を実施 | | | 画像命名規則 | ■フォルダ構成 assets/img/以下に配置 common：サイト共通要素 favicon：headで使うfavicon icon：サイト全体で使うアイコンのpng・svg ogp：headで使うogp ※その他、logo、banner、cardなど複数のページに渡り共有する画像 page：各ページ固有の画像 home：トップページ ※ページ数が多い場合はurl構造と同じ階層でフォルダ分けする
■下記接頭辞を使用 ページ名_セクション名_要素{番号}_{子要素番号} home_about_card01_01.jpg | ※「画像の目的」を接頭辞にするパターンがありますが、「出現場所」で揃えた方が管理しやすいと考えています。
接頭辞分岐による管理スクリプトや、 コーディング時に扱えるよう、デザインデータ側でレイヤー命名を統一している場合は従います。 | | フォントに関して | • 指定がない場合は基本Google fontsからCDN経由 • 速度に問題があり、必要であればサブセット化 | ※フォント使用箇所の更新頻度にもよります | | 開発環境 | 静的サイト： 可能であればAstro、次点でwebpackかgulp WordPress： local by flywheel、webpack
・SCSSコンパイル ・JS圧縮 ・prettier整形 ・メディアクエリまとめ ・プロパティ順序整形 ・ライブコーディング（Astro、webpack機能） • postbuildによるprettierで対応できない細かい整形・改行・文字列調整、css・jsに日時付与 | | | 品質チェック | 1.下記でHTMLコードにエラーが出ない、適切なマークアップ（見出し順序等） Nu Checker：https://validator.w3.org/nu/ html-Validate：https://www.npmjs.com/package/html-validate
2.下記でCSSにエラーが出ない https://jigsaw.w3.org/css-validator/validator
3.コンソール画面にJSエラーが出ない | 1に関してはscriptによる自動チェックを使用 | | コアウェブバイタル | Page Speed Insightsにて80点以上を目標にしますが、 以下の場合は80点をクリアできなくてもOKとする • gtag.js(GTM)が入った時点で80点切るため、クリア基準はgtag.js導入前とする。 • ローディング画面演出が入る場合、LCPが悪化するため例外とする。 | |
※基本はこの形ですが、より良い構成が考えられる場合、随時形を調整している事があります
| 項目 | 内容 |
|---|---|
| HTML | **■ランドマーク |
| body**の直下では、ランドマークを持つタグのみを使用し、 | |
| 同じ要素がある場合は識別名をaria-label属性で書く。 | |
| （header、nav、main、footer、aside、form等） | |
| ただし、スキップリンクはOKとする。 | |
| <a href="#main-content" class="skip-link">メインコンテンツへスキップ</a> |
■WCAG( アクセシビリティ)に対応 2.2AAを可能な範囲で適用 例） **• キーボードアクセス：**すべてのフォーカス要素にアクセス可能・アウトラインを設定 • キーボードトラップとフォーカストラップ： ハンバーガーメニューやダイアログで、フォーカスは循環する(フォーカストラップ)。画面から抜け出せない( キーボードトラップ)状態を回避する。ESCキーや閉じるボタン、外側クリックで抜け出せる事を明確にする。 **• 代替えテキスト：**画像のalt **• サイズの確保：**クリック判定は最小で24x24
■WAI-ARIA( 支援技術に役割や状態を伝えるための属性 )に対応 例） <section aria-labelledby=”about-title”> <h2 id=”about-title”>セクションタイトル</h2> </section> <button aria-label=”グローバルメニューを閉じる” aria-haspopup="dialog" aria-expanded="false”></button>
乱用はせず、基本はタグが持つ自然なRoleで対応する。
h2以下のsectionでのaria-labelledby： h3はセクションの規模によるが、h4以下では過剰なため使用しない。 | | ブレイクポイント | ■max-widthは、拡大時1px以下の判定漏れを考慮し、0.02pxを引いた値にする 例）'m': 'screen and (max-width: 767.98px)',
■印刷時に表示されるブレイクポイントにprintを入れる 例）'m': 'print, screen and (min-width: 768px)',
■min-widthとして下記数値 375 576 768 1024 1280 1440 1537 ( 等倍(vw)用、1280のx1.25 ) 1920 ( 等倍(vw)用、1280のx1.5 )
上記を用意していますが、すべてを活用する必要はなく コンテナクエリやgrid、%、clamp等を活用し崩れが出ないように調整。 ※「分岐点を減らす」ことよりも「効率的に崩れの対処ができるか」を優先 | | SCSS基本 | Dart Sass（Lib Sassは非推奨）
■変数 変数はCSS変数を活用 グローバル変数は”—変数名” ローカル変数は”—_変数名”
■関数 関数は下記を用意しています。 ・px→rem変換：unit( px値 ) ・フォントサイズ指定：fs( サイズ、行高さ、太さ )
■単位 通常文章フォントはrem デザインされたタイトル・画像要素はpx 全体要素はvw。 vi系の論理単位は、言語による文章方向が変わった時にサイト全体に影響が出るので、 使用する場合は文章周り。 基本的にはunit関数かfs関数を通し、単位を一括修正可能にする。 ※コーダーは単位を気にしなくてすむため。 関数内の単位は変数で、ブレイクポイントごとに切り替えられている。 単位変数は_setting.scss内で設定されている。 | | SCSS単位と倍率 | ■レスポンシブ時、単位の倍率設定の判断 1.リキッド(px) • 何も問題がない場合はリキッド(px)
2.フル等倍(vw) • 制作会社側のルールが等倍(vw)の場合は合わせる ルートフォントのvw化は、こちら主導の新規構築であればこちらでは使用しない。 改修であれば合わせて使用する。
3.一部等倍(vw) • 拡大率対応やデザイン都合で部分的にvwを使う **※事例）**クライアントが会社支給のノートPCを使用しているが、ノートPCのデフォルトブラウザ倍率が150%である事を自覚しておらず、「デザインが崩れている」といったクレームになったため、制作側ではリキッドを諦め等倍化を前提とすることで案件をまとめていた。その結果、調整ブレイクポイントに1537(x1.25)、1920(x1.5)といった数値が発生する。 画面幅1537px以上で通常のリキッドに分岐するが、ブラウザ拡大した時に実質1280pxを下回らないように設計されている。
•デザイン重視サイトの場合 背景の演出が、画面全体のバランスに影響される場合、画面幅の変化で恰好悪くなってしまう場合は等倍(vw)を使用する。ただし、1セクションだけの場合は、セクション全体をvwにする事で回避も検討する。
4.SP版 • 等倍(vw) 375px以下～320pxのレイアウト崩れの対応工数が大きい。 320px以下だけ等倍対応も可能だが、シンプルにSP版を全てvwにした方が明確。 • リキッド(px) 記事中心サイトではテキストの可読性からpxの優先を考慮する。
• 指定がない場合 優先「PC：px+一部等倍(vw)、SP：vw」 次点「PC：px、SP：vw」 になります。 | | SCSS ディレクトリ構造 | ■scssディレクトリ構造分類 foundation：アニメーション指定、リセットファイル、ヘルパー系 global：mixinの設定や関数定義 layout：ヘッダー、フッター、メインのレイアウト：l-接頭辞 project common： このサイト全体の共通パーツ。ヘッダーフッターの実体、パンくず等： p-接頭辞 page：そのページ固有のパーツ：p-page-name接頭辞 parts：その他カードブロックなど：p-接頭辞 component：最小パーツ、見出しやボタン：c-接頭辞 utility：補助クラス、絶対値的な単一プロパティ調整：u-接頭辞 | | CSS変数 色命名規則 | global/_color.scssに記載
1.—color-目的-濃度名 例)--color-site-bg • 目的が明確な場合。色の内容を変更する可能性がある場合は、具体的な色名を指定しない
2.—color-色-濃度値 例) --color-blue-700 • デザインが全て決まっていない場合。同じ色の出現回数や場所が不明確な場合は 名前を付けられないため、具体的な色名と度合を使用
※デザインが全て決まっていない状態で1のパターンも可能ですが、最終的な整合性は下がります | | CSSクラス命名規則 | FLOCSS + BEMベース + 部分的にATOMICを取り入れています。 具体的なコードはgithub参照 https://github.com/nino-code-dev/astro-portfolio レイアウト：接頭辞 l- ページ：接頭辞 p- パーツ：接頭辞 p- コンポーネント：接頭辞c- ユーティリティ：接頭辞u- 接頭辞なし：指定クラス直属のローカルクラス
■純粋なATOMICについて • utilityは純粋なATOMIC：.u-mt15＝margin-top：15px( SP分岐あり )
■部分ATOMICについて • l-、p-、特にc-、 「頻繁に違うバリエーションが出現する」 「下層のデザインがまだ確定していない」 「複数のパターンを組み合わせるのが前提」といった際に設計に使用。 • modifierではhtmlのクラス指定自体が冗長化し、肝心の文章が把握できなくなるケースがある。 <a class=”c-btn c-btn—w300 c-btn—solid c-btn—gold c-btn—outline”>リンク</a> そのため「文脈に応じた分子設計」をしています。 組み合わせ版：<a class=” c-btn w300 solid gold outline”>リンク</a> セット版：<a class=” c-btn-primary”>リンク</a>：(パターンが一定で見通せる場合) 利点： • 最初の把握コストがあるが、一度型がわかるとサイト中・他のサイトでも使いまわせる • FLOCSSで接頭辞がある事で、接頭辞抜き＝ローカルというルールが確立する • わずかなサイズ違い、色違い、フォント違い、線のあるなし、アイコンのあるなしといったものを吸収できる • テーブルのような微調整がいるがデザインは似ているものに強い • utilityのような絶対値では対応できない、確定で出現する子要素に対する一括指定ができる。 結果的にhtmlが綺麗になる。 • 特にLPのような、場所ごとに微調整がいるデザインで真価を発揮する | | CSS 人再編集領域の スタイル | ■人(制作会社・クライアント)の再編集が予測されるコンテンツのcss 投稿記事、規約、料金表など、 article、ol・ul、dl、table要素のコンテンツの場合 全ての子要素にクラス名を適用するとクラス名過剰になり、編集側の改修負担が増える。
上記のようなコンテンツ中5回以上連続して同じクラスが発生する( 増える可能性がある ) 場合に限りタグに直接付与する事を検討。 • 枠単位にクラスを付け、p・dt・ddなどタグが決まっているものにスタイルを当てる。 • ただしhタグは階層変化する可能性があるため可能な限り直スタイルを避ける。
• 4個程度のカード要素はこの限りでなく、普段通りクラスを当てる。 ※制作会社側が作成した他サイトのコード傾向を確認する | | CSSの書き方 | 1.余白の取り方 要素同士の余白はmargin 要素内の余白はpadding
2.marginの方向 基本的にはmargin-topだけ指定、bottomを併用しない( topが指定できない状況ではOK ) 考え方：レジや車の並び。前が後ろに合わせるのではなく、後から来た人が前との距離を合わせる。
3.文字の単位 文字単位はrootを弄らずに基本はunit関数で指定（scss関数用意あり） 親依存の場合はemを使用（テキスト中心の階層構造で発生しやすい）
4.コンポーネント、パーツ等へのmargin デフォルトではmarginを付与しない。 デザインデータ上、連続したカード・セクションなど、明らかに同一箇所で同一の余白間でmarginがついている場合は付与する。 基本はモディファイアやユーティリティで対応
5.アイコンはmask-imageでcss内で完結（画像ファイルを増やさない） カスタムプロパティにsvgやpngの内容をコピーし、カスタムプロパティ経由で使用か、 汎用的なものはc-icon系クラスに収める。 ヘッダーなど項目の繰り返しが多い場所、c-iconを使うと冗長になる場合は 要素に直接アイコン描画cssを書く。 | | JavaScript | 生JS(Vanilla JS)を基本とする ライブラリは適宜使用。
各機能は専用ファイルにclassで作成、 _index.jsなどメインとなるファイルでincludeする。 ビルド時には1ファイルになる。
• html要素に付与する場合 classの中でqueryselectorで特定cssクラス名の要素を取得し、 その要素に付与する事で実行する。 <div class=”js-fade”></div>
• 実行は、データ属性ではなくクラス名で指定する。 web制作とweb開発で文化が違うため、クラス名実行の方がふさわしい。
• データ属性 ディレイなどのクラス名では難しい数値指定が必要な場合に使用。 または、js側で状態管理する必要がある場合、人のhtml管理に影響しない自己完結の方法で使用する。 (見た目で判断つかない状態で「特定クラスを持った要素の下にないと機能しない」といった事をしない)
• aria属性が存在する一般的な状態管理は、aria属性を活用する。 例）開閉管理：aria-expanded |