スタイルガイド

このサンプルスタイルガイドでは、ページや記事の長文編集コンテンツで使用できるWYSIWYG要素を一通り紹介します。すべてを網羅しているわけではありませんが、必要になることの多い一般的な要素を紹介しています。

標準的な段落よりも目立たせつつ、ページコンテンツとして読める導入文にはclass="intro"を使用します。

読みやすさを保ちながら本文より明確に控えめにしたい補足には、class="small"を使用します。

出典、簡潔なクレジット、キャプション、編集上の補足にはclass="citation"を使用します。

編集テキスト

編集ページでは、重要性の高い内容、強調、削除した文言、ハイライトした用語、インラインcode-style labelsを、流れを損なわずに組み合わせられます。

語句を目立たせるには<mark>、削除したテキストや現行でないテキストには<del>または<s>、文字どおりのラベル、ファイル名、設定、短い技術情報には<code>を使用します。

短い案内、発売情報、購入時の補足、重要なポリシー情報には、段落にclass="callout"を使用します。

見出しの階層

見出しで明確なアウトラインを作ります。テンプレートにページタイトルがない場合は<h1>をメインタイトルに使用し、その後<h2>と<h3>でページのセクションを整理します。

ツリー用の見出しレベル1

ページセクション用の見出しレベル2

サブセクション用の見出しレベル3

詳細グループ用の見出しレベル4

簡潔なラベル用の見出しレベル5

メタデータ用の見出しレベル6

インラインセマンティクス

キーボード操作には<kbd>（Ctrl + Kなど）、略語には<abbr>（SEOなど）、用語の導入には<dfn>（構造化コンテンツなど）を使用します。

日付には<time>（2026年6月25日など）、タイトルや出典には<cite>（The Verdant Journalなど）、変数には<var>（nなど）、サンプル出力には<samp>（正常に保存されましたなど）を使用します。

インライン例には、太字、イタリック、下線、取り消し線、_{下付き文字}、^{上付き文字}、商品リンクもあります。

住所

連絡先や所在地の詳細には<address>を使用します。一般的な住所形式には使用しません。

旗艦店
123 Example Avenue
New York, NY 10001
店舗一覧を見る

リスト

リストは、十分な文章量を保ちながら、スキャンしやすい案内、リンク、インライン書式を確認できるようにします。

番号付き手順を含む箇条書き

• 商品をじっくり比較します。まず別のおすすめツリーから始め、用途に合う重要な詳細を確認します。
• 購入までの流れを計画します。リスト項目には番号付きの手順を入れられます。
  1. サイズ、素材、スタイルの要件を確認します。
  2. FAQやポリシーページなど、関連情報を確認します。
  3. 適合性、仕上がり、在庫状況のバランスが最適な選択肢を選びます。
• 簡潔な表現を使いながら、すばやく目を通しても各項目の意味が分かる十分な文脈を含めます。

補足を含む番号付きリスト

1. 明確な段落と関連リンクで、ページの目的を紹介します。
2. 役立つ詳細で主なポイントを補足します。
   • ハイライトは重要な用語に限定して使います。
   • 文字どおりのラベルやスニペットには<code>を使用します。
   • 読者の理解に役立つ箇所にのみ、太字や強調を使用します。
3. 行き止まりの断片で終わらせず、明確な次の考えでセクションを締めくくります。

引用とコールアウト

出典付きの文章、利用者の声、編集上の抜粋、周囲の文章から視覚的に分ける必要がある内容には、ブロック引用を使用します。

最も役立つ商品コンテンツは、実用的な疑問に答えながら、ブランド独自の視点も伝えます。

Verdant編集チーム

通常のブロック引用よりも強く視覚的に強調したい引用には、class="pullquote"を使用します。

画像

画像にキャプションが必要な場合はfigureを使用します。以下の例では、キャプションを下部と上部に配置する<figure class="embed image">と<figcaption class="caption">を紹介します。

ホスト型動画

ホスト型MP4コンテンツには標準の<video>要素を使用します。周囲のレイアウトで追加の構造が必要な場合を除き、マークアップはシンプルに保ちます。

YouTube iframe

YouTubeから動画を埋め込む場合は、標準のYouTube iframeを使用します。

表

表には役立つ見出しと多様なセル内容を含め、読者が詳細をすばやく比較できるようにします。

ツリー比較例

特徴	標準オプション	おすすめオプション	注記
メインリンク	商品1	商品2	表のセル内のリンクは、見つけやすくタップしやすい状態にします。
編集上の適合性	軽い強調を含む短い説明。	複数行にわたって折り返され、最も重要な語句に強調テキストを含む、より長い説明。	セルの長さに変化をつけ、配置と間隔を確認します。
お手入れの詳細	Spot clean	Professional care recommended	インラインコードは、文字どおりのラベル、お手入れタグ、簡潔な仕様を示すのに使用できます。
在庫状況	限定	オンラインと旗艦店で購入できます。	表のセルには、ハイライト、リンク、文章形式の案内を含められます。

定義リスト

用語と説明の組み合わせ、用語集の項目、簡潔な仕様、グループ化したメタデータには<dl>を使用します。

導入段落

より印象的な導入段落を作成するにはclass="intro"を使用します。

キャプション

一貫したキャプションのスタイルが必要なfigureのキャプションにはclass="caption"を使用します。

プルクオート

引用をより強い編集上のアクセントとして機能させるにはclass="pullquote"を使用します。

コードブロック

間隔や改行が重要な長い例には、<code>とともに<pre>を使用します。

<section>
  <h2>Care notes for trees</h2>
  <p class="intro">Begin with a concise overview that helps readers orient themselves.</p>
  <ul>
    <li><strong>Store carefully.</strong> Keep the item clean, dry, and protected between uses.</li>
    <li><em>Review the details.</em> Link to related products or supporting pages where useful.</li>
  </ul>
  <p class="small">Use small text for secondary reminders, not primary instructions.</p>
</section>

トグル

メインページを圧迫せずに任意のコンテンツを表示できるようにするには、<details>と<summary>を使用します。

展開可能なコンテンツの例

detailsブロックは、長いポリシー、お手入れ情報、サイズ案内、任意の編集メモに便利です。

区切り線とタスクリスト

別の見出しを追加するよりテーマの区切りが明確になる場合は、<hr>を使用します。進捗やチェックリスト形式を示す必要があるタスク形式のコンテンツには、チェックボックス入力を表示できます。

---

• 重要な進捗がすでに完了している、チェック済みのタスク項目。
• 補足情報が未対応の、未チェックのタスク項目。

各セクションに明確な目的があれば、長文コンテンツでも読みやすく、役立ち、一貫性のあるVerdant体験を提供できます。