FAQ

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

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

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

Examples

↓

シンプルなFAQ

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

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

↓

例

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

もちろんです。汗をかいてリフレッシュしてください。

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

飼い主さんのそばにいたい気持ちや、キーボードの温かさが心地よいからという説があります。構ってほしいサインかもしれませんので、たくさん撫でてあげましょう。

<Accordion.Root lismClass='c--faq' bgc='base-2' bdrs='10'>
    <Accordion.Header p='20'>
      <Accordion.Label 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.Label>
      <Accordion.Icon />
    </Accordion.Header>
    <Accordion.Body p='20' py-s='0' mx-s='5' flow='s'>
      <p>もちろんです。汗をかいてリフレッシュしてください。</p>
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root lismClass='c--faq' bgc='base-2' bdrs='10'>
    <Accordion.Header p='20'>
      <Accordion.Label 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.Label>
      <Accordion.Icon />
    </Accordion.Header>
    <Accordion.Body p='20' py-s='0' mx-s='5' flow='s'>
      <p>飼い主さんのそばにいたい気持ちや、キーボードの温かさが心地よいからという説があります。構ってほしいサインかもしれませんので、たくさん撫でてあげましょう。</p>
    </Accordion.Body>
  </Accordion.Root>
</Stack>