コンテンツにスキップ
Lism UI

Hero

ヒーローコンテンツの作成例を紹介します。

Usage

↓
例 1

DEMO 01

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。

リサイズ可能 
<Stack isFullwide minH='50vh' bgc='base-2'>
  <Container size='m' hasGutter isFlow my='auto'>
    <Text fw='bold' fz='xl'>DEMO 01</Text>
    <Dummy length='l' lang='ja'/>
  </Container>
</Stack>
↓
例2: ヘッダー・フッター・レイヤー要素 を追加
Header
XXX
XXX

DEMO 02

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.

Footer
リサイズ可能 
<Stack isFullwide minH='70vh' g='30' c='white' pos='r'>
  <Frame isLayer>
    <Media isLayer src='/img/img-1.jpg' alt='' width='960' height='640'/>
    <Layer blur='4px' bgc='black:50%' />
  </Frame>
  <Flex jc='sb' p='30' z='0' g='30'>
    <Box>Header</Box>
    <Flex g='30'>
      <div>XXX</div>
      <div>XXX</div>
    </Flex>
  </Flex>
  <Container size='m' hasGutter isFlow my='auto'>
    <Text fw='bold' fz='xl'>DEMO 02</Text>
    <Dummy length='l' />
  </Container>
  <Center p='20' z='0'>Footer</Center>
</Stack>

is--layer, ShapeDivider との組み合わせ

以下の例では、 オプトインコンポーネントの<ShapeDivider>も使用しています。

↓
With ShapDivide & Layers

ShapDivider & Layers

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.

Footer
リサイズ可能 
<Stack isFullwide hasGutter pos='r' minH='50vh' c='white' g='20'>
  <ShapeDivider viewBox='0 0 10 10' c='base' level='6' scale='-Y' offsetY='-0.5px' z='1'>
    <path d="M10,10V0L0,9.5V10L10,10z"/>
  </ShapeDivider>
  <Frame isLayer>
    <Media isLayer src='/img/img-2.jpg' alt='' width='960' height='640'/>
    <Layer blur='4px' bgc='black:50%' />
  </Frame>
  <Container size='m' isFlow py='40' my='auto' z='0'>
    <Text fw='bold' fz='xl'>ShapDivider & Layers</Text>
    <Dummy length='l' />
  </Container>
  <Box z='0' ta='c'>Footer</Box>
  <ShapeDivider viewBox='0 0 10 10' c='base' level='6' offsetY='0.5px' z='1'>
    <path d="M10,10V0L0,9.5V10L10,10z"/>
  </ShapeDivider>
</Stack>
↓
clipPathと組み合わせ、背景に画像があるコンテンツの境界を斜めにつなぐ

ShapDivider & Layers

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.

ShapDivider & Layers

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.

リサイズ可能 
<Box isFullwide style={{ '--slopeH': 'clamp(2.5rem, 1.25rem + 5vw, 5rem)' }}>
  <Stack isFullwide hasGutter pos='r' minH='50vh' c='white' g='20'>
    <ShapeDivider viewBox='0 0 10 10' h='var(--slopeH)' c='base' scale='-Y' offsetY='-0.5px' z='1'>
      <path d='M10,10V0L0,9.5V10L10,10z'></path>
    </ShapeDivider>
    <Frame isLayer bgc='black'>
      <Media isLayer src='/img/img-2.jpg' alt='' width='960' height='640' op='0.5' blur='6px'/>
    </Frame>
    <Container size='m' isFlow py='40' pr={['0', '25%', '33%']} my='auto' z='0'>
      <Text fw='bold' fz='xl'>ShapDivider & Layers</Text>
      <Dummy length='l' />
    </Container>
    <Spacer h='var(--slopeH)' />
  </Stack>
  <Stack isFullwide hasGutter pos='r' minH='50vh' c='white' mbs='calc(0px - var(--slopeH))'>
    <Frame
      isLayer bgc='black'
      style={{
        clipPath: 'polygon(0 var(--slopeH), 0 100%, 100% 100%, 100% 0)',
      }}
    >
      <Media isLayer src='/img/img-3.jpg' alt='' width='960' height='640' op='0.5' blur='6px'/>
    </Frame>
    <Spacer h='var(--slopeH)' />
    <Container size='m' isFlow py='40' pl={['0', '25%', '33%']} my='auto' z='0'>
      <Text fw='bold' fz='xl'>ShapDivider & Layers</Text>
      <Dummy length='l' />
    </Container>
    <ShapeDivider viewBox='0 0 10 10' h='var(--slopeH)' c='base' scale='-X' offsetY='0.5px' z='1'>
      <path d='M10,10V0L0,9.5V10L10,10z'></path>
    </ShapeDivider>
  </Stack>
</Box>

子要素のminHに%を使う方法

最低限の高さを確保しつつ、ウインドウが狭い時にコンテンツに合わせて高さを伸ばしたいケースについて。

Heroコンテンツの高さを min-height や aspect-ratio で指定する場合、子要素の height や min-height に%を指定しても無効になってしまいます。

↓
NG例

minH:50%が効かない

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能 
<Stack isFullwide minH='400px' bgc='base-2'>
  <Box minH='50%' my='auto' bgc='base' p='20' px='40' ac='c'>
    <Text fw='bold'>minH:50%が効かない</Text>
    <Dummy length='s' />
  </Box>
</Stack>

このため、少し工夫が必要です。

↓
改善例

OK

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能 
<Stack isFullwide minH='400px' bgc='base-2'>
  <FlexItem d='grid' fxg='1' ai='c' px='40'>
    <Center minH='50%' bgc='base' p='30' bxsh='1'>
      <Text fw='bold'>OK</Text>
      <Dummy length='s' />
    </Center>
  </FlexItem>
</Stack>
  1. 親要素がStack で構成されているので、子要素であるコンテンツのflex-growを1にして高さを親に合わせて伸ばします。
  2. 子要素をgridにすることで、さらにその子要素でheightやmin-heightに%を使えるようにします。
    （この時、その子要素を中央寄せ等にしないとstretchが適用されて高さが伸びることに注意してください。）
↓
活用例

min-height 50%

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 isFullwide pos='r' minH='50vh'>
  <Frame isLayer>
    <Media src='/img/img-3.jpg' alt='' width='960' height='640'/>
  </Frame>
  <Layer bgc='black' op='0.2' />
  <FlexItem layout={Grid} fxg='1' ai='c' hasGutter>
    <Center minH='50%' p='30' c='white' bgc='black:70%' bdrs='2' g='20'>
      <Text fw='bold' fz='xl'>min-height 50%</Text>
      <Dummy length='l' />
    </Center>
  </FlexItem>
</Stack>

別ページで確認する

大きい画面で見る