ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ

2024/03/26 92 users プロパティ カーニング 垂直方向 ダークモード 中央

今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカ... 続きを読む

CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しいプロパティ「light-dark()」が便利すぎる！

2023/10/31 11 users light-dark CCC CSS ダークモード 関数

CSS Color Module Level 5に追加された新しいプロパティlight-dark()関数を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark M... 続きを読む

UIデザインにも最適！ アナログ印刷のインクと紙からインスピレーションを得たカラースキーム -Flexoki

2023/10/18 6 users 読み書き エディタ 温かみ スクリーン 色合い

デジタルのスクリーンで文章やコードの読み書きのためにデザインされた、アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキームを紹介します。 WebサイトやスマホアプリのUIデザインに使用したり、VS Codeなどのエディタに使用したり、ライトモードでもダークモードでも読みやすさと... 続きを読む

「X（Twitter)はダークモードだけに」　イーロン・マスク氏が表明→後に撤回　ただしダークブルーモードは削除

2023/07/28 18 users 旧twitter Twitter オーナー 方針 白背景

イーロン・マスク氏が、X（旧Twitter）のUIについて、白背景の「ライトモード」をなくし、黒背景の「ダークモード」だけにする方針を示した。結局は撤回したが、青黒いUIにする「ダークブルーモード」は削除するという。 X（旧Twitter）のオーナーであるイーロン・マスク氏は7月26日（現地時間）、同サービスのUIについ... 続きを読む

「X」は近いうちにダークモードだけになるとイーロン・マスクが語る、ユーザーからはやめてくれとの悲鳴が殺到

2023/07/28 183 users www.theverge 旧twitter 基調 イーロン

X(旧Twitter)のCTO兼任取締役であるイーロン・マスク氏が、Xのデフォルトのデザインを黒を基調としたダークモードに変更し、背景が白い従来のライトモードを廃止する考えを明かしました。 Elon Musk says Twitter will soon only offer dark mode because it’s ‘better in every way’ - The Verge https://www.theverge.... 続きを読む

Webサイトのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材 -UI Skeleton Gallery

2023/06/21 8 users モックアップ SVG ワイヤーフレーム figma セクション

Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます... 続きを読む

UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方

2023/02/21 250 users グレースケール ダークモード コントラスト メカニズム カラー

ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを... 続きを読む

CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style

2022/08/30 15 users アクセシビリティ Media デバイス さま CSS

Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さま...記事の続きを読む 続きを読む

ダークモードにしても電池はそれほど節約できない〜パーデュー大学調査 - iPhone Mania

2021/08/01 6 users iPhone Mania ディスプレイ バッテリー 特定 電池

スマートフォンのディスプレイを「ダークモード」に設定すると電力消費量が減り、バッテリーが長持ちするというのが一般的な認識です。 しかし米パーデュー大学の調査から、ダークモードにして大幅に電力消費量が減るのは特定の場合に限定され、日常的な使い方ではライトモードからダークモードに変えても、電池の持ちは... 続きを読む

最近のWebページでよく使用されているUIコンポーネントをコピペですぐに実装できるコードのまとめ -tailblocks | コリス

2020/06/03 22 users コリス ブッダ UIコンポーネント ヘッダ コピペ

Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。 それぞれのUIコンポーネントにはさまざまなバリエーションもあり、スマホ・タブレット・デスクトップでの表示、ライトモード・... 続きを読む

VS Codeの見やすいテーマが登場！GitHubのデザインでコードも快適に -GitHub VS Code theme | コリス

2020/05/13 31 users GitHub コリス 配色 ダークモード VS Code

VS Code用のGitHubのテーマを待っていた人も多いと思います。 GitHub Plus Themeも人気ですが、ここで紹介するGitHub VS Code themeは、ライトモード・ダークモードの配色も備えてい...記事の続きを読む 続きを読む

ダークモードの検証が簡単にできるようになった！Chrome 79 デベロッパーツールの新機能 | コリス

2020/02/05 11 users デベロッパーツール コリス ダークモード モード 検証

ダークモード対応のサイトを制作する時に面倒なのが、ダークモードとライトモードでの表示確認方法です。OSでモードを切り替えたり、2つ用意するのは面倒です。 Chrome 79 デベロッパーツールの新機能で、簡単にダークモードの検証ができるようになりました。下記のようにOS（ブラウザ）がライトモードでも、Webページを... 続きを読む

Webでダークモードに対応する | written by @axross

2019/08/26 49 users ダークモード web iOS MacOS 紺色

このウェブサイトをダークモードに対応させました。ライトモード (通常) では白い背景ですが、ダークモードで見ると紺色の背景になっているのが確認できると思います。 LightDark ダークモードはすでに主要なすべてのOS (Windows、Android、iOS、macOS) にあり、その設定はCSSのメディアクエリ prefers-color-scheme に... 続きを読む