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
“<hex-color>”値の構文 ハッシュ(“#”)に続けて色成分を2桁ずつの16進数で続けて記述します。 #〚赤〛〚緑〛〚青〛 色成分は赤、緑、青の順に記述し、範囲は“00”から“ff”です。1桁の色成分には“0”を付けて2桁にします。 “a”~“f”は大文字と小文字は区別されません。
Published: August 11, 2021 Today's HTML form elements are difficult to customize. It feels as if it's a choice between few or no custom styles, or resetting input styles and build it up from scratch. Building it up from scratch ends up being much more work than anticipated. It can also lead to forgotten styles for element states (indeterminate, I'm looking at you), and the loss of built-in accessi
hsl()ではhue：色相、saturation：彩度、lightness：輝度の3要素で色を指定します。 RGBより直感的な色指定方法としてCSS3で追加されました。 キーとなるhueさえ最初に決めておけば、あとは彩度と輝度の割合を変えるだけでそれなりにまとまったサイト配色になります。 モックや社内用管理画面をゴリゴリ作る際に覚えておくとべんり！ 指定方法 hue：色相 0～360°の角度の値で指定。 角度のため、例えば400と指定すると40に変換されます。 0=360=red saturation：彩度 0～100%の割合で指定。 100％＝純色、0%＝灰色 lightness：輝度 0～100%の割合で指定。 100%=白、50％=純色、0%=黒 （明度とは異なるので注意。明度は100%=純色、0%=黒。） 例）hue=0 の場合の変化 See the Pen hsl() による色の
CSS変数とSass(Scss)変数を利用してダークモードになった時の配色などを自動で変更することができます。 例えばテーマボタンをクリックしたら<html>にJavaScriptでdata-theme="dark"という属性を追加し、そのdata属性を判定してダークモードの切り替えを実装する場合のCSS&Sassの設定を紹介します。 基本的なダークモードの設定方法 まずはライトモード（通常表示）用の$theme-colorsとダークモード用の$dark-theme-colorsというSass変数に配列で各カラーコードを定義していきます。 そしてSass機能の@each文で$theme-colorsを:root {}内にループ処理で出力していきます。 出力結果は--color-primary、--color-secondaryのようにCSS変数で出力され、ダークモードの時は&[data-t
Android4系のデフォルトブラウザで、どうしてもレイアウトが崩れるという話を持ちかけられて、調べてみました。 どうもviewportを指定してない場合に、widthがdevice-widthより大きな値を指定しても、無視されるというものみたいです。 widthが効かないというのがどういう事か、文章だとよくわからないと思うので、再現させるコードと、それを表示したスクリーンショットを下の方に載せてます。 解決策 なにが起きるかと言うと、 p要素のwidthを無視して勝手に横幅が設定されて幅が短くなる。 androidのバージョンによって変わるみたいで、 android2系だと問題ないけどandroid4系だとおかしい(端末の違いも考えられるけど)。 いろいろやってみて、 なぜかbackground-colorを入れると意図した幅で表示された。 なんでbackground-c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
