画面の幅で切り替える（レスポンシブ）

レスポンシブとは、見る画面の幅に合わせてレイアウトを変えることです。Lism では、-p_sm のような幅用のクラスと、--p_sm のような幅用の変数を組み合わせて書きます。

どんなときに使う？#

• スマートフォンでは余白を小さく、広い画面では大きくしたいとき
• 狭いときは隠して、広いときだけ表示したいとき
• 列の数や並ぶ向きを、幅によって変えたいとき

使い方#

ふつうの値のクラス（-p:10）に、幅用のクラス（-p_sm）を足します。広いときの値は style 属性の --p_sm に入れます。

<div class="is--container">
  <div class="-p:10 -p_sm -bd -bgc:base-2" style="--p_sm: var(--s40)">
    スマートフォンでは余白が小さく、広い画面では余白が大きくなります。
  </div>
</div>

-p_sm は、広いときに --p を --p_sm の値で置きかえます。--p_sm を書かないと値が入らず、広いときに余白が無くなってしまいます。_sm のクラスには、必ず同じ名前の変数を一緒に書きます。

幅を2段階以上で変えるときは、クラスと変数をそれぞれ足します。

<div class="-p:20 -p_sm -p_md -bd" style="--p_sm: var(--s40); --p_md: var(--s50)">
  <p>Example</p>
</div>

ブレイクポイント#

幅の区切り（ブレイクポイント）として、Lism は次の3つを持っています。

• モバイルファースト（狭い画面の形を先に書き、広くなったら上書きする考え方）です。何も付けない値が、いちばん狭いときの値です
• sm は「スマートフォン用」ではありません。「480px 以上なら効く」という意味です
• 数字は、特定の機種の画面の大きさに合わせたものではありません

たとえば、ふだんは隠して、sm 以上で表示するときは次のように書きます。

<div class="is--container">
  <p class="-d:none -d_sm -p:10 -bd" style="--d_sm: block">広い表示例でだけ見えます</p>
  <p class="-p:10 -bgc:base-2">この行はいつも見えます</p>
</div>

xs と xl#

xs と xl という名前も用意されていますが、最初は幅が 0（使わない）になっていて、CSS が出力されません。使うには lism.config.js で設定する で幅を決めます。

コンテナクエリを使う#

Lism の幅の切り替えは、最初はコンテナクエリで動きます。コンテナクエリは、画面の幅ではなく、外側の箱（コンテナ）の幅で切り替える CSS のしくみです。

コンテナを作るには、外側の要素に is--container（幅の基準になる箱） を付けるのが手軽です。is--container は container-type: inline-size を付けるクラスです。

<div class="is--container">
  <div class="-p:10 -p_sm -bd" style="--p_sm: var(--s30)">中身</div>
</div>

画面の幅で切り替えるメディアクエリにしたいときは、SCSS で設定を変えます（SCSS で設定する）。

切り替えられるプロパティ#

すべてのプロパティを幅で切り替えられるわけではありません。

• 一覧の見方は Property Class の書き方 にあります
• - のプロパティを切り替えたいときは、lism.config.js で設定する か SCSS で設定する で追加します
• または、full.css に替えると、lh・枠線（bd とその向き）・変数だけを出すプロパティを除く、すべての Property Class に幅のクラス（-ta_lg など）が付きます（CSS ファイルの種類）。

CSS の作りの違い#

幅用のクラスの CSS には、2つの作りがあります。

/* ふつう：幅ごとに値を直接上書き */
.-d { display: var(--d) }
@container (min-width: 480px) {
  .-d_sm { display: var(--d_sm) }
}

/* alwaysVar：--p 変数を書きかえる */
.-p { padding: var(--p) }
@container (min-width: 480px) {
  .-p_sm { padding: var(--p); --p: var(--p_sm) !important }
}

2つめの形では、いまの値がいつも --p で読めます。最初からこの形なのは c・bgc・lh・p・m・bdrs の6つです。

React・Astro で書く場合#

コンポーネントでは、幅ごとの値を配列かオブジェクトで渡します。

<Lism p={[20, 40, 50]} />                  // 配列
<Lism p={{ base: 20, sm: 40, md: 50 }} />  // オブジェクト

配列の何番めがどの幅かは、決まっています。

途中の幅を飛ばすときは null を入れます。

<Lism p={[20, null, 50]} />  // base と md だけ

<Lism m={{ base: 10, xs: 20, sm: 40 }} />

TypeScript の入力補完#

TypeScript の型と入力補完が最初に出すのは、base・sm・md・lg の4つです（配列も4つまで）。xl・xs は CSS が出ないので、型にも出ません。

• @lism-css/plugin/vite・@lism-css/plugin/astro の lismCss() や、@lism-css/plugin/next の withLism() を使っている場合：lism.config.js の breakpoints に幅を書けば、lism-env.d.ts が自動で作られ、補完にも出ます
• プラグインを使わない場合：自分の型定義ファイルで BreakpointRegistry を広げます

import 'lism-css';

declare module 'lism-css' {
  interface BreakpointRegistry {
    xl: true; // 配列の5つめと { xl: ... } を使えるようにする
    xs: true; // { xs: ... } を使えるようにする
  }
}

自分の SCSS で同じ幅を使う#

自分で書く .scss でも、Lism のブレイクポイントを使えます。

@use '../path/to/node_modules/lism-css/src/scss/query' as query;

@include query.bp-up('sm') {
  // 480px 以上のときのスタイル
}
@include query.bp-up('md') {
  // 800px 以上のときのスタイル
}

関連するページ#

• Property Class の書き方
• is--container（幅の基準になる箱）
• lism.config.js で設定する
• l--switchColumns（横並びと縦並びを切り替える）