Lism CSS
検索

Responsive

レスポンシブ対応

Lism では、-{prop}_{bp}形式のクラスと--{prop}_{bp}形式の変数の組み合わせによって、レスポンシブ対応を行います。

↓
レスポンシブ対応の例

Example

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

CSSプロパティ全てがレスポンシブ対応できるわけではありません。
どのプロパティが標準でブレイクポイント切り替えに対応しているかについては、Property Class 一覧ページを参照してください。

SCSSファイルからカスタマイズを行うことで、プロパティごとにレスポンシブ対応を切り替えることもできます。

配列記法とオブジェクト記法

レスポンシブ値は、配列記法とオブジェクト記法の2通りで指定できます。

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

配列記法の各位置は [base, sm, md, lg, xl] で固定されています（インデックス 0 = base、1 = sm、2 = md、3 = lg、4 = xl）。途中のブレイクポイントを飛ばしたい場合は null を入れてください。

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

xs は配列記法では指定できません。
（位置を固定する設計上、xs を先頭に挿入すると既存の配列の意味が黙ってずれてしまうため。）
xs を使いたい場合はオブジェクト記法を使ってください。

<Lism p={{ base: 20, xs: 10, sm: 30 }} />

プロパティによってCSSの実装の中身が少し異なります

以下の２パターンがあります。

  1. 基本: ブレイクポイントごとに単純に上書きされているプロパティ
  2. 例外: 常に-{prop}変数で値が参照できるようになっているプロパティ
↓
基本系のCSS実装例
.-d {display: var(--d)}
@container (min-width: 480px) {
  .-d_sm {display: var(--d_sm)}
}
@container (min-width: 800px) {
  .-d_md {display: var(--d_md)}
}
↓
例外系のCSS実装例
.-p {padding: var(--p);}
@container (min-width: 480px) {
  .-p_sm {padding: var(--p); --p: var(--p_sm) !important;}
}
@container (min-width: 800px) {
  .-p_md {padding: var(--p); --p: var(--p_md) !important;}
}

例外系のプロパティは、常にCSS変数で値を参照できるようになっており、デフォルトでは非常に限られたプロパティ群のみ(c, bgc, p, m, bdrs)がこのパターンで実装されています。

ソースコードの props.ts で alwaysVar: 1 がセットされているプロパティがこのパターンで出力されています。

コンテナクエリ・メディアクエリ

Lismでは、デフォルトでコンテナクエリを採用しています。

コンテナクエリでは、ブレイクポイントで値を切り替えるには先祖要素でコンテナ要素を定義しておく必要があることに注意してください。

（Lism でコンテナ要素を定義するには、is--containerが便利です。）

また、SCSSファイルからカスタマイズを行うことで、コンテナクエリではなくメディアクエリに切り替えることもできます。

ブレイクポイント

ブレイクポイントはモバイルファーストで定義しており、数値としては480px,800px,1120pxを採用しています。 （特定のデバイスサイズに依存した数値は採用していません。）

サイズ表記デフォルトの設定値
smwidth >= 480px
mdwidth >= 800px
lgwidth >= 1120px

各ブレイクポイントは「そのサイズを超えた時からスタイルが効く」という意味で使います。
たとえば sm は「スマホサイズ専用」ではなく、「sm を超えたサイズで効く」ラベルです。

Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape) ──┬── Laptop and up
             │                       │                        │
          sm:480px                md:800px               lg:1120px

例: -d:none -d_sm + --d_sm: block → デフォルトでは非表示、sm 以上で表示。

レスポンシブ対応の Property Class は、標準で sm・md・lg のすべてのブレイクポイントをサポートしています。
どのプロパティがレスポンシブ対応かは、Property Class の一覧ページの BP 列で確認できます。
レスポンシブ非対応のプロパティでブレイクポイント指定を使いたい場合は、別途SCSSの設定ファイルのカスタマイズが必要です。

xs と xl も予約済みのキーですが、デフォルトではサイズが未定義（無効）のため出力されません。これらを有効化する方法はCustomizeを参照してください。

型補完で提示されるブレイクポイント

TypeScript の型・補完がデフォルトで提示・許可するブレイクポイントキーは base / sm / md / lg です（配列記法も最大4要素）。xl / xs は、デフォルトでは CSS が出力されないため型でも提示しません。

xl / xs を有効化したうえで型でも使いたい場合、@lism-css/plugin/vite / @lism-css/plugin/astro の統合プラグイン（各エントリの lismCss()）を使っているプロジェクトでは、lism.config.js の breakpoints に値を設定するだけで lism-env.d.ts が自動生成され、型補完にも有効化した BP キーが反映されます。手書き拡張は不要です。

プラグインを使わない構成（SCSS 直接利用・他バンドラ等）では、プロジェクト側の型定義ファイルで BreakpointRegistry を手書き拡張してください。

src/lism.d.ts
import 'lism-css';


declare module 'lism-css' {
  interface BreakpointRegistry {
    xl: true; // 配列の5要素目 [.., xl] と { xl: ... } を解禁
    xs: true; // { xs: ... } を解禁（xs は配列記法では書けない）
  }
}

これは型・補完の提示範囲を広げるだけです。実際に CSS を出力するには、別途 lism.config.js の breakpoints でのサイズ定義（Customize）が必要です。

これらのブレイクポイントを自身のプロジェクトで使用する場合、.scssであれば次のようにして利用できます。

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


@include query.bp-up('sm') {
  // Your styles for sm sizes(width >= 480px) ...
}
@include query.bp-up('md') {
  // Your styles for md sizes(width >= 800px) ...
}

© Lism CSS. All rights reserved.

目次