Dzero Html

Name: Dzero Html
Author: d-zero-dev

ASecurity

D-ZERO の HTML/Pug マークアップ規約。HTML や Pug を書く・編集する・レビューするときに使う。コンポーネント設計、クラス命名、文書構造、画像、リンク、メタ情報に適用する。

20 stars

0 votes

0 copies

1 views

Added 9/20/2026

designgo

Security Analysis

A100/100

Scanned 9/20/2026

Install to Claude Code

$npx -y skills add d-zero-dev/frontend-guidelines --skill dzero-html --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Dzero Html?

Add the live security badge to your README — it updates automatically with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/d-zero-dev-dzero-html/badge)](https://www.skillsdirectory.com/skills/d-zero-dev-dzero-html)

More formats (shields.io, HTML) on the badges page.

Download with Pro

Files

SKILL.md

---
name: dzero-html
description: D-ZERO の HTML/Pug マークアップ規約。HTML や Pug を書く・編集する・レビューするときに使う。コンポーネント設計、クラス命名、文書構造、画像、リンク、メタ情報に適用する。
paths: ['**/*.html', '**/*.pug']
license: CC-BY-NC-SA-4.0
---

# HTML コーディング規約

> 実装レイヤー選定（`dzero-tech-selection`）を経ていない場合は先にそちらを読むこと。詳細は [HTML ガイドライン](https://guidelines.d-zero.co.jp/html/) を参照。

## 実装規範

### 大原則

- HTML Living Standard の規定には例外なく従う
- アクセシビリティの基準と判断（WAI-ARIA・代替テキスト・キーボード操作）は `dzero-a11y` に従う
- リントエラー（Markuplint / pug-lint / Prettier）は例外なく必ず修正する。ルールが現状にそぐわない場合はコードを曲げず Config ファイルの変更を提案する

### コンポーネント

- ページを構成するパーツは「コンポーネント」単位で管理する。クラス命名の形式（`c-` プレフィックス、`__` によるエレメント区切り、コンポーネント境界、`c-content-main` 内の制約）は Markuplint が強制するため、警告に従って修正すればよい
- コンポーネント分割で重視するのは再利用性ではなく、**独立して完結し他へ影響を与えないこと**
- コンポーネントを拡張したいときは、クラスを足すのではなく完全に別のコンポーネントを作る（1 要素に複数のコンポーネントクラスを与えない）
- ボタン単体・フォームコントロール単体はコンポーネント化せず、エレメントとして扱う。スタイルが不要ならクラスのないエレメントがあってもよい

### 状態の管理

- 要素の状態は原則クラスを使わず、次の優先順位で管理する: **1. ネイティブ属性（`disabled` 等）→ 2. ARIA 属性（`aria-expanded` 等）→ 3. `data-*` 属性**
- `hidden` 属性と `aria-hidden` は意味が異なる。同じものとして扱わない
- スタイルのみの目的で `data-*` 属性を使わない（エレメントクラスを使う）

### 文書構造

- 見出しタグは**見た目ではなく文書アウトラインで判断**する。見た目が見出しに見えるテキスト（カード内の改行された文言等）を安易に `h3` / `h4` にしない（レベルのスキップ等の機械検出は Markuplint が担保する）
- `p` 要素を濫用しない。段落でないテキストの縦並びには `div` を使う。画像単体を `p` で囲わない（テキストの代替画像を除く）
- 装飾のためだけの `div` / `span` を増やさない。装飾は CSS の擬似要素（`::before` / `::after`）で実現できないか先に検討する

### 画像

- レスポンシブの出し分けは `picture` 要素を使う。`sp-only` / `pc-only` クラスでの `img` 二重配置はしない（`display: none` でも画像リクエストは発生する）
- ファーストビューより下の `img` にはなるべく `loading="lazy"` を指定する。`decoding` 属性は指定しない
- 代替テキストの付け方は `dzero-a11y` を参照

### リンク・パス・外部リソース

- パスは原則 `/` で始まるルート相対で書く。外部リンクは `//` でなく `https://` で始める
- ページ内リンク用の `id`（URL フラグメント）は適切に命名し、安易に削除・変更しない（外部からリンクされている可能性がある）
- 外部リソースの読み込みは原則禁止。セルフホストする（クライアント依頼・社内許可がある場合と、Google Maps 等セルフホスト不可能なものを除く）

### メタ・記法

- `<meta name="format-detection" content="telephone=no" />` は必須。ビューポートに `user-scalable` は書かない
- 論理属性の値は省略する（`disabled="disabled"` ではなく `disabled`）。省略可能な属性（`type="text/css"` 等）は書かない
- HTML コメントは製品コードに残るため不用意に書かない。Pug の変換時に削除されるコメント記法を活用する

### 命名

- 正しい英語を採用し、短さよりも明確さを優先する。省略は基本的に避け、使う場合は[規定の省略語](https://guidelines.d-zero.co.jp/naming/abbreviation.html)に統一する
- 文字構成: 半角英数とハイフン、区切りはハイフン、小文字。連番はゼロ埋め 2 桁以上
- クラス名は `[機能名]-[修飾語・詳細]-[連番]` の組み合わせ（`[機能名]` 以外は任意）
- 同じ意味の識別子は統一する: `home`（`top` 不可）、`sub`（`corner` 不可）、`breadcrumb`、`carousel`（`slider` / `gallery` 不可）、`hero`（`mv` / `mainvisual` 不可）、`heading`（`headline` 不可）、`pagination`（`pager` 不可）、`prev`（`back` 不可）

Attribution

d-zero-dev

View source More from d-zero-dev →

SSkills DirectorySkills Directory

Your tool, in front of Claude Code builders.

3 founder slots · $299/mo · GSC-verified traffic · sponsors can never buy grades.

See placements

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments (0)

No comments yet. Be the first to comment!

--- name: dzero-html description: D-ZERO の HTML/Pug マークアップ規約。HTML や Pug を書く・編集する・レビューするときに使う。コンポーネント設計、クラス命名、文書構造、画像、リンク、メタ情報に適用する。 paths: ['**/*.html', '**/*.pug'] license: CC-BY-NC-SA-4.0 --- # HTML コーディング規約 > 実装レイヤー選定（`dzero-tech-selection`）を経ていない場合は先にそちらを読むこと。詳細は [HTML ガイドライン](https://guidelines.d-zero.co.jp/html/) を参照。 ## 実装規範 ### 大原則 - HTML Living Standard の規定には例外なく従う - アクセシビリティの基準と判断（WAI-ARIA・代替テキスト・キーボード操作）は `dzero-a11y` に従う - リントエラー（Markuplint / pug-lint / Prettier）は例外なく必ず修正する。ルールが現状にそぐわない場合はコードを曲げず Config ファイルの変更を提案する ### コンポーネント - ページを構成するパーツは「コンポーネント」単位で管理する。クラス命名の形式（`c-` プレフィックス、`__` によるエレメント区切り、コンポーネント境界、`c-content-main` 内の制約）は Markuplint が強制するため、警告に従って修正すればよい - コンポーネント分割で重視するのは再利用性ではなく、**独立して完結し他へ影響を与えないこと** - コンポーネントを拡張したいときは、クラスを足すのではなく完全に別のコンポーネントを作る（1 要素に複数のコンポーネントクラスを与えない） - ボタン単体・フォームコントロール単体はコンポーネント化せず、エレメントとして扱う。スタイルが不要ならクラスのないエレメントがあってもよい ### 状態の管理 - 要素の状態は原則クラスを使わず、次の優先順位で管理する: **1. ネイティブ属性（`disabled` 等）→ 2. ARIA 属性（`aria-expanded` 等）→ 3. `data-*` 属性** - `hidden` 属性と `aria-hidden` は意味が異なる。同じものとして扱わない - スタイルのみの目的で `data-*` 属性を使わない（エレメントクラスを使う） ### 文書構造 - 見出しタグは**見た目ではなく文書アウトラインで判断**する。見た目が見出しに見えるテキスト（カード内の改行された文言等）を安易に `h3` / `h4` にしない（レベルのスキップ等の機械検出は Markuplint が担保する） - `p` 要素を濫用しない。段落でないテキストの縦並びには `div` を使う。画像単体を `p` で囲わない（テキストの代替画像を除く） - 装飾のためだけの `div` / `span` を増やさない。装飾は CSS の擬似要素（`::before` / `::after`）で実現できないか先に検討する ### 画像 - レスポンシブの出し分けは `picture` 要素を使う。`sp-only` / `pc-only` クラスでの `img` 二重配置はしない（`display: none` でも画像リクエストは発生する） - ファーストビューより下の `img` にはなるべく `loading="lazy"` を指定する。`decoding` 属性は指定しない - 代替テキストの付け方は `dzero-a11y` を参照 ### リンク・パス・外部リソース - パスは原則 `/` で始まるルート相対で書く。外部リンクは `//` でなく `https://` で始める - ページ内リンク用の `id`（URL フラグメント）は適切に命名し、安易に削除・変更しない（外部からリンクされている可能性がある） - 外部リソースの読み込みは原則禁止。セルフホストする（クライアント依頼・社内許可がある場合と、Google Maps 等セルフホスト不可能なものを除く） ### メタ・記法 - `<meta name="format-detection" content="telephone=no" />` は必須。ビューポートに `user-scalable` は書かない - 論理属性の値は省略する（`disabled="disabled"` ではなく `disabled`）。省略可能な属性（`type="text/css"` 等）は書かない - HTML コメントは製品コードに残るため不用意に書かない。Pug の変換時に削除されるコメント記法を活用する ### 命名 - 正しい英語を採用し、短さよりも明確さを優先する。省略は基本的に避け、使う場合は[規定の省略語](https://guidelines.d-zero.co.jp/naming/abbreviation.html)に統一する - 文字構成: 半角英数とハイフン、区切りはハイフン、小文字。連番はゼロ埋め 2 桁以上 - クラス名は `[機能名]-[修飾語・詳細]-[連番]` の組み合わせ（`[機能名]` 以外は任意） - 同じ意味の識別子は統一する: `home`（`top` 不可）、`sub`（`corner` 不可）、`breadcrumb`、`carousel`（`slider` / `gallery` 不可）、`hero`（`mv` / `mainvisual` 不可）、`heading`（`headline` 不可）、`pagination`（`pager` 不可）、`prev`（`back` 不可）