Workship MAGAZINE書籍化第3弾!#ADHDフリーランス の新常識 他
- 隔週月曜更新!フリーランス・副業ニュース
サイトの配色は、読みやすいWebサイトをつくるうえで非常に重要です。たとえば、視覚に障がいをもつユーザーのなかには、通常のライトモードではなくダークモードのほうが読みやすいと感じる人もいるでしょう。
また、最近はユーザーのシステム環境も考慮されています。ユーザーのOSがダークモードなのか、ライトモードなのかを検知し、適切なスタイルを提供するWebサイトも登場しました。
しかし、ユーザーに特定のモードだけを強制するのはリスキーです。今回は、ダークモードとライトモードをオシャレに切り替えられる、8つのユニークなCSSとJavaScriptのコードスニペットを紹介します。
(本記事で紹介するコードスニペットは、すべてCodepenに掲載されいるものです)
目次
このスニペットの特徴は、3つのカラーモードと美しいデザインです。各モードの移行はスムーズで違和感なく変更できます。メニューにはトグルスイッチのようなスタイルのHTMLラジオボタンを使用しています。シンプルですが、おしゃれで使いやすいボタンですね。
See the Pen Light / Dark / Black Theme by Håvard Brynjulfsen (@havardob) on CodePen.
SASSとは、CSSの拡張言語の一つです。CSSにはない動作を実現できることが特徴で、今回はそのSASSを使って作成したトグルボタンをご紹介します。シンプルなボタンにJavaScriptを使い、ページのHTMLタグにdata-theme属性を追加。SASSがその属性の値を探し、それに応じてコンテンツを装飾します。
See the Pen Easy Dark Mode with SASS by Kaio Almeida (@KaioRocha) on CodePen.
SVG画像とアニメーションを使い、昼と夜の切り替えをユニークに表現しているスニペット。コントラストモードの切り替えをコンセプトに、デザインで遊び心をもたせています。ただし、初見の人が戸惑ってしまう可能性もあるので、文字装飾などを活用して使い勝手を改善してもいいかもしれません。
See the Pen Light / Dark Mode by Álex (@lerida) on CodePen.
今回紹介するスニペットにはJavaScriptを使ったものが多いですが、CSSだけでつくられたのがこのボタンです。見た目にこだわるだけでなく、HTMLフォームを活用して使いやすいモード切り替え機能を実装しています。
See the Pen CSS Theme Switcher by Michelle Barker (@michellebarker) on CodePen.
ページモードが変化すると、アイコンが変化するスニペット。ライトモードで描かれているデザインが、ダークモードではネオンカラーに変化します。遊び心が満載なのはもちろん、モードの切り替えをわかりやすく表現できています。
See the Pen GitHub Dark Mode Toggle by Chintu Yadav Sara (@chintuyadav) on CodePen.
シンプルな切り替え機能が必要なら、このボタンがおすすめです。派手なアイコンや遊び心のあるアニメーションはなく、クリックを通じたCSSによるスムーズなモード切り替えができるだけの、シンプルなボタンです。ただし、ユーザーの好みのモードをローカル環境に保存する、便利なJavaScriptも提供しています。
See the Pen Persistent Dark Mode by Brian Haferkamp (@brianhaferkamp) on CodePen.
JavaScriptフレームワークであるVueのコンポーネントを使えば、シンプルなチェックボックスを実装してモード切り替えができます。CSSを使ってアレンジすれば、さらにデザインを洗練させられるはずです。
See the Pen Basic Vue Reactivity by CodePen (@codepen) on CodePen.
モードの切り替えに一工夫加えたいなら、このスニペットが参考になるでしょう。使いやすさを意識し、電球の画像はHTMLのボタン要素内に配置されています。アニメーションにはCSSを使用しており、ポートフォリオやブログにおすすめです。
See the Pen Dark Mode by Airen (@airen) on CodePen.
Webサイトにモードの切り替え機能を実装すると、ユーザーが自分好みのモードを選べるだけでなく、コンテンツの可読性も高められます。
今回紹介した例からもわかるように、JavaScriptを使わずに、CSSのみでも魅力的な切り替えボタンが実装可能です。ぜひ作品からインスピレーションを得て、オリジナルの切り替えボタンを作ってみてください。
(執筆:Eric Karkovack 翻訳:Asuka Nakajima 編集:齊藤颯人 提供:speckyboy)
CodePenとは?使い方/埋め込み方法/ライセンス表記を画像付きで解説
Workship MAGAZINE
最早トレンドではない。「ダークモード」を作成する際に気をつけたい6つのポイント
Workship MAGAZINE