dl は、HTML の説明リスト（<dl> / <dt> / <dd>）をそのまま扱えるブロックです。「用語とその説明」「質問と回答」「仕様名と値」のように、項目と内容が対になっている情報を構造化するのに向いています。意味的に「対であること」をブラウザや検索エンジンに正しく伝えられるため、アクセシビリティと SEO の観点で有効です。FAQ として使う場合は schema.org の FAQPage を出力できます。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
- このブロックの用途は何ですか？
-
辞書のような用語集、FAQ（質問と回答）、製品の仕様リストなど、項目と内容が対になっている情報の構造化に適しています。
意味的に「対であること」をブラウザや検索エンジンに正しく伝えられるため、アクセシビリティやSEOの観点で有効です。
基本的な使い方
- 「shitate tag blocks」から dl を追加します。最初は「用語」と「説明」が 1 組入っています。
- 「用語…」に見出しになる語（FAQ なら質問）を入力します。
- 「説明」の中に内容を入れます。段落だけでなく、リスト・画像・ボタンなど任意のブロックを入れられます。
- 末尾の「＋」で「用語」または「説明」を追加します。1 つの用語に複数の説明を続けることもできます。
エディターでの設定画面
設定項目
- 構造化データを出力（schema.org FAQPage）（親ブロックのサイドバー） — オンにすると、各用語を質問、続く説明を回答として JSON-LD を出力します。
- 親・用語・説明のそれぞれで、コアの色（背景・文字）が使えます。親と用語は文字サイズも変えられます。
- 用語のテキストには太字・斜体と shitate の装飾が使えます。
FAQPage 出力のルール
- 用語（dt）が来るたびに新しい質問が始まり、それに続く説明（dd）がすべて連結されて 1 つの回答になります。
- 質問と回答の両方が入っている組だけが出力されます。説明の無い用語、用語より前にある説明は出力されません。
- 回答はタグを除いたプレーンテキストです（リンクや画像は含まれません）。
- 1 ページに schema オンの dl が複数あれば、FAQPage もその数だけ出力されます。
- Google は現在、FAQ リッチリザルトの表示を政府・医療系サイトなどに限定しています。出力すること自体に不利益はありませんが、必ず検索結果に反映されるわけではありません。
出力される HTML と CSS
<dl class="sb-dl">
<dt class="sb-dl-dt">用語</dt>
<dd class="sb-dl-dd">…説明…</dd>
</dl>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[…]}</script>デザインは最低限です。用語は太字、説明は --st-space-s / --st-space-m の余白、説明の後に来る用語には上に --st-space-m の間隔が付きます。JavaScript は使いません。
/* FAQ 風に、用語の頭に「Q.」を付け、説明を少しインデント */
.sb-dl-dt::before { content: "Q. "; color: var(--st-color-brand); }
.sb-dl-dd { padding-left: 1.5em; border-left: 2px solid var(--st-color-border, #e5eaf9); }注意点
- 用語と説明の並び順はチェックされません。意図した「対」になるように並べてください。
- 開閉させたい FAQ は details ブロック、構造化データが欲しい FAQ は dl ブロック、という使い分けになります。両方欲しい場合は、dl を details の中に入れると構造化データは出力できますが、回答の連結ルールは変わりません。
- 1.6.1 以前の保存形式（
sb-dl__dt/sb-dl__dd）はエディターで開くと自動移行されます。