The file write needs permission. I have the full HTML ready — here it is, intended for `site/public/raw/260415_new-css-variable-for-mobile-safe-area-insets.html` (slug matches the repo's `yymmdd_urlSlug` convention, no collision). If you'd rather I write it directly, re-grant write access and I'll save it. ```html 図解 ： モバイル セーフエリア用の新しい CSS 変数（--shopify-safe-area-inset-bottom）
App Bridge / 新CSS変数Action Required

--shopify-safe-area-inset-bottom
モバイルの「フローティング下部バー」に固定要素を隠させない新変数

Shopify モバイルアプリ内で動く埋め込みアプリ向けに、画面下部のオーバーレイ（フローティング下部ナビバーなど）の高さを CSS ピクセルで返す新しいカスタムプロパティ。App Bridge が自動でセットし、固定配置の FAB やスティッキーフッターをバーの上に逃がせる。2026年4月15日から適用。

このページの構成
  1. そもそも何が起きるのか（30秒で理解）
  2. 仕組み図解 ： 変数が解決する「隠れ問題」
  3. 自動で効くこと／自分で対応が必要なこと
  4. 変数の値の振る舞い
  5. 実装方法（コード例）
  6. 影響範囲・適用日・やること
  7. 技術者が押さえるべき5つのポイント
  8. 業務に活かせる3つのユースケース
  9. 提案で使える1行サマリ

1そもそも何が起きるのか

Shopify モバイルアプリには、画面下部に フローティング下部ナビバー などのホスト UI オーバーレイが出ることがある。
埋め込みアプリが画面下部に「固定配置」した要素は、このバーに 隠れてしまう。
新変数 --shopify-safe-area-inset-bottom は、そのオーバーレイの高さ（CSS ピクセル）を返し、固定要素をバーの上に逃がせるようにする。

これまで ： 固定要素が隠れる

下部固定の FAB やスティッキーフッターが、ネイティブのフローティングバーと重なってタップできない／見えない。

これから ： 変数で自動回避

App Bridge がバーの高さを変数にセット。CSS で calc() に足すだけで固定要素がバーの上に乗る。

2仕組み図解 ： 変数が解決する「隠れ問題」

変数を使わない場合 FAB がバーに隠れる var() 変数を使う場合 FAB がバーの上に乗る App Bridge が自動セット オーバーレイ無し → 0px バー表示中 → バーの高さ
セーフエリア・インセットとは ： 画面の縁やシステム UI（ここではフローティング下部バー）と重ならないように確保すべき余白のこと。
この変数は ホスト UI オーバーレイの正確なピクセル値 を返すので、固定要素をその分だけ持ち上げれば重なりを防げる。

3自動で効くこと／自分で対応が必要なこと

自動

<body> への下部パディング

この変数は <body> に自動で下部パディングを追加する。通常スクロールするコンテンツを持つ 大半のアプリは無対応でも フローティングバーに隠れず正しく動く。

要対応

カスタムの「下部固定」要素

スティッキーフッターやフローティングアクションボタン（FAB）など、position:fixed/sticky で下部に置いた独自要素は、自分で変数を CSS に組み込む必要がある。

判定はシンプル ： ビューポート下部に fixed / sticky 要素があるか？ 無ければ無対応で OK、あれば var(--shopify-safe-area-inset-bottom, 0px) を足す。

4変数の値の振る舞い

状況var(--shopify-safe-area-inset-bottom) の値
オーバーレイが無いとき 0px 既定値
モバイルのフローティング下部バーが表示中 バーの高さ（CSS ピクセル）に自動調整
セットする主体 App Bridge が自動でセット（JS の追加実装は不要）
記事に明記されているのは 下部（bottom）インセット のみ。上部・左右のインセット変数の有無や、デスクトップ／Web 埋め込み時の挙動については 記載なし。利用時は必ずフォールバック , 0px を付ける。

5実装方法（コード例）

カスタムの下部固定要素には、既存の bottom 値に変数を足すだけ。記事に示された実装例は次の通り。

.my-floating-button { bottom: calc(16px + var(--shopify-safe-area-inset-bottom, 0px)); }
第2引数の 0px はフォールバック。変数が定義されていない環境（バー非表示時や非対応ホスト）でも、従来の 16px として安全に成立する。

6影響範囲・適用日・やること

1

影響を受けるアプリ

Shopify モバイル上で動き、ビューポート下部に fixed / sticky 要素を使う すべての埋め込みアプリ。

2

適用日

対象アプリすべてに 2026年4月15日 から適用される。

3

やること

大半は対応不要。カスタム下部固定 UI がある場合のみ、CSS に変数を組み込む。

この変更は changelog 上で 「Action Required」 としてタグ付けされている。下部固定 UI を持つアプリの開発者は、適用日までに自アプリを確認すること。

7技術者が押さえるべき5つのポイント

CSS

1. JS 不要、CSS だけで完結

App Bridge が値を自動セットするため、開発者側は var() を CSS に書くだけ。リスナー登録や高さ計測のコードは要らない。

0px 高さ

2. 値は動的（0px ⇄ バー高さ）

オーバーレイ有無で 0px とバー高さを行き来する。メディアクエリや端末判定で自前分岐する必要がない。

3. <body> は自動パディング

通常フローのコンテンツは <body> への自動パディングでカバーされる。対応が要るのは fixed / sticky 要素だけと切り分けられる。

,0px

4. フォールバックを必ず付ける

変数が無い環境でも壊れないよう、第2引数に 0px を渡すのが安全。calc(16px + var(--…, 0px)) の形を徹底。

4/15

5. 適用は強制・期日あり（Action Required）

2026年4月15日に対象アプリへ一律適用される変更で、changelog 上は Action Required 扱い。下部固定 UI を持つアプリは期日までに実機（Shopify モバイル）で重なりを確認すること。詳細は App Home の Environment API ドキュメントを参照。

8業務に活かせる3つのユースケース

USE CASE 1

埋め込み管理アプリの「保存／一括操作」固定ボタンを救済

課題
在庫一括編集やバルク操作系の埋め込みアプリで、下部固定の「保存」FAB が Shopify モバイルのフローティングバーに隠れ、モバイルからタップできない／誤タップが起きる。
打ち手
FAB の bottom を calc(16px + var(--shopify-safe-area-inset-bottom, 0px)) に変更してバーの上へ逃がす。
効果
モバイルでの操作不能クレームを解消。コードは CSS 1 行の修正で済み、回帰リスクが小さい。
技術メモ
スクロールコンテンツ本体は <body> 自動パディングで救われるので、手当ては固定要素だけに限定できる。
合計 / 次へ
USE CASE 2

スティッキー「合計バー」を持つカート系アプリのモバイル最適化

課題
商品リストの下に固定表示する「合計金額＋次へ」スティッキーバーが、ネイティブのフローティングバーと重なって金額や CTA が欠ける。
打ち手
スティッキーフッターの bottom（または padding-bottom）に変数を加算し、常にバーの上に表示。
効果
金額と次アクションが常に見え、モバイルでの離脱・操作迷子を防止。
技術メモ
既定 0px のため、オーバーレイが無い環境では従来レイアウトのまま。条件分岐の追加実装は不要。
共通CSS
USE CASE 3

複数アプリを抱えるベンダーのモバイル余白を一元化

課題
複数の埋め込みアプリを提供しており、各アプリが下部余白を独自にハードコード。適用日（4/15）以降に表示ズレが一斉発生するリスクがある。
打ち手
共通 CSS のユーティリティ／デザイントークンに var(--shopify-safe-area-inset-bottom, 0px) を組み込み、全アプリへ一括配布。
効果
適用日以降のズレを横断的に回避。固定要素のモバイル対応を 1 箇所で保守でき、QA 工数を削減。
技術メモ
フォールバック 0px を必ず併記し、App Bridge 非搭載・旧環境でも破綻しないようにしておく。

9提案で使える1行サマリ

「Shopify モバイルの埋め込みアプリ向けに、下部オーバーレイの高さを返す新 CSS 変数 --shopify-safe-area-inset-bottom が 2026/4/15 から適用。
<body> は自動でパディングされ大半は無対応で OK。FAB やスティッキーフッターなど下部固定要素だけ calc(… + var(--shopify-safe-area-inset-bottom, 0px)) を足せばフローティングバーに隠れない。」
``` Notes on faithfulness to the source: kept strictly to what the changelog states (auto `` padding, `0px` default, App Bridge sets it, the `.my-floating-button` example verbatim, April 15 2026 effective date, Action Required / App Bridge tags). Marked top/side insets and desktop behavior as 「記載なし」 since the article doesn't cover them. No fictional brand names or signatures in the footer. Want me to write this to `site/public/raw/260415_new-css-variable-for-mobile-safe-area-insets.html`? Note that to actually surface it on the site you'd still need the `content/index.json` entry + card-meta/tags extraction — which `npm run ingest` does in one pass. If you prefer, I can leave ingestion to the script and this was just a one-off render.