定義リスト／Definition list

定義リストを表示するためのコンポーネントです。
用語（dt）と説明文（dd）で構成されるコンテンツで使用します。

<dl class="c-definitionList">
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
</dl>

原則

必ず用語（dt）と説明文（dd）で構成されるように利用ください。
用語に挿入される文字列は現在6文字程度を想定しています。
それ以上の長さが必要な場合は、代替手段として見出しコンポーネントと段落コンポーネントを組み合わせることを提案します。

パターン

文字サイズ

文字サイズの変更が可能です。

S

<dl class="c-definitionList c-definitionList--sizeS">
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
</dl>

M

<dl class="c-definitionList c-definitionList--sizeM">
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
</dl>

L

<dl class="c-definitionList c-definitionList--sizeL">
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
  <div class="c-definitionList__item">
    <dt class="c-definitionList__term">説明用語</dt>
    <dd class="c-definitionList__description">
        詳細説明「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </dd>
  </div>
</dl>