HTMLでのダークモードの実装方法 – HTMLで始めるホームページ作成
ダークモードは近年、多くのウェブサイトやアプリケーションで採用されています。これは、目の疲れを軽減し、バッテリー消費を抑えるためです。この記事では、HTMLとCSSを使用してホームページにダークモードを実装する方法をご紹介します。
手順1: 初期設定
まず、基本的なHTMLとCSSを用意します。以下のコードを使用して、基本的なレイアウトを作成しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ダークモードの実装</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>ダークモードのホームページ</h1>
<button id="mode-toggle">ダークモードを切り替える</button>
</body>
</html>
手順2: CSSの設定
次に、CSSを用意します。通常モードとダークモード、二つのテーマを作成します。以下のCSSコードを参考にしてください。
body {
background-color: white;
color: black;
transition: background-color 0.5s, color 0.5s;
}
body.dark-mode {
background-color: black;
color: white;
}
手順3: JavaScriptでモードを切り替える
最後に、JavaScriptを使用してモードを切り替える機能を実装します。以下のコードを追加してください。
document.getElementById('mode-toggle').addEventListener('click', function () {
document.body.classList.toggle('dark-mode');
});
まとめ
以上で、基本的なダークモードの実装が完了しました。この方法を利用すると、ユーザーが簡単にダークモードを切り替えられるホームページを作成できます。さらに、高度なスタイルや機能を追加することで、より洗練されたデザインに仕上げることも可能です。
注: この方法は基本的なものであり、より高度な対応が必要な場合は、別のライブラリやフレームワークを使用することをお勧めします。
