CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法
Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。現在のところ、サポートブラウザはChrome, Firefoxですが、Safari TPに実装されており、次のバージョンでサポート予定となっています。 CSSのlight-dark()関数の基礎知識と実践的な使い方を紹介します。 CSS color-scheme-dependent colors with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSにおけるシステムカラー light-dark()関数の基礎知識 light-dark()関数の使い方 はじめに システムカラーには、現在使用され
ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。 Chrome 123 beta New in Chrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのlight-dark()カラー関数 CSSのdisplay-modeでpicture-in-p
prefers-color-schemeでOS設定のダークモードが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 10日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 10 日目 ダークモード対応って近年人気じゃないですか。自分はまああんまり興味ないんですが、なんか好きですよねみんな。 prefers-color-scheme を使うとその端末全体の設定を判定できるので、ダークモード、ライトモードの選択肢に「端末の設定に合わせる」を追加することもできます。 例 デモ：https://codepen.io/ginpei/pen/vYbPQBP :root { /* デフォルトでライトモード（あるいはフォールバック） */ --theme--background-color: #f0f0f0; --theme--color: #333; /* 端末がダークモードのとき */ @media (prefers-color-scheme: dark) { --theme--background-
CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode Color Switching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は？ light-dark()関数のブラウザサポート light-dark
これは便利すぎる！ Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」が神アップデートされました
WebページのURLを入力し、1クリックするだけで、そのページの編集可能なFigmaファイルに変換できる無料プラグインを紹介します。 去年紹介しましたが、先日ver.2にアップデートされました！ 一括インポート、マルチビューポート、マルチテーマ、テキストとカラーのスタイル生成ができるようになり、さらに便利になりました。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma デスクトップとスマホも同時に！ 1クリックでWebページをFigmaに変換 html.to.designの利用方法 html.to.designの使い方 1クリックでWebページをFigmaに変換 html.to.designは、URLを入力して1ク
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
ダークモード時の画像の扱い方
2023年2月7日 CSS, Webサイト制作 以前から個人的にダークモードの対応を推奨しています。基本の書き方は過去記事「Webサイトをダークモードに対応させよう」を読んでもらうとして、今回は画像まわりのダークモード実装方法を中心に紹介します！ ↑私が10年以上利用している会計ソフト！ 画像の明度や彩度を落とす 明るい背景色の場合、画像は鮮やかで明るい色合いが目に止まりやすいですよね。しかしダークモードでは、まわりが暗くなるので画像だけ派手に眩しく見えてしまいます。そこで、CSSの filter を使って、ダークモードのときは明度や彩度を調整するといいでしょう。 実装するには filter プロパティーに、明度は brightness() 、彩度は saturate() を指定します。カッコの中にパーセントで割合を書けば完了。明度・彩度両方指定するなら以下のように値を続けて書きます。 @
CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style
Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さまざまなメディアクエリのコードをコピペで簡単に利用できます。スニペットに登録しておくと、便利です。
このダークテーマは目に優しく、コードも見やすい！ VS Codeのエレガントなモノクロームのテーマファイル -Sequoia
ダークテーマは好きだけど、#000のブラックだったり、テキストが派手なカラーだったりすると、目が疲れませんか？ 背景のブラックはほんの少しだけブルーがかった夜空のように落ち着いた色合いで、グレーの濃淡だけのMonochromeと淡いカラーで構成されたMoonlightの2種類の配色が用意された、VS Code用のテーマファイルを紹介します。
ダークモードに対応していないWebサイトを無理やりダークモードにする拡張
2022年5月24日 Webデザイン, 便利ツール こんにちは、ダークモード推奨派のManaです。以前からダークモードの布教活動を細々としておりますが、まだまだダークモードに対応していないWebサイトもたくさんあります。今回はダークモードに対応していないWebサイトを強制的にダークモードにしちゃう拡張を紹介します。 ↑私が10年以上利用している会計ソフト！ 前々から夜間見えづらいって事は認識していましたが、どうやら光の見え方も多くの方とは違うと最近判明…！みんなこんなシャキーンって感じの光の線は見えないんですかね…？夜景なんて光るウニの集合体ですよw ちなみにスターバースト現象というらしい ←おそらく多くの人が見えるビュー Manaビュー→ pic.twitter.com/bfxZAK7FYE — Mana (@chibimana) September 8, 2020 以前『Webサイトを
Figma Config 2022で大幅アップデート 新機能を全てまとめてみた
チームでの共同デザインプロジェクトに最適なツールとして呼び声の高い、デザインアプリ Figma（フィグマ）。 はじめてでも迷わない簡単なFigmaの使いかたはもちろん、用途に合わせて自分好みにアプリの使いやすさを便利プラグインも人気の理由でしょう。 先日、Figmaのアップデートイベント Config 2022 が開催され、数多くの新機能が追加、発表されました。これまでFigmaによるデザインで気になっていた多くの点を解消してくれる大型アップデート。 今回は、Figmaに追加された新機能について詳しくみていきましょう。 コンテンツ目次 1. ダークモードの導入 2. より使いやすくなった Auto Layout 3. コンポーネントのプロパティ 4. 他のユーザーに追尾してもらうスポットライト機能 5. Figjam ウィジェットの追加 6. 可変フォントが利用可能に 7. ポヨンとしたバ
dashblocks - 管理画面構築コンポーネント集
管理画面はついおざなりになりがちです。ユーザ向けの画面は格好良いのに、管理者が使う画面は適当なものということは良くあります。適当な画面では可能な操作も限定的で、ミスも起きがちです。 そこで使ってみたいのがdashblocksです。データ解析に特化した管理画面です。 dashblocksの使い方 管理画面のデモテンプレートです。 多種多様なグラフが利用できます。 APIの詳細が分かります。 リアルタイムログ的な表示。 テーブル。 Vueのテーブルを使ったデモ表示。 Chart.jsとの組み合わせ。 Dygraphsとの組み合わせ。 メニューとタイポグラフィ。 dashblocksは多種多様なコンポーネントを使い、データの可視化をサポートします。テーマもライト、ダークの2つに対応しており、多様な管理画面に対応できそうです。管理画面や解析結果画面などで利用できそうです。 dashblocksはV
ウェブサイトに演出は不要!? ユーザー設定にレスポンシブ対応できる新しいCSS - ICS MEDIA
画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法は、画面サイズだけでなくユーザー設定に対して挙動やスタイルを変更させることができ、ユーザービリティーやアクセシビリティーの向上に役立ちます。 本記事では事例とあわせて最近のレスポンシブ手法を紹介します。 この記事で紹介すること ダークモード対応 モーションの無効化設定 iOSのフォントサイズ変更 ダークモード対応 OSには外観モードの設定項目があります。Windows 10やmacOS、iOS、Androidのいずれもライトモードとダークモードの切り替え機能が提供されています。ライトモード・ダー
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第3弾となる今回は、フォントやテキストに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Three. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フォントによって伝わり方が変わる 2. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 3. ダークで見やすくするためにはフォントを重くする 4. 書体の選択によって、感情表現を生み出すことができる 5. 複数の書体を使用する場合は、最大2種類のルールを守る 6. すべて大文字で読みやすくするには、文字間隔
ダークモード用CSSの書き方とエミュレートでの確認方法（ひとり DevTools Advent Calendar 2020 – 09日目） | Ginpen.com
9 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 GitHub がダークモード（ダークテーマ）対応したそうです。 echo "hello, darkness" #GitHubUniverse #Keynote https://t.co/9gQRFt3aqQ pic.twitter.com/HEotvXVJ7R — GitHub (@github) December 8, 2020 パブリックベータとして誰でも利用可能とのこと。 Chrome DevTools を使ってシステム側のテーマ変更をエミュレートすることができます。 ダークモード対応 CSS を書く @media (prefers-color-scheme: dark) でダークモード用のテーマになります。 CodePen でデモ @media (prefers-color-
たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法
「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。 Webサイトやスマホアプリのさまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSSを紹介します。 すでに制作済みのWebサイトやスマホアプリをダークモード対応にしたい時だけでなく、ユーザースタイルシートとして利用することもできます。 One line - Dark Mode using CSS by Akhil Arjun 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 制作済みのサイト・アプリをダークモードに対応させる方法 CSSの解説 制作済みのサイト・アプリをダークモードに対応させる方法 ここで紹介するのは、すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる超簡単な方法です。 前置き
WebページやスマホアプリのUIデザイン・モックアップが簡単に！Adobe XDのプラグイン「Spectrum」が便利
WebページやスマホアプリのUIデザインで、一貫したコンポーネント・テーマ・カラー・タイポグラフィ・アイコンなどを作成・管理できるAdobe XDの無料プラグイン「Spectrum」を設計したAdobeのデザインシステム・デザインマネージャーの解説記事を紹介します。 Spectrum for Adobe XD: Adobe’s design language in its experience design tool by Jacob Frank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Spectrumの機能と開発した経緯 Spectrumを使用した結果 Spectrumのインストール方法 Spectrumの今後の機能 ご意見をお聞かせください はじめに アドビのデザインシステムであるSpectrumは、5年前
SVGファビコンのカラーをダークモード時にCSSで変更できるの知ってた？
ダークモードに対応している時に、SVGファビコンのカラーをCSSで変更するテクニックを紹介します。 当ブログはダークモードに対応していませんが、ダークモードの周りもいろいろ充実してきましたね。 画像: ツイートより 元ネタは、下記ツイートからです。 💡 Change the color of your favicon when dark mode is enabled.#codyhousenugget pic.twitter.com/Hie9Pgt9MQ — CodyHouse (@CodyWebHouse) July 7, 2020 ファビコンをSVG画像にする利点は、スクリーンの解像度を気にすることなく、1つのファイルでファビコンを提供できることです。対応ブラウザはIEを除く、すべての主要なブラウザでサポートされています。
Dark Reader - 任意のWebサイトをダークモードで表示
ダークモードに対応したサイトが増えてきています。多くは自動的に設定されたり、設定画面を使って自分で切り替えるようになっています。しかし、まだまだ未対応のサイトが多いのも事実です。 そこで使ってみたいのがDark Readerです。任意のWebサイトをダークモード対応にします。 Dark Readerの使い方 MOONGIFTを表示した例です。 輝度やコントラストを変更できます。 設定メニューです。 Googleの検索結果。 Wikipedia。 Dark Readerを使えばどんなWebサイトでもダークモードとして目に優しい表示にできます。開発時にはエディタやターミナルを暗くしているのに、Webブラウザだけ明るいと目が辛いです。Dark Readerを使えば目に優しく、可読性も上がるでしょう。 Dark ReaderはGoogle Chrome/Firefox/Safari/Edge用、T
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルで見やすいレイアウトをclass不要で作れるclasslessなCSSフレームワーク・「new.css」
