【HTML】スマホのアドレスバーの色をカスタマイズする方法

2021年12月8日 07:53

Qiitaやユニクロのサイトのようにスマホのアドレスバーの色がテーマカラーなどにカスタマイズされたサイトをちらほら見かけます。

このような感じ↓

Qiita URL:https://qiita.com/

ユニクロ URL:https://www.uniqlo.com/jp/ja/

コスモポリタン URL:https://www.cosmopolitan.com/jp/

方法

やり方を調べてみたらめちゃくちゃ簡単でした、、
headタグ内にmetaタグを１行追加するだけ。

<meta name="theme-color" content="#dc143c">

Android版 Chrome、MacOS / iOS版 Safariでは2021年9月にリリースされたSafari 15からサポートされるようになりました。
※Android版 Chromeのダークモードでは無効になります。
（2021年12月8日現在）

▼theme-color Meta Tagのサポート状況 | Can I use
https://caniuse.com/mdn-css_properties_aspect-ratio

1行の簡単な追加だけで、スマホブラウザでウェブサイトを目立たせることができるので、他のサイトと差がつきますね。ウェブサイトのファビコンを設定するように、今後、ベーシックな設定になっていくかもしれないと感じました。

こちらの記事を参考にさせていただきました。
▼theme-color | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta/name/theme-color