line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG
lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
この記事は、技術書典 13 で頒布中の「Vivliostyle で本を作ろう vol. 6」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開予定です。 先日、Vivliostyle に大きなアップデートがあり、現代のブラウザで普及が進みつつある CSS Variable (CSS 変数) が Vivliostyle でも使えるようになりました！ この CSS Variable、実はこれまでの CSS の概念を大きく覆すものであり、私たちのような Web フロントエンドエンジニアにとってはもはや当たり前のように使われているものですが、最近の CSS の進化を知らない人にはまだまだその活用方法が知られていないようです。 この記事では、CSS Vari
CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ
CSS変数（カスタムプロパティ）は、文字通りCSSで変数が使用できるので非常に便利です。CSS変数の使い方でよく聞くのはカラーですが、それ以外にもさまざまな優れた使い方があります。 WebサイトやスマホアプリのUIで、特にコンポーネントのバリエーションを実装するのに役立つCSS変数の使い方を紹介します。 Practical Use Cases For CSS Variables by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS変数を活用できてない例 CSS変数の優れた使い方 1: ロングハンドのプロパティ CSS変数の優れた使い方 2: 背景 CSS変数の優れた使い方 3: グラデーション CSS変数の優れた使い方 4: クリップパス CSS変数の優れた使い方 5: チェックボッ
DESCRIPTION CSSの基調色は変数化しよう そうすることで部分最適で「同じような色を複数生み出すこと」が避けれるよ 「基調色」はcontrastとrgb値も用意するといいよ！ 本文 プライマリーカラーやセカンダリーカラーは変数化するのが一般的になりました。配色をいろいろなコンポーネントプロパティに書き散らかすと部分最適化した結果「気づいたら青色が32種類」ということになる事例もありますので、全体を最適化して保守性を高めるために、配色の変数化は一般的です。こんな感じですね。
Design Tokens Generatorはデザイントークンを作成し、まとめてCSS変数にしてくれるWebアプリです。 デザイントークンとは？については以下のAdobe blogをご参照ください。
Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えることなく既存のCSSにも利用する事が可能です。 ファイルはTypography、Colors、Layout、UIの4つに分けられています。既存のWebサイトに導入する事でHTMLに変更を加えることなくスタイルを統一したり管理しやすく再設計する事も出来るのでCSSの最適化に一役買ってくれそうですね。 個人的にもCSS変数を使わない世界はもはや考えられないほど。まだ使った事が無い方はぜひ。 Pollen
<div className={style.buttons}> <Button type="button" color="secondary" startIcon={<FiRotateCcw size={18} />} > キャンセル </Button> <Button type="submit" color="primary" startIcon={<FiCheckCircle size={18} />} > 次に進む </Button> </div> このボタンの仕様はざっくりと以下の通りです。 color Prop は以下の2通りの文字列を指定可能 "primary" … 青い背景、白文字 "secondary" … 薄灰色の背景、黒文字 startIcon Prop として ReactNode を渡せる 省略可。渡されたアイコンを、ラベルの左側に配置する つまり、「コンポジション」
【CSS】試しに、CSS変数とラジオボタンを使ってみました【実験】 - Little Strange Software
どうも！LSSです！！ 現在のCSSには「変数」の概念があります。 「カスタムプロパティ」と呼ばれたり「CSS変数」と呼ばれたりするようです。 …実は自分は今まで、存在は知っていても全く使った事が無かったんですけどね^^; CSS変数とは 変数じゃなくて定数では？ CSS変数を変数的に扱えるかも！？ 実験！！ コード うまくいきました^^ CSS変数とは 基本的な使い方を簡潔に書くと、例えば width:100px; という指定をかけたりする際に、 --w1:100px; width:var(--w1); みたいな書き方でも、同じ結果になります。 ※「w1」は任意の変数名です。 --w1:100px;で「--w1」という変数（箱、と思ってもらってもOK）に「100px」という値を用意しておいて、 width:var(--w1);で「--w1」に格納しておいた値を取り出し、widthプロパテ
本記事は、TechFeed Experts Night#14 〜 絶対役立つ！最先端のCSS総ざらいのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 それでは始めたいと思います。 自己紹介ですが、久保知己と言います。株式会社まぼろしでCSSを書いています。今回のスライドですが、けっこう作りすぎてしまったので一部は省略していきます。そのかわり、共有する資料にはちゃんと説明が書いてあるので、詳細はそちらをご確認ください。
モダンブラウザで <dialog> 要素が対応し始めて、モーダルウィンドウを <dialog> 要素を使って実装してみたときに気づいた現象です。 CSS 変数が参照できない？ ::backdrop 擬似要素を使って <dialog> が開いたときの背景色を指定してみます。 :root { // モーダルウィンドウの背景色を定義 --bg: rgb(0 0 0 / 15%); } dialog::backdrop { // モーダルウィンドウが開いたときの背景色に指定 // 反映されない!? background-color: var(--bg); } すると、変数 --bg が参照されずに背景色が適用されません。 仕様を見てみる WHATWG の仕様 を見てみると、次のように書かれています。 It does not inherit from any element and is not i
@property: 次世代の CSS 変数にユニバーサル ブラウザのサポートを追加 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 CSS パワーアップの準備をしよう@property ルールは、CSS Houdini API の包括的な機能の一部であり、すべての最新ブラウザで完全にサポートされるようになりました。この画期的な機能により、CSS カスタム プロパティ（CSS 変数）の制御性と柔軟性が高まり、スタイルシートがよりスマートで動的なものになります。 @property のメリット セマンティックな意味: @property を使用して、カスタム プロパティの型（構文）を定義します。これにより、カスタム プロパティが保持するデータの種類（色、長さ、数値など）をブラウザに伝えることで、予期しない結果を防ぎ、グラデーションのアニメーションなどの新たな
ZennサイトのUIにおいて、角丸のチューニングを行い、その大きな目的としては、前回のエレベーションのチューニングと同様にユーザー体験の向上を図りました。本稿では、実施した角丸のチューニングがどのようにユーザー体験向上に貢献するかについて解説し、さらにCSS変数の調整による柔軟性にも触れます。 角丸とは 「角丸」とは、オブジェクトの角に丸みを持たせるデザイン要素です。主に矩形のオブジェクトに適用され、CSSのborder-radiusプロパティを使用して角丸の半径を指定します。 角丸が持つ意味は、オブジェクトが丸みを帯びることで、そのオブジェクトがインタラクト（クリック/タップ/ドラッグ&ドロップ/フリック/スワイプ）可能であることを示します。これは物理世界のメンタルモデルと連動し、触れやすさや触れた際の怪我のしにくさを意味します。 Zennの角丸チューニングの経緯と目的 Zennでは、以
CSS変数の基本と使用例 - Qiita
CSS変数はその名の通りCSSで使うことのできる「変数」です。設定したスタイルを使い回すことができます。カスタムプロパティやカスケード変数とも呼ばれています。（MDN） Web Componentsを使う上でCSS変数を組み合わせて使うのは有効ですし、Web Componentsを使わずとも便利です。この記事では、基本的な説明と特性を活かした使用例を紹介します。
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） そんな時1箇所ずつ書き換えていませんか？？コーダーだったらメンテナンス性の高いCSSを書きたいところ。 とはいえ、コードが長くなるほど入力間違いは増えやすくなり、修整も大変になります。 そんな時に使える機能が「CSS変数（カスタムプロパティ）」です。 SassなどのCSSプリプロセッサを使わず、CSSの一括管理ができる便利な機能。 当記事ではCSS変数の基礎から使い方まで解説するので、一歩進んだコーディング知識を身につけたい方はチェック
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたが知らないかもしれない CSS 変数活用法
CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました
CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ
CSS変数による配色はcontrastとrgbも用意したら捗るぞ
デザイントークンを作成し、まとめてCSS変数にしてくれる・「Design Tokens Generator」
ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」
【CSS】「状態変化」と「バリエーション違い」はCSS変数で整理できる - Qiita
CSS変数でできること - Custom propertiesのセレクタの省略と詳細度の分離
定義されたCSS変数が::backdrop内で参照できない
@property: 次世代の CSS 変数にユニバーサル ブラウザのサポートを追加 | Blog | web.dev
Zennサイトの角丸チューニングによるユーザー体験向上とCSS変数の整理
【超便利】CSS変数って知ってる？使いこなしてコーディングを効率化しよう！ - PENGIN BLOG