CSS ダークモードに対応する

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

こんにちは。ましじめの田村です。

OSのカラーテーマを設定出来るようになり、アプリなど「ダークモード」が増えてきました。
今後Webサイトも「ダークモード」に対応したいという要望が出てきそうです。

Webサイトはメディアクエリを使ってCSSを設定すると選択したカラーテーマに合わせてスタイルを変更することが可能です。

対応ブラウザはIE、Edgeは未対応ですが
Can I use... を見るところ次期Chromium版のEdgeからは「ダークモード」に対応できてるようです。

最新ブラウザをターゲットとするのであれば使用出来そうです。
また、ダークモードに対応したい場合は次の記述で実現可能です。

@media (prefers-color-scheme:light) {
/* ライトモード用のスタイル */
}
@media (prefers-color-scheme:dark) {
/* ダークモード用のスタイル */
}

CSSでダークモードに対応する場合参考にしてみてください。
以上「CSS ダークモードに対応する」でした。


関連するタグ

CSS

全 1 件中 1 〜 1 件目を表示

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから