Lism CSS
検索

WithSide (l--withSide)

l--withSide は、メディアクエリ・コンテナクエリに依存せず、維持したいコンテンツの長さを基準にして横並び・縦並びが自動で切り替わる2カラムレイアウトのクラスです。

  • サイドコンテンツの横幅を--sideWで指定し、メインコンテンツには可能な限り維持したい横幅を--mainWで指定します。
  • メインコンテンツ側が--mainWを維持できる範囲内で横並びが維持され、それを下回ってしまう場合は縦並びへ自動で切り替わります。

「画像とコンテンツ」、「メインエリアとサイドバー」のようなレイアウトに活用できます。

CSS

/*
	Note: fxgの比率を 1:でかい数 にして、fix側を広がらないようにする。
      flex-grow は 変数指定だと挙動が変になることにも注意。
 */
.l--withSide {
  --sideW: auto;
  --mainW: max(20rem, 50%);
  display: flex;
  flex-wrap: wrap;

  > .is--side {
    flex-basis: var(--sideW);
    flex-grow: 1; /* 0 だと折り返されたときに広がらない */
    min-width: 0;
  }

  > :not(.is--side) {
    flex-grow: 9999999; /* できるだけ fix側を 指定値ピッタリに近づけるためにかなり大きな数値を指定 */
    flex-basis: min(100%, var(--mainW)); /* このサイズが折り返しポイントの基準となる */
    min-width: 0;
  }
}

子要素の一方にis--sideが必要です。

div.l--withSide
  div
  div.is--side

Lismコンポーネント

Import

import { WithSide } from 'lism-css/react';

専用Props

プロパティ出力説明
sideW --sideW side要素の横幅
mainW --mainW main要素で維持したい最小幅

Usage

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

リサイズ 
<WithSide sideW="12rem" mainW="20rem" g="20">
  <Box p="15" bd bdc="blue">
    <p>Main Content</p>
    <p>
      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.
    </p>
  </Box>
  <Box isSide p="15" bd bdc="red">
    <p>Side Content</p>
  </Box>
</WithSide>

反転

-fxd:row-reverseクラス（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
リサイズ 
<WithSide fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
  <Box>
    <p>
      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.
    </p>
  </Box>
  <Box isSide>Side Content</Box>
</WithSide>

メディアとテキストが交互に並ぶレイアウト

画面が広い時はメディアとテキストが横並びで、画面が狭い時はメディアとテキストが縦並びになるようなレイアウトにも l--withSide を使うことができます。

特に、それらの組み合わせ（メディア＋本文）が複数並んで横並びの時にメディアの位置（左右）が交互に切り替わりつつも、縦並びになる時はメディアが上側に統一されるようなレイアウトで便利です。

↓
例

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ 
<Stack isContainer g="40">
  <WithSide sideW="40%" g="30" ai="center">
    <Frame ar="3/2" isSide max-h="50cqw">
      <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
    </Frame>
    <Box px="10">ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。</Box>
  </WithSide>


  <WithSide fxd="row-reverse" sideW="40%" g="30" ai="center">
    <Frame ar="3/2" isSide max-h="50cqw">
      <img src="https://cdn.lism-css.com/img/a-2.jpg" alt="" width="960" height="640" />
    </Frame>
    <Box px="10">ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。</Box>
  </WithSide>
</Stack>

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

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

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

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>
    <p>
      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.
    </p>
  </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>
    <p>
      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.
    </p>
  </Box>
  <Box ga="side">Side Content</Box>
</Grid>

© Lism CSS. All rights reserved.

目次