📱

Safari（iOS26）で背景を上下2色に分割するテクニック

に公開
iOS 26
tech

TimelabでカレンダーサービスLynxを開発している市村（@bassyyJP）です。

今回はWebサイトのレスポンシブ対応の中でも特にモバイル端末での画面表示の工夫に焦点を当て、フロントエンド実装について取り上げます。

概要

Safari でステータスバーやツールバーを含めて画面背景を上下で2色に分割する方法を紹介します。
特に iOS 26 では仕様が大きく変わり従来の方法がそのまま使えず苦労したので、その対応方法もまとめました。
今回は例として

  • 画面上部：白
  • 画面下部：黒

という 2 色構成を実現します。
ニッチなUI調整ではありますが、統一すると画面全体が “ちゃんと作り込まれている” 印象になるのでおすすめです。


スクロールしても背景色を2色に統一させたい

従来の方法（iOS26以前）

theme-colorでステータスバーの色を変更する

Safari を含む多くのブラウザでは、 <head> に <meta name="theme-color" content="#color" > のように書くことで、ステータスバーやツールバーの色を設定できます。
ただし一部のブラウザでは未対応のため、ターゲットブラウザで動作するか事前の確認が必要です。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="theme-color" content="#4285f4" />
    <title>My App</title>
  </head>

  <body>
  </body>
</html>

https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/meta/name/theme-color

上下で 2 色に分けたい場合の問題

theme-color を設定すれば楽勝！と思いきや、 theme-color は 1 色しか指定できないため、今回のような「上は白、下は黒」という構成には使えません。

ステータスバーは基本的に body の背景色が反映されるため、ステータスバーとツールバーそれぞれに異なる背景色を割り当てる工夫が必要です。

iOS 26 での対応

固定ブロックを置いて透過を諦める

iOS 26 では現状 theme-color が適用されていません。
そのため、上下どちらかに固定配置のブロックを置き、任意の背景色で上書きする方法が最も確実です。
今回は上部に height: 100px の固定ブロックを置く（＝タブバーの透過は諦める）という方法を採用しました。
これによりスクロールしても背景色が途切れず、自然な見た目になります。

index.html
  <body>
    <div class="wrapper">
        <div class="background-layer-white"></div>
        <div class="white-box"></div>
        <div class="black-box"></div>
    </div>
  </body>
index.css
html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: black;
}

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.background-layer-white {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100px;
    background-color: white;
}

.white-box {
    flex-grow: 1;
    background-color: white;
}

.black-box {
    flex-grow: 1;
    background-color: black;
}

viewportの仕様

iOS 26 では viewport の高さが変わり、従来と同じ感覚でレイアウトすると隙間が生まれるようになりました。

例えばコンテンツ表示範囲を height: 100dvh として画像を置いてみます。
iOS 26 以前はタブバー直前までが表示範囲でしたが、 iOS 26 では dvh を指定してもタブバーよりも上で止まり、バーの裏まで伸びてくれません。

原因としては、iOS 26 ではバー要素を floating デザインにした影響だと考えられます。
スクロールするとタブバーが半透明になり流体っぽく動くため、その境界が滲まないよう余白が設けられているのかもしれません。（にしても面倒ですが…）

上部に固定ブロックを入れるとタブバーのリキッドグラスは活かしたままスクロールしても背景色が伸びてくれるようになります。

まとめ

  • Safari（iOS26） で上下 2 色を実現するには
    → body の背景色＋固定ブロックの組み合わせが最も安定
  • iOS 26 は viewport 高さが変更されたのでレイアウト崩れに注意

参考

https://x.com/sho4771k/status/1970292030891819194?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1970292030891819194|twgr^1336982b053850d8ec012c83a5ce0cc701f94eb0|twcon^s1_&ref_url=https%3A%2F%2Fwww.bn-x.net%2Farchives%2Ftechnology%2F2025%2F09%2F961%2F

https://zenn.dev/tsunagu/articles/cc8f93dfe12759

https://qiita.com/kskwtnk/items/df4d6b15f6df7026cfeb

https://qiita.com/tronicboy/items/05779e25c9eb9568e497

Discussion