Terms

dl,dt,ddタグによるシンプルな用語リストの構築例を紹介します。

↓

例 1

The term A: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
The term B: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

<Stack tag='dl' g='40'>
  <div>
    <Text tag='dt' fw='bold' bd='is' bdw='2px' pis='20'>
      The term A
    </Text>
    <Lism tag='dd' mbs='5' pis='30'>
      <p>...</p>
    </Lism>
  </div>
  <div>
    <Text tag='dt' fw='bold' bd='is' bdw='2px' pis='20'>
      The term B
    </Text>
    <Lism tag='dd' mbs='5' pis='30'>
      <p>...</p>
    </Lism>
  </div>
</Stack>

横並びの例

WithSide を活用して、画面サイズが広い場合に用語リストを横並びにする例です。

↓

例

The term A: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
The term B: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
The term C (長めの用語のテストです。This is ダミーテキスト).: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

リサイズ可能

<Stack tag='dl' g='40'>
  <WithSide sideW='10rem' mainMinW='16rem' >
    <Text isSide tag='dt' fw='bold'>
      The term A
    </Text>
    <Lism tag='dd' pis='30'>
      <p>...</p>
    </Lism>
  </WithSide>
  <WithSide sideW='10rem' mainMinW='16rem' >
    <Text isSide tag='dt' fw='bold'>
      The term B
    </Text>
    <Lism tag='dd' pis='30'>
      <p>...</p>
    </Lism>
  </WithSide>
  <WithSide sideW='10rem' mainMinW='16rem' >
    <Text isSide tag='dt' fw='bold'>
      The term C (長めの用語のテストです。This is ダミーテキスト).
    </Text>
    <Lism tag='dd' pis='30'>
      <p>...</p>
    </Lism>
  </WithSide>
</Stack>