FAQ

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

Examples

↓

シンプルなFAQ

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

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

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

↓

アコーディオン形式のFAQ

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

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

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

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

ペンギンはどうして空を飛ばないんですか？

ペンギンは泳ぐことに特化した体をしているので、空は飛べませんが、水中ではまるで鳥のように自由に動き回れます。

<Stack>
  <Accordion.Root p='30' px='10' bd='b' bdc='divider'>
    <Accordion.Header>
      <Accordion.Label fw='bold'>疲れたら踊ってもいいですか？</Accordion.Label>
      <Accordion.Icon />
    </Accordion.Header>
    <Accordion.Body mbs='30' isFlow='s'>
      <p>もちろんです。汗をかいてリフレッシュしてください。</p>
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root p='30' px='10' bd='b' bdc='divider'>
    <Accordion.Header>
      <Accordion.Label fw='bold'>猫がパソコンのキーボードの上に乗ってくるのはどうして？</Accordion.Label>
      <Accordion.Icon />
    </Accordion.Header>
    <Accordion.Body mbs='30' isFlow='s'>
      <p>飼い主さんのそばにいたい気持ちや、キーボードの温かさが心地よいからという説があります。構ってほしいサインかもしれませんので、たくさん撫でてあげましょう。</p>
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root p='30' px='10' bdc='divider'>
    <Accordion.Header>
      <Accordion.Label fw='bold'>ペンギンはどうして空を飛ばないんですか？</Accordion.Label>
      <Accordion.Icon />
    </Accordion.Header>
    <Accordion.Body mbs='30' isFlow='s'>
      <p>ペンギンは泳ぐことに特化した体をしているので、空は飛べませんが、水中ではまるで鳥のように自由に動き回れます。</p>
    </Accordion.Body>
  </Accordion.Root>
</Stack>

<script type="module" src="https://cdn.jsdelivr.net/npm/lism-css/dist/scripts/accordion.js"></script>

<div class='l--stack'>
  <details class='d--accordion -p:30 -px:10 -bd:b -bdc:divider'>
    <summary class='d--accordion_header l--flex -ai:c'>
      <span class='d--accordion_label -fx:1 -fw:bold'>疲れたら踊ってもいいですか？</span>
      <span class='d--accordion_icon -d:ig'>
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='1em' height='1em' fill='currentColor' focusable='false' class='l--icon' aria-hidden='true'>
          <path d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'></path>
        </svg>
      </span>
    </summary>
    <div class='d--accordion_body l--grid -mbs:30'>
      <div class='d--accordion_inner is--flow -flow:s -ov:h'>
        <p>もちろんです。汗をかいてリフレッシュしてください。</p>
      </div>
    </div>
  </details>

  <details class='d--accordion -p:30 -px:10 -bd:b -bdc:divider'>
    <summary class='d--accordion_header l--flex -ai:c'>
      <span class='d--accordion_label -fx:1 -fw:bold'>猫がパソコンのキーボードの上に乗ってくるのはどうして？</span>
      <span class='d--accordion_icon -d:ig'>
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='1em' height='1em' fill='currentColor' focusable='false' class='l--icon' aria-hidden='true'>
          <path d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'></path>
        </svg>
      </span>
    </summary>
    <div class='d--accordion_body l--grid -mbs:30'>
      <div class='d--accordion_inner is--flow -flow:s -ov:h'>
        <p>飼い主さんのそばにいたい気持ちや、キーボードの温かさが心地よいからという説があります。構ってほしいサインかもしれませんので、たくさん撫でてあげましょう。</p>
      </div>
    </div>
  </details>
  <details class='d--accordion -p:30 -px:10 -bdc:divider'>
    <summary class='d--accordion_header l--flex -ai:c'>
      <span class='d--accordion_label -fx:1 -fw:bold'> ペンギンはどうして空を飛ばないんですか？ </span>
      <span class='d--accordion_icon -d:ig'>
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='1em' height='1em' fill='currentColor' focusable='false' class='l--icon' aria-hidden='true'>
          <path d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'></path>
        </svg>
      </span>
    </summary>
    <div class='d--accordion_body l--grid -mbs:30'>
      <div class='d--accordion_inner is--flow -flow:s -ov:h'>
        <p>ペンギンは泳ぐことに特化した体をしているので、空は飛べませんが、水中ではまるで鳥のように自由に動き回れます。</p>
      </div>
    </div>
  </details>
</div>

↓

例

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

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

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

ペンギンはどうして空を飛ばないんですか？

ペンギンは泳ぐことに特化した体をしているので、空は飛べませんが、水中ではまるで鳥のように自由に動き回れます。

<Stack g='20'>
  <Accordion.Root lismClass='c--faq' bgc='base-2' bdrs='10'>
    <Accordion.Header p='30'>
      <Icon viewBox='0 0 256 256' fz='xl' c='main'>
        <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>
      <Accordion.Label fw='bold'>疲れたら踊ってもいいですか？</Accordion.Label>
      <Accordion.Icon />
    </Accordion.Header>
    <Accordion.Body p='30' pbs='0' mis='5' isFlow='s'>
      <p>もちろんです。汗をかいてリフレッシュしてください。</p>
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root lismClass='c--faq' bgc='base-2' bdrs='10'>
    <Accordion.Header p='30'>
      <Icon viewBox='0 0 256 256' fz='xl' c='main'>
        <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>
      <Accordion.Label fw='bold'>猫がパソコンのキーボードの上に乗ってくるのはどうして？</Accordion.Label>
      <Accordion.Icon />
    </Accordion.Header>
    <Accordion.Body p='30' pbs='0' mis='5' isFlow='s'>
      <p>飼い主さんのそばにいたい気持ちや、キーボードの温かさが心地よいからという説があります。構ってほしいサインかもしれませんので、たくさん撫でてあげましょう。</p>
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root lismClass='c--faq' bgc='base-2' bdrs='10'>
    <Accordion.Header p='30'>
      <Icon viewBox='0 0 256 256' fz='xl' c='main'>
        <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>
      <Accordion.Label fw='bold'>ペンギンはどうして空を飛ばないんですか？</Accordion.Label>
      <Accordion.Icon />
    </Accordion.Header>
    <Accordion.Body p='30' pbs='0' mis='5' isFlow='s'>
      <p>ペンギンは泳ぐことに特化した体をしているので、空は飛べませんが、水中ではまるで鳥のように自由に動き回れます。</p>
    </Accordion.Body>
  </Accordion.Root>
</Stack>