![見出し画像](https://assets.st-note.com/production/uploads/images/67292055/rectangle_large_type_2_d740b5d0afef98f87d0f79a75a99c4f0.jpg?width=1200)
【HTML】スマホのアドレスバーの色をカスタマイズする方法
Qiitaやユニクロのサイトのようにスマホのアドレスバーの色がテーマカラーなどにカスタマイズされたサイトをちらほら見かけます。
このような感じ↓
Qiita URL:https://qiita.com/
ユニクロ URL:https://www.uniqlo.com/jp/ja/
コスモポリタン URL:https://www.cosmopolitan.com/jp/
方法
やり方を調べてみたらめちゃくちゃ簡単でした、、
headタグ内にmetaタグを1行追加するだけ。
<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
この記事が気に入ったらサポートをしてみませんか?