スタイルガイド

このサンプルのスタイルガイドでは、ページや記事の長文コンテンツに使用できる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 Reset Journal, <var> 次のような変数について n、および <samp> 次のようなサンプル出力の場合 正常に保存されました.

インラインの例には、次の内容も含まれます 太字, 斜体, 下線, 取り消し線, _{下付き文字}, ^{上付き文字}、および 商品リンク.

住所

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

旗艦店
123 Example Avenue
New York, NY 10001
所在地を表示

リスト

リストは、ざっと確認できる案内を提供しながら、折り返しやリンク、インライン書式をテストできる十分なテキスト量も確保する必要があります。

順序付きステップを含む順序なしリスト

• 商品を慎重に比較しましょう。 別のおすすめシャツから始め、用途に最も重要な詳細を確認してください。
• 購入までの流れを計画しましょう。 リスト項目には、入れ子になった順序付き手順を含められます。
  1. サイズ、素材、スタイルの要件を確認してください。
  2. 次の補足コンテンツを確認してください。 よくあるご質問 およびポリシーページ。
  3. 最適なバランスのオプションを選択してください フィット感, 仕上がり、および在庫状況。
• 簡潔な表現を使いながら、各項目をすばやく確認しても意味が伝わるだけの背景情報を含めましょう。

順序付きリストと順不同の注記

1. 明確な段落と関連リンクで、ページの目的を紹介します。
2. 役立つ詳細情報で要点を補足します。
   • ハイライト 重要な用語は控えめに使用します。
   • 使用 <code> 文字どおりのラベルや短い文に使用します。
   • 含める 太字 または 強調済み 読者の役に立つ場合にのみテキストを使用します。
3. セクションは、行き止まりの断片ではなく、明確な次の展開で締めくくりましょう。

引用とコールアウト

引用元の文章、お客様の声、編集記事の抜粋、または周囲の本文と視覚的に区別する必要がある記述には、ブロック引用を使用してください。

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

Reset編集チーム

使用 class="pullquote" 引用文に、標準的なブロック引用よりも強い視覚的なアクセントを持たせる場合に使用します。

画像

画像にキャプションが必要な場合は図を使用します。以下の例では、次を使用しています <figure class="embed image"> および <figcaption class="caption"> キャプションを上下両方に配置する方法を示します。

ホスト型動画

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

YouTube iframe

YouTubeから動画を埋め込む場合は、標準のYouTube iframeを使用してください。

表

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

シャツの比較例

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

定義リスト

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

導入段落

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

キャプション

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

引用文

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

コードブロック

使用 <pre> 次を含む <code> 間隔や改行が重要な、より長い例に使用します。

<section>
  <h2>Care notes for shirts</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> メインページを圧迫せずに利用できるようにしておきたい任意のコンテンツに使用します。

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

詳細ブロックは、長い規約、お手入れ情報、サイズ案内、任意の編集メモなどに便利です。

ルールとタスクリスト

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

---

• チェック済みのタスク項目： 重要な進捗 すでに完了しています。
• 未チェックのタスク項目： 補足情報 まだ保留中です。

各セクションに明確な目的があると、長文コンテンツでもすばやく確認でき、読みやすく、Resetの体験全体で一貫性を保てます。