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

SideMain

メディアクエリ・コンテナクエリに依存せず、維持したいコンテンツの長さを基準にして横並びと縦並びの切り替えを行うことができる2カラムレイアウトを作成します。

メインコンテンツとそのサイドコンテンツ、のようなレイアウトに活用できます。

基本構造

Section titled “基本構造”
div.l--sideMain
  div
  div.is--side

CSS

Section titled “CSS”

Import

Section titled “Import”
import { SideMain } from 'lism-css/react';

Props

Section titled “Props”
プロパティ出力説明
sideW--sideWside要素の横幅
mainW--mainWmain要素で維持したい最小幅

Usage

Section titled “Usage”

子要素に.is--sideが必要です。
.is--sideの横幅を--sideWで指定した値に固定しつつ、もう一方のメイン要素が--mainWで指定した横幅を下回るようになると、自動で1カラムに切り替わるようになっています。

↓
使用例

Main Content

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content

リサイズ可能 
<SideMain sideW='12rem' mainW='20rem' g='20'>
  <Box p='15' bd bdc='blue'>
    <p>Main Content</p>
    <Dummy />
  </Box>
  <Box isSide p='15' bd bdc='red'>
    <p>Side Content</p>
  </Box>
</SideMain>

反転

Section titled “反転”

-fxd:row-rクラス（flex-direction:row-reverse）を併用することで、横並びの時の順番だけを反転させることができます。

これにより、横並びの時は左側、縦並びの時は下側にside要素を配置できます。

↓
例

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content

リサイズ可能 
<SideMain fxd='row-r' sideW='10rem' mainW='16rem' g='20'>
  <Box>
    <Dummy />
  </Box>
  <Box isSide>Side Content</Box>
</SideMain>

Gridを使って似たレイアウトを構成する例

Section titled “Gridを使って似たレイアウトを構成する例”

SideMain(.l--sideMain)はブレイクポイントに依存しませんが、Gridで構成することで、レイアウトの切り替えポイントをブレイクポイントで指定して同じようなレイアウトを構築することもできます。

↓
Gridを使ってSideMainのようなレイアウトを構築する例

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content

リサイズ可能 
<Grid gta={[`'.' 'side'`, `'. side'`]} gtc={[null, '1fr 10rem']} g='20'>
  <Box>
    <Dummy />
  </Box>
  <Box ga='side'>Side Content</Box>
</Grid>
↓
sideを左側、ブレイクポイントを@mdにする例

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content

リサイズ可能 
<Grid gta={[`'.' 'side'`, null, `'side .'`]} gtc={[null, null, '10rem 1fr']} g='20'>
  <Box>
    <Dummy />
  </Box>
  <Box ga='side'>Side Content</Box>
</Grid>