これは便利すぎる！ 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ク
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。 Webサイトやスマホアプリのさまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSSを紹介します。 すでに制作済みのWebサイトやスマホアプリをダークモード対応にしたい時だけでなく、ユーザースタイルシートとして利用することもできます。 One line - Dark Mode using CSS by Akhil Arjun 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 制作済みのサイト・アプリをダークモードに対応させる方法 CSSの解説 制作済みのサイト・アプリをダークモードに対応させる方法 ここで紹介するのは、すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる超簡単な方法です。 前置き
SVG形式のファビコンを設置しよう
2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと
このダークテーマは目に優しく、コードも見やすい！ VS Codeのエレガントなモノクロームのテーマファイル -Sequoia
ダークテーマは好きだけど、#000のブラックだったり、テキストが派手なカラーだったりすると、目が疲れませんか？ 背景のブラックはほんの少しだけブルーがかった夜空のように落ち着いた色合いで、グレーの濃淡だけのMonochromeと淡いカラーで構成されたMoonlightの2種類の配色が用意された、VS Code用のテーマファイルを紹介します。
2021年12月14日 CSS, Webサイト制作 BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読み込む記述を追加するだけでOK！学習コストもかからずとっても便利です。日本語版のデモも用意したので、どんな表示になるか確認してみてください。 ↑私が10年以上利用している会計ソフト！ デモはちょっと長いので、デモパネルをスクロールするか、パネル右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてくださいね！ Water.css GitHub｜デモ クラスなしCSSフレームワークとして最初に目立っていたのがこのWater.css。ダー
デザイナーに、構造化が求められる要件がここ数年で急増しています。また、スマホやデスクトップの両方のOSにダークモードが導入されたことで、新たなデザインの領域を増やす必要もあります。 今までのカラーシステムと一貫性を保ちつつ、ダークモードの新しい配色を簡単に適用できるようにするカラーシステムを作成する方法を紹介します。 Dark Mode — Working with Color Systems by Søren Clausen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 色に役割を割り当てる カテゴリ 1: 色合い カテゴリ 2: 背景 カテゴリ 3: 前景要素 その他の場合 色の割り当て ダークモードへの対応 Sketch用のカラーシステム 色に役割を割り当てる すべてのシステムがそうであるように、最も重要なことは根拠です
VS Code用のGitHubのテーマを待っていた人も多いと思います。 GitHub Plus Themeも人気ですが、ここで紹介するGitHub VS Code themeは、ライトモード・ダークモードの配色も備えています。
ついに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
画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法は、画面サイズだけでなくユーザー設定に対して挙動やスタイルを変更させることができ、ユーザービリティーやアクセシビリティーの向上に役立ちます。 本記事では事例とあわせて最近のレスポンシブ手法を紹介します。 この記事で紹介すること ダークモード対応 モーションの無効化設定 iOSのフォントサイズ変更 ダークモード対応 OSには外観モードの設定項目があります。Windows 10やmacOS、iOS、Androidのいずれもライトモードとダークモードの切り替え機能が提供されています。ライトモード・ダー
こんにちは、freeeのUXチームでデザインシステム “Vibes” を作っている id:ymrl です。 ダークモード流行ってますよね。私は最初はしっくりこないなと思っていたんですが、食わず嫌いは良くないと思って試しているうちに、いつの間にかダークモードのほうが落ち着くようになってしまいました。 そしてそうなってくると、だんだん「自分たちの作っているWebサービスもダークモードに対応するべきなのか？」という気持ちになってきてしまい、最近はずっとダークモードのことを考えています。ということで今回はダークモードをやるべきなのか、実現する方法はどうなっているのか、UIデザインで気をつけるべき点何かというのを考える記事を書いてみます。 ※「ダークモード」はApple製品で使われている呼び方で、Androidでは「ダークテーマ」と呼ばれていて、Windowsでは「ダーク○○」のような呼び方をしてい
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年前
CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style
Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さまざまなメディアクエリのコードをコピペで簡単に利用できます。スニペットに登録しておくと、便利です。
2023/05/03: 下部にさらにズボラな案を追加、FAQも追加しました。 デモサイトを作りました。リポジトリはこちら。 favicon（ファビコン）てなに？ みんなだいすき、ブラウザのタブの妖精、この小さいアイコンたちです。 サイトに設定されているファビコンをチェックするには Chrome だと Favicon Detector 拡張を使うと便利。ぜひインストールしていろんなサイトを見てみてくださいね！ こちらは Spotify のファビコンを Favicon Detector 拡張でチェックした例です。 ところでファビコン、こんなにいる？ つらつらと…長い…全部いるのこれ？ <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-tou
デザイナーとエンジニアのコミュニケーションプロトコルを設計する 〜はてなブックマークアプリDark Mode実装の現場より〜 - Hatena Design Group
こんにちは！はてなデザインチーム所属のid:cormorantcraftです！ 先日、配信させていただいたはてなブックマークiOS版のDark Mode、みなさん使っていただけているでしょうか？ 今回はそのDark Modeの実装にあたって、デザイナーとエンジニアのコミュニケーションをどのように行っていたかという点にフォーカスしてお話しさせていただければと思います。 コミュニケーションプロトコルの設計 いきなり「コミュニケーションプロトコルの設計」って言われても？ という声が聞こえてきそうですが、Dark Mode実装の上で平たく表現すると「色を指定するデザイナー」と「色を実装するエンジニア」の間の意思疎通の枠組みを作ることです。 これをしないで進行してしまうと、デザイナーとエンジニアの間で手戻りが多数発生したり、精神的にお互い疲弊したりチームの雰囲気にも悪影響が出たりしてしまいます。気持
ダークモード時の画像の扱い方
2023年2月7日 CSS, Webサイト制作 以前から個人的にダークモードの対応を推奨しています。基本の書き方は過去記事「Webサイトをダークモードに対応させよう」を読んでもらうとして、今回は画像まわりのダークモード実装方法を中心に紹介します！ ↑私が10年以上利用している会計ソフト！ 画像の明度や彩度を落とす 明るい背景色の場合、画像は鮮やかで明るい色合いが目に止まりやすいですよね。しかしダークモードでは、まわりが暗くなるので画像だけ派手に眩しく見えてしまいます。そこで、CSSの filter を使って、ダークモードのときは明度や彩度を調整するといいでしょう。 実装するには filter プロパティーに、明度は brightness() 、彩度は saturate() を指定します。カッコの中にパーセントで割合を書けば完了。明度・彩度両方指定するなら以下のように値を続けて書きます。 @
iPhoneやAndroidでもダークテーマが採用され、ダークテーマが注目されています。サイトやアプリをダークテーマ対応にするには、単純に色合いを反転するだけではありません。読みやすく、バランスのとれた、快適なダークテーマをデザインする時に気をつけたいポイントを紹介します。 How to design delightful dark themes by Teresa Man 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ダークテーマをデザインするポイント1. 奥の面を暗くする ダークテーマをデザインするポイント2. 知覚コントラスト ダークテーマをデザインするポイント3. 明るい色の大きなブロック ダークテーマをデザインするポイント4. ブラックとホワイト ダークテーマをデザインするポイント5. カラーを濃くする 快
iPhoneやAndroidでもダークテーマが採用され、ダークモードに対応するWebサイトやスマホアプリが増えてきました。 ほんの数行のCSSのみでダークモードに対応する方法と注意点を紹介します。 Dark mode in a website with CSS by Tom Brow 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのみで対応するWebサイトのダークモード ダークテーマでお勧めのテキストと背景のカラー ダークテーマではカラーの彩度は下げる ダークモードについてさらなる情報 CSSのみで対応するWebサイトのダークモード まずは、私のサイトhttps://tombrow.com/を見てみてください、ダークモードとライトモードがあります。表示されるモードはデバイスの設定に従います。 https://tombro
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
ダークモードに対応している時に、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を除く、すべての主要なブラウザでサポートされています。
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第3弾となる今回は、フォントやテキストに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Three. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フォントによって伝わり方が変わる 2. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 3. ダークで見やすくするためにはフォントを重くする 4. 書体の選択によって、感情表現を生み出すことができる 5. 複数の書体を使用する場合は、最大2種類のルールを守る 6. すべて大文字で読みやすくするには、文字間隔
ダークモード対応のサイトを制作する時に面倒なのが、ダークモードとライトモードでの表示確認方法です。OSでモードを切り替えたり、2つ用意するのは面倒です。 Chrome 79 デベロッパーツールの新機能で、簡単にダークモードの検証ができるようになりました。下記のようにOS（ブラウザ）がライトモードでも、Webページをダークモードで表示できます。 画像はダークモード対応サイト: Tom Brow ダークモードの実装については、当ブログの以前の記事をご覧ください。 CSSのメディアクエリ「prefers-color-scheme」でダークモード対応にする方法と注意点 Chrome 79 デベロッパーツールで、prefers-color-schemeとprefers-reduced-motionの設定がシミュレートできるようになりました。 What's New In DevTools (Chrom
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!ニュース デザイナーの広垣です。 11月上旬、Yahoo!ニュースアプリはダークモードをリリースしました。※Android10（Q）以上/iOS13以上 Yahoo!ニュースアプリがダークモードに対応しました- newsHACK 昨日はエンジニアからYahoo!乗換案内アプリの事例を元に実装面について解説がありました。 本日はデザイナー視点からYahoo!ニュースでの事例を元にダークモード対応事情をご紹介したいと思います。 【補足】 画面を暗めの配色に切り替える機能について、「ダークモード」「ダークテーマ」などさまざまな呼び方がありますが、この記事では中ではすべて「ダークモード」と呼んでいます。 また、「ダークモードで
5分ではじめる、iOSのアクセシビリティ対応 - Goodpatch Tech Blog
こんにちは。iOS Developer の katoです。 2024年5月16日は 世界各地でアクセシビリティを考える1日、GAAD（Global Accessibility Awareness Day）でしたね。 GAAD Japan 2024、アクセシビリティの祭典 2024 など様々なイベントが開催され、私もオンラインで参加しました。 その中で紹介されたアクセシビリティ対応の進め方として「完璧でなくても、できることから取り組む」という考え方があります。 そもそも世の中には様々な人・状況などが存在しするため、アクセシビリティを完璧にすることは非常に難易度が高いです。 「現状よりもちょっと良く」を繰り返して、いまよりもアクセシブルな世界を目指すという考え方です。 そこで今回は、たった5分で、エンジニア主導で始められる、簡単に実装できるアクセシビリティについて、いくつか紹介します。 「反転
Generate dark CSS for your web page effortlessly If you want to add dark theme to your web page, all you have to do is paste the URL of the page and download the ready to use CSS Dark CSS theme for your website Dark themes and dark mode in general have been gaining popularity in the past couple of years. We've reached a point where dark UI is not only for the geeks, but actually is a mainstream st
Night Eyeは任意のWebサイトのダークモード用CSSを自動生成してくれるジェネレーターです 使い方も簡単でURLを入力するだけ。自動で解析し、ダークモードに対応したCSSを生成してくれます あとはダウンロードするなりコードをコピーするなり、といった感じ。試しに本ブログで作ってみました このように十分ダークモードとして機能してくれました 本ブログはテキストとCSSがメインとなっているので作りやすかった可能性も高く、他サイトではテストしてませんが、精度は悪くない印象でした 動作も軽量で、入力したら即作成されました。ユーザー登録も不要で無料で了する事が出来ます 尚、ライト/ダークモードの切り替えが可能なスクリプトも以前ご紹介したので必要でしたら合わせてご参照ください Night Eye
なんとなく好ましいだけではないダークモード、我々は何のために対応するのか？｜Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。今回は個人的に気になって調べてみた系のネタを散漫に書いたブログです。 ダークモードに対する疑問の発端 美観やバッテリーパフォーマンス[1]を理由とする話を念頭に置きつつ OS レイヤーにおける UI のスイッチングは自動で行われるとして、モバイルアプリや Web の個々の提供者が向き合う必然性はどこにあるのでしょうか？ Web で実装するときは prefers-color-scheme を使って CSS Custom Properties で宣言されたカラーパレットを切り替えることになります。モダンブラウザのサポートが充実しているので実装上の難関はありません。よって本記事では何のためにダークモード[2]を提供するのかという動機付けの理解を目的とします。 ダークモードの存在を肯定しうる理由たち よく目にする主要
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()関数の使い方 はじめに システムカラーには、現在使用され
Tailwind CSSのカスタマイズでよくやること
tailwindcss 3.0.23で検証 カラーテーマを追加する tailwindではbg-whiteで背景色を白、text-whiteで白テキストなどにできるが、whiteの部分で自分の決めたカラーを使えるようにする module.exports = { ・・・ theme: { extend: { colors: { "foo": "#f97316", "bar": { "buz": "#65C18C", ・・・ }, }, }, }, ・・・ }
iOS13で追加された「ダークモード」は、iOS 13の主要な機能の1つであり、サードパーティ製アプリでも早々にサポートし始めているほか、対応するWebサイトも続々と増えています。そんな新機能ダークモードですが、PhoneBuff氏が公開した動画「Dark Mode vs. Light Mode Battery Test」で、ダークモードを適用させることでiPhoneのバッテリー駆動時間を大幅に改善することがテスト結果から明らかになっています。 テストでは、iOS13を搭載した2台のiPhone XS Maxを使用し、ロボットアームを用い、ライトモードとダークモードにおいて、メッセージアプリの使用、Twitterのスクロール、Googleマップのナビゲート、YouTubeビデオの視聴など、さまざまな条件でテストを実施しています。 それらテスト結果のグラフがこちらです。 テストは合計8時間行
You should be using SVG favicons. They’re supported in all modern browsers right now. Also, you probably don’t need all these icon links and sizes you’re copying from projects to projects. Let’s find out what’s the absolute minimum required, word by word. IconThe main favicon can be an SVG of any size. The type type=”image/svg+xml” is unnecessary. <link rel="icon" href="favicon.svg">Mask iconFor S
アプリ開発において、OSのバージョンアップ対応は必須の作業です。 そもそも改修の必要性があるかを確認するところから始まり、バージョンアップの対応を行うことになると思います。 そこで、今回は iOS13 へのバージョンアップ対応の内容を公開したいと思います。 LaunchScreenの必須化対応 iOS13 では LaunchImage が非推奨となりました。 そのため、アプリの起動画面に Assets.xcassets の LaunchImage を使用している場合は LaunchScreen への変更を余儀なくされます。 この対応としては、大きな画像を正方形にして ImageSet に入れ LaunchScreen.storyboard の ImageView に設定することで対応できます。 この時 ContentMode を ScaleAspectFit にするといい感じになると思いま
FlutterのThemeを理解する
この記事はFlutter 全部俺 Advent Calendar 12日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。 FlutterのThemeとはなにか Flutterは、アプリに統一的なデザインスタイルを提供するために、Themeクラスを提供しています。 Themeを適切に使えば、最小限のコストでアプリのデザインを変更したり、ダークモードに対応したりできます。 Theme の基本的な使い方 Themeは基本的にMaterialAppとのセットで使います。MaterialAppのtheme: に指定したThemeDataが アプリ全体に適用されます。 ... return MaterialA
Chrome 78で使える「強制ダークモード」に注目
Google Chromeチームは先日、Chromeの最新版となる「Google Chrome 78」のロールアウトを開始した。多くのユーザーがすでにこのバージョンを使っているはずだ。このバージョンは37個の脆弱性を修正したバージョンとして注目されているが、実験的な機能として「強制ダークモード」が搭載されている点にも注目しておきたい。ユーザーの反応によっては、今後、簡単に利用できる機能となる可能性がある。 現在はWindows 10、macOS、Android、iOSのどの主要オペレーティングシステムにも「ダークモード」またはこれに類する機能が搭載されている。これはカラーテーマを黒基調に変更するもので、「目に優しい」「バッテリーの持ちが良くなる」というメリットがもたらされるとして人気がある。 しかし、この機能は現在のWebページとは相性が悪い。Webページは背景色が白であることを前提として
2019年も、12月になって、残りももう少しですね。 来年2020年のことを考えるなどしていますが、その前に、2019年の振り返りをしておくと、来年に活かせると思うので振り返っておきたいと思います。 月別に簡単に振り返ることにします。 2019年の振り返り。今年やったこと 2019年1月 2019年2月 2019年3月 2019年4月 2019年5月 2019年6月 2019年7月 2019年8月 2019年9月 2019年10月 2019年11月 2019年12月 2020年、次にどうするか？ 今年2019年は、アプリとラグビーの年 2020年はどうするか？ 2019年の振り返り。今年やったこと 2019年の振り返り 2019年1月 ・アプリを作ろうと思い、Swiftの勉強を始める。 ・アプリを作成していく。 2019年2月 ・ブログを始めて、15年。15年間毎日更新達成。 ・Apple
2022年5月24日 Webデザイン, 便利ツール こんにちは、ダークモード推奨派のManaです。以前からダークモードの布教活動を細々としておりますが、まだまだダークモードに対応していないWebサイトもたくさんあります。今回はダークモードに対応していないWebサイトを強制的にダークモードにしちゃう拡張を紹介します。 ↑私が10年以上利用している会計ソフト！ 前々から夜間見えづらいって事は認識していましたが、どうやら光の見え方も多くの方とは違うと最近判明…！みんなこんなシャキーンって感じの光の線は見えないんですかね…？夜景なんて光るウニの集合体ですよw ちなみにスターバースト現象というらしい ←おそらく多くの人が見えるビュー Manaビュー→ pic.twitter.com/bfxZAK7FYE — Mana (@chibimana) September 8, 2020 以前『Webサイトを
iOS13で追加されたダークモード。実機では設定する場所がすぐわかったがシミュレーターでは見つからない iOS13のベータ版が公開されました。 早速実機にインストールして、開発中のアプリをXCode11ベータ版でビルドして動作確認してみました。 今回追加されたダークモードも試すことができます。 しかし、実機ではすんなりダークモードの設定ができたのですが、 シミュレーターでは設定する場所が見つかりません。 結論としては設定する場所が違っていました。
シンプルで見やすいレイアウトをclass不要で作れるclasslessなCSSフレームワーク・「new.css」 - かちびと.net
new.cssはシンプルで見やすいレイアウトをセマンティックなHTMLだけで作れるclasslessなCSSフレームワークです ブラウザの設定に基づいたダーク/ライトモードにも対応できる上にCSS変数を利用したオリジナルのテーマ設計も可能となっています 主なユースケースとしてシンプルなブログ、リンク集、プロフィールページ、Markdownによって生成されたHTMLレンダリング等を想定しているそうです サイズもとっても軽量です。とても良いですね。ライセンスはMITとのこと new.css
ブログも、そろそろダークモードに対応したほうがいいですよね。 アプリはだいぶダークモードに対応しています。Twitter、Instagram、Safari、Chromeなども対応しています。 わたしが作ったアプリもダークモードに対応しています。 LinkTouchブラウザー（iOS）ブックマークから移動しやすいブラウザー LinkTouchブラウザー（Android） 5W1Hメモ帳（iOS）5W1H形式でメモが取れるアプリ 5W1Hメモ帳（Android） ビジオス（iOS）ビジネス書のおすすめをまとめたアプリ Goal-list 目標管理クラウドアプリ。目標をリストで管理できます ブログも、ダークモードに対応したほうがいい なぜ、ブログをダークモードに対応させたほうがいいか？ WordPressのダークモードに対応したテーマを作りました ダークモード ブログも、ダークモードに対応したほ
ダークモードに対応したサイトが増えてきています。多くは自動的に設定されたり、設定画面を使って自分で切り替えるようになっています。しかし、まだまだ未対応のサイトが多いのも事実です。 そこで使ってみたいのが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ページを開く
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法
CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ
UIデザイナーから学ぶ！今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説
VS Codeの見やすいテーマが登場！GitHubのデザインでコードも快適に -GitHub VS Code theme
ウェブサイトに演出は不要!? ユーザー設定にレスポンシブ対応できる新しいCSS - ICS MEDIA
Webのダークモードを実現するには - freee Developers Hub
WebページやスマホアプリのUIデザイン・モックアップが簡単に！Adobe XDのプラグイン「Spectrum」が便利
ずぼらな私の2023年のファビコン事情（SVGでダークモード対応）
UXデザイナーに学ぶ、ダークテーマをデザインする時に気をつけたい5つのポイント
CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点
CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
SVGファビコンのカラーをダークモード時にCSSで変更できるの知ってた？
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3
ダークモードの検証が簡単にできるようになった！Chrome 79 デベロッパーツールの新機能
どう作ると読みやすい？ Yahoo!ニュースのダークモード対応の裏側 #UI
Dark CSS Theme Generator | Night Eye
任意のWebサイトのURLを入力するだけでダークモード用のCSSを自動で作成してくれる・「Night Eye」
CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法
iOS13のダークモードは明らかにバッテリーが長持ちするというテスト結果 - こぼねみ
Are you using SVG favicons yet? A guide for modern browsers.
アプリを更新してiOS13に対応させよう | 株式会社ブリッツゲート
2019年の振り返り。今年やったことまとめ - ビジョンミッション成長ブログ
ダークモードに対応していないWebサイトを無理やりダークモードにする拡張
【iOS】XCodeのシミュレーターでダークモードを設定する方法
ブログも、ダークモードに対応したほうがいい理由 - ビジョンミッション成長ブログ
Dark Reader - 任意のWebサイトをダークモードで表示
fatbottomgirl.hatenablog.com
mainichi.jp
ameblo.jp/miduki4461
topic.life-ranger.jp
matomedane.jp
semi-rich.com