FAQ

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

Q&Aのレイアウト構築例を紹介します。

Examples

↓

シンプルなFAQ

疲れたら踊ってもいいですか？: もちろんです。汗をかいてリフレッシュしてください。
猫がパソコンのキーボードの上に乗ってくるのはどうして？: 飼い主さんのそばにいたい気持ちや、キーボードの温かさが心地よいからという説があります。構ってほしいサインかもしれませんので、たくさん撫でてあげましょう。
ペンギンはどうして空を飛ばないんですか？: ペンギンは泳ぐことに特化した体をしているので、空は飛べませんが、水中ではまるで鳥のように自由に動き回れます。

<Stack as="dl" g="30">
  <Stack g="15">
    <Lism as="dt" fw="bold" bd-x-s bdc="current" bdw="2px" px-s="15">
      疲れたら踊ってもいいですか？
    </Lism>
    <Lism as="dd" px-s="5">
      <p>もちろんです。汗をかいてリフレッシュしてください。</p>
    </Lism>
  </Stack>
  <Stack g="15">
    <Lism as="dt" fw="bold" bd-x-s bdc="current" bdw="2px" px-s="15">
      猫がパソコンのキーボードの上に乗ってくるのはどうして？
    </Lism>
    <Lism as="dd" px-s="5">
      <p>
        飼い主さんのそばにいたい気持ちや、キーボードの温かさが心地よいからという説があります。構ってほしいサインかもしれませんので、たくさん撫でてあげましょう。
      </p>
    </Lism>
  </Stack>
  <Stack g="15">
    <Lism as="dt" fw="bold" bd-x-s bdc="current" bdw="2px" px-s="15">
      ペンギンはどうして空を飛ばないんですか？
    </Lism>
    <Lism as="dd" px-s="5">
      <p>ペンギンは泳ぐことに特化した体をしているので、空は飛べませんが、水中ではまるで鳥のように自由に動き回れます。</p>
    </Lism>
  </Stack>
</Stack>

<dl class="l--stack -g:30">
  <div class="l--stack -g:15">
    <dt class="-fw:bold -bd-x-s -bdc:current -px-s" style="--bdw: 2px; --px-s: var(--s15)">疲れたら踊ってもいいですか？</dt>
    <dd class="-px-s" style="--px-s: var(--s5)">
      <p>もちろんです。汗をかいてリフレッシュしてください。</p>
    </dd>
  </div>
  <div class="l--stack -g:15">
    <dt class="-fw:bold -bd-x-s -bdc:current -px-s" style="--bdw: 2px; --px-s: var(--s15)">猫がパソコンのキーボードの上に乗ってくるのはどうして？</dt>
    <dd class="-px-s" style="--px-s: var(--s5)">
      <p>
        飼い主さんのそばにいたい気持ちや、キーボードの温かさが心地よいからという説があります。構ってほしいサインかもしれませんので、たくさん撫でてあげましょう。
      </p>
    </dd>
  </div>
  <div class="l--stack -g:15">
    <dt class="-fw:bold -bd-x-s -bdc:current -px-s" style="--bdw: 2px; --px-s: var(--s15)">ペンギンはどうして空を飛ばないんですか？</dt>
    <dd class="-px-s" style="--px-s: var(--s5)">
      <p>ペンギンは泳ぐことに特化した体をしているので、空は飛べませんが、水中ではまるで鳥のように自由に動き回れます。</p>
    </dd>
  </div>
</dl>

↓

例

疲れたら踊ってもいいですか？

猫がパソコンのキーボードの上に乗ってくるのはどうして？

<Stack g="15">
  <Accordion.Root class="c--faq" bgc="base-2" bdrs="10">
    <Accordion.Item>
      <Accordion.Heading>
        <Accordion.Button p="20" layout="flex" ai="center" g="10" fw="bold">
          <Icon viewBox="0 0 256 256" fz="xl" c="brand">
            <path d="M192,96c0,28.51-24.47,52.11-56,55.56V160a8,8,0,0,1-16,0V144a8,8,0,0,1,8-8c26.47,0,48-17.94,48-40s-21.53-40-48-40S80,73.94,80,96a8,8,0,0,1-16,0c0-30.88,28.71-56,64-56S192,65.12,192,96Zm-64,96a16,16,0,1,0,16,16A16,16,0,0,0,128,192Z"></path>
          </Icon>
          <span>疲れたら踊ってもいいですか？</span>
        </Accordion.Button>
      </Accordion.Heading>
      <Accordion.Panel p="20" py-s="0" mx-s="5" flow="s">
        <p>もちろんです。汗をかいてリフレッシュしてください。</p>
      </Accordion.Panel>
    </Accordion.Item>
  </Accordion.Root>
  <Accordion.Root class="c--faq" bgc="base-2" bdrs="10">
    <Accordion.Item>
      <Accordion.Heading>
        <Accordion.Button p="20" layout="flex" ai="center" g="10" fw="bold">
          <Icon viewBox="0 0 256 256" fz="xl" c="brand">
            <path d="M192,96c0,28.51-24.47,52.11-56,55.56V160a8,8,0,0,1-16,0V144a8,8,0,0,1,8-8c26.47,0,48-17.94,48-40s-21.53-40-48-40S80,73.94,80,96a8,8,0,0,1-16,0c0-30.88,28.71-56,64-56S192,65.12,192,96Zm-64,96a16,16,0,1,0,16,16A16,16,0,0,0,128,192Z"></path>
          </Icon>
          <span>猫がパソコンのキーボードの上に乗ってくるのはどうして？</span>
        </Accordion.Button>
      </Accordion.Heading>
      <Accordion.Panel p="20" py-s="0" mx-s="5" flow="s">
        <p>飼い主さんのそばにいたい気持ちや、キーボードの温かさが心地よいからという説があります。構ってほしいサインかもしれませんので、たくさん撫でてあげましょう。</p>
      </Accordion.Panel>
    </Accordion.Item>
  </Accordion.Root>
</Stack>