なぜダークモードに対応させる必要があるのか？
最近、スマートフォンやPCを使う時間が増えたことで、ダークモードへの関心が高まっています。ダークモードは、画面の背景を暗くして文字やコンテンツを目立たせる方法で、目に優しく、特に夜や暗い場所で使うときに効果的です。
ダークモードにすると、ユーザー体験がぐっと良くなります。自分好みの表示モードを選べると、サイトへの満足度が上がり、また見に来たくなるかもしれません。さらに、最新のトレンドに対応しているサイトだと感じてもらえるので、信頼度もアップします。
また、ダークモードはバッテリーの節約にも役立ちます。特にOLEDディスプレイのデバイスでは、暗い画面が電力消費を抑えてくれるので、バッテリーの持ちが良くなります。こうした理由から、今、多くのサイトやアプリがダークモードを取り入れているんですね。では、ホームページをダークモードに対応させる方法を詳しく見ていきましょう。
ダークモードに対応させるための方法
ホームページをダークモードにするには、主にCSSとJavaScriptを使って設定します。これから、CSSとJavaScriptを使った簡単な方法を紹介します。
CSSの変更
ダークモードに対応させるには、まずCSSでスタイルを変更します。ダークモード用のスタイルを定義して、ユーザーがダークモードを選んだときに自動的に適用されるように設定します。
完成イメージ
基本的なCSS設定
ダークモード用のスタイルは、prefers-color-schemeメディアクエリを使って設定します。このメディアクエリは、ユーザーのデバイス設定に合わせてスタイルを適用してくれます。
/* ダークモード */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
a {
color: #bb86fc;
}
header, footer {
background-color: #1e1e1e;
}
img {
filter: brightness(0.8);
}
}
/* ライトモード */
@media (prefers-color-scheme: light) {
body {
background-color: #ffffff;
color: #000000;
}
a {
color: #1e88e5;
}
header, footer {
background-color: #f8f9fa;
}
}ダークモード用とライトモード用のスタイルを分けて設定することで、ユーザーが設定したモードに応じて、適切なスタイルが適用されます。
特定の要素に対するスタイルの調整
ダークモードでは、特定の要素が見づらくなることがあります。たとえば、背景が白いロゴなどです。これらの要素に対して、CSSを使って調整します。
@media (prefers-color-scheme: dark) {
img.logo {
filter: invert(1);
}
}この例では、img.logoクラスを持つ画像にinvertフィルタをかけて、白い部分が黒くなるようにしています。これでダークモードでも見やすくなります。
ダークモード用のカスタムスタイルシート
大規模なサイトでは、ダークモード用のスタイルシートを別途作成するのが便利です。これで、スタイルの管理がしやすくなります。
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="dark-mode.css" media="(prefers-color-scheme: dark)">ダークモード用のスタイルシートを別に読み込むことで、簡単にスタイルを切り替えられます。
JavaScriptの変更
JavaScriptを使って、ダークモードの切り替えをもっと動的にする方法もあります。ボタンをクリックしてダークモードとライトモードを切り替えることができるので、柔軟に対応できます。
完成イメージ
ダークモードのトグルボタンを追加
ダークモードの切り替えボタンを作成します。
<button id="dark-mode-toggle">ダークモード切り替え</button>JavaScriptでスタイルを変更
const toggleButton = document.getElementById('dark-mode-toggle');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});このコードでは、dark-modeクラスをbodyに追加したり削除したりして、スタイルを切り替えています。
CSSでダークモード用のスタイルを定義
JavaScriptでの切り替えに対応するために、CSSでdark-modeクラスを設定します。
/* ダークモード */
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
body.dark-mode a {
color: #bb86fc;
}
body.dark-mode header, body.dark-mode footer {
background-color: #1e1e1e;
}
body.dark-mode img {
filter: brightness(0.8);
}
/* ライトモード */
body {
background-color: #ffffff;
color: #000000;
}
a {
color: #1e88e5;
}
header, footer {
background-color: #f8f9fa;
}JavaScriptとCSSを組み合わせてダークモードの切り替えを実現することで、ユーザーに使いやすいインターフェースを提供できます。
ユーザーの設定を保存
ユーザーが選んだダークモードの設定をローカルストレージに保存し、次回以降に自動的に適用します。
const toggleButton = document.getElementById('dark-mode-toggle');
const currentMode = localStorage.getItem('darkMode') || 'light';
document.body.classList.toggle('dark-mode', currentMode === 'dark');
toggleButton.addEventListener('click', () => {
const isDarkMode = document.body.classList.toggle('dark-mode');
localStorage.setItem('darkMode', isDarkMode ? 'dark' : 'light');
});このスクリプトでは、ダークモードを選んだ場合、その設定をローカルストレージに保存し、次回の訪問時に自動で適用されるようにします。
まとめ
ホームページをダークモードに対応させると、ユーザー体験が向上し、バッテリーの消費が抑えられたり、視認性が良くなったりと、さまざまなメリットがあります。CSSを使って基本的なスタイルを設定し、JavaScriptで動的な切り替えを実現することで、簡単にダークモード対応のウェブサイトを作ることができます。ダークモードの導入を検討する際には、ユーザーのニーズやデバイスの特性を考慮して、最適な方法を選びましょう。
弊社では、ダークモードに対応したホームページの制作も承っております。お気軽にお問い合わせください。
コメント