スタイルガイド

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

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

住所

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

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

リスト

リストは、流し読みしやすい案内を提供しながら、折り返しやリンク、インライン書式を確認できる十分なテキスト量も確保できるようにしてください。

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

• 商品をよく比較して選びましょう。 まず、 別の注目アート作品、目的に最も合う重要な詳細を確認します。
• 購入までの流れを設計しましょう。 リスト項目には、入れ子になった番号付き手順を含められます。
  1. サイズ、素材、またはスタイルの要件を確認してください。
  2. 次のような関連コンテンツを確認します。 よくある質問 およびポリシーページ。
  3. 最もバランスのよいオプションを選択します 適合, 仕上げる、および在庫状況。
• 簡潔な表現を使いながらも、各項目をざっと見ただけで内容がわかるだけの文脈を含めます。

箇条書きの注記を含む番号付きリスト

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

引用とコールアウト

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

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

Darkroom編集チーム

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

---

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

各セクションに明確な目的があれば、長文コンテンツでも流し読みしやすく、読みやすく、Darkroom全体で一貫性を保てます。