Lism Tips

l--withSide（メインと横の2列）

l--withSide は、メインと横の2列を作り、メインの幅が足りなくなると自動で縦並びに切り替えるクラスです。

l--withSide は、メインと横（サイド）の2列を作るクラスです。メインに「できればこれだけは欲しい幅」を決めておくと、その幅を保てなくなったところで、自動で縦並びに切り替わります。画面の幅ごとの指定は要りません。

どんなときに使う？#

  • 「画像と文章」を横に並べ、せまい画面では縦に積みたいとき
  • 「本文とサイドバー」のような2列のレイアウトを作るとき
  • 画像と文章の組を交互に左右入れかえて並べたいとき

3つ以上を同じように切り替えたいなら l--switchColumns を使います。

使い方#

l--withSide の箱に子要素を2つ入れ、横に置くほうに is--side を付けます。is--side はどちらか一方に必ず要ります。

表示例

メイン。幅が 12rem を保てなくなると、下の箱が下へ回ります。

サイド

html
<div class="l--withSide -g:15" style="--sideW: 8rem; --mainW: 12rem">
  <div class="l--box -p:15 -bd">
    <p>メイン。幅が 12rem を保てなくなると、下の箱が下へ回ります。</p>
  </div>
  <div class="l--box is--side -p:15 -bd -bgc:base-2">
    <p>サイド</p>
  </div>
</div>

PC ではメインとサイドが横に並び、スマートフォンでは縦に積まれます。

専用の変数#

変数 決めること 初期値
--sideW is--side の要素の幅 auto
--mainW メインに保ちたい最小の幅 max(20rem, 50%)

横に並んだときだけ左右を入れかえる#

-fxd:row-reverse（flex-direction を逆向きにする）を足すと、横並びのときだけ順番が逆になります。

ヒント

これを使うと、横に並んだときはサイドが左、縦に積んだときはサイドが下、という置き方ができます。

表示例

メイン
サイド
html
<div class="l--withSide -fxd:row-reverse -g:15" style="--sideW: 8rem; --mainW: 12rem">
  <div class="l--box -p:15 -bd">メイン</div>
  <div class="l--box is--side -p:15 -bd -bgc:base-2">サイド</div>
</div>

画像と文章を交互に並べる#

画像の枠に is--side を付けると、「画像＋文章」の組が作れます。2つめの組だけ -fxd:row-reverse にすると、広い画面では画像が左・右と交互になり、せまい画面ではどちらも画像が上にそろいます。

表示例

1つめの文章。画像が左です。

2つめの文章。広い画面では画像が右です。

html
<div class="l--stack -g:30">
  <div class="l--withSide -g:20 -ai:center" style="--sideW: 40%; --mainW: 12rem">
    <div class="l--frame is--side -ar:3/2"><img src="/img/sample-landscape.svg" alt=""></div>
    <div class="l--box -px:10"><p>1つめの文章。画像が左です。</p></div>
  </div>
  <div class="l--withSide -fxd:row-reverse -g:20 -ai:center" style="--sideW: 40%; --mainW: 12rem">
    <div class="l--frame is--side -ar:3/2"><img src="/img/sample-landscape.svg" alt=""></div>
    <div class="l--box -px:10"><p>2つめの文章。広い画面では画像が右です。</p></div>
  </div>
</div>

l--withSide のしくみ#

l--withSide が付ける CSS は次のとおりです。

scss
.l--withSide {
  --sideW: auto;
  --mainW: max(20rem, 50%);
  display: flex;
  flex-wrap: wrap;

  > .is--side {
    flex-basis: var(--sideW);
    flex-grow: 1;
    min-width: 0;
  }

  > :not(.is--side) {
    flex-grow: 9999999;
    flex-basis: min(100%, var(--mainW));
    min-width: 0;
  }
}

メインには、とても大きな flex-grow（余った幅をもらう割合）が付いています。そのため、余った幅はほとんどメインへ行き、サイドは --sideW にほぼ近いままです。2つが1行に入りきらなくなると折り返し、折り返したサイドは flex-grow: 1 で横いっぱいに広がります。

l--grid で似た形を作る#

l--withSide は箱の幅で自動で切り替わります。切り替える幅を自分で決めたいときは、l--grid の -gta（マスの配置図）を画面の幅ごとに変えて、似た形を作れます。

表示例

メイン
サイド
html
<div class="l--grid -gta -gta_sm -gtc_sm -g:15" style="--gta: '.' 'side'; --gta_sm: '. side'; --gtc_sm: 1fr 8rem">
  <div class="l--box -p:15 -bd">メイン</div>
  <div class="l--box -p:15 -bd -bgc:base-2 -ga" style="--ga: side">サイド</div>
</div>

'.' は名前の無いマスです。せまい画面ではサイドが下に、広い画面（_sm）では右に来ます。

切り替えを _md にして、広いときはサイドを左に置くこともできます。

html
<div class="l--grid -gta -gta_md -gtc_md -g:20" style="--gta: '.' 'side'; --gta_md: 'side .'; --gtc_md: 10rem 1fr">
  <div class="l--box">メイン</div>
  <div class="l--box -ga" style="--ga: side">サイド</div>
</div>

React・Astro で書く場合#

コンポーネントでは <WithSide> を使います。サイドの要素には isSide を付けます。

Props 出す変数 決めること
sideW --sideW サイドの幅
mainW --mainW メインに保ちたい最小の幅
jsx
import { WithSide, Box } from 'lism-css/react';

<WithSide sideW="12rem" mainW="20rem" g="20">
  <Box>メイン</Box>
  <Box isSide>サイド</Box>
</WithSide>

Astro では lism-css/astro から読み込みます。書き方は Lism コンポーネント（React・Astro） にまとめています。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧