|WEB昨今、WindowsやMacといったOSからアプリケーション、webサイトなどなど何かとダークモードに対応してきています。普段からPCやタブレット、スマートフォンといったコンピュータに触れる機会が多くなり、デザインの配色によっては長時間利用していると、目に負担がかかり疲れを感じるようになります。そこで最近、負担がかかりにくいダークモード設定へ切り替えることができる仕様が採用されはじめました。目に優しいバッテリー消費量を低減といった2点でしょう。夜間は黒を基調とした配色のデザインにすることで、目への負担を軽減することができます。バッテリー消費については、有機ELディスプレイの機種は、発光形式の違いで黒い部分は発光しないのでバッテリーが長持ちします。iPhoneX以降、iPhoneXs他、ソニーのXperiaのいくつかの機種が有機ELを採用しています。ちなみにiPhoneXRは液晶ディスプレイになります。webサイトやwebアプリケーションはこれからもっともっと優しさを追求していくことになるでしょう。ここでは、webサイトをダークモードに対応させる方法をご紹介します。CSS3のメディアクエリの特性「prefers-color-scheme」を利用して、端末のダークモード設定を判断していきます。76以降でサポートしています。以下、サポート状況です。usehttps://caniuse.com/#search=prefers-color-scheme今後もサポートするブラウザが増えてくるでしょう。実際にどんな感じなのか、皆さんも試しに簡単なサンプルコードを書いてみてください。MODE</h1></main>CSSでメディアクエリを利用してダークモードを判断していきます。}}サンプルコードでは、通常の配色(ライトモード)とダークモードとでテキストの色と背景色を変更しています。メディアクエリの特性「prefers-color-scheme」で「dark」とすることで、ダークモード設定を判別します。その中でダークモードの場合のデザインのCSSを記述していきます。CSSの優先順位を忘れずに、通常のデザインの後に記述してください。セレクタの指定も優先順位を気をつけて。light」とすることで、ライトモードに対応させることもできます。Variables(カスタムプロパティ)」を使っていく場合ですと、以下のようなコードになります。0;}こちらのほうが汎用性が高そうですね。今回は極端にダークモードでは黒と白を使いましたが、暗めの配色のデザインを採用し、コンテンツやボタンなどはわかりやすいデザインにするなど、ダークモードでもそれなりに良いデザインを構築していってもらえばと思います。データベースに接続するPREV:Amazonプライム・ビデオをタブレット端末やスマートフォンにダウンロードしてオフラインで視聴するNEXT:Windowsでフォルダを隠しフォルダとして非表示にする方法PROFILEAkira元ボクサー、元トラックドライバーと不思議な経歴を持つ。納豆はご飯と分けて食べるタイプ。