タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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変数（カスタムプロパティ）は、文字通り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
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン78.0.3904.70がリリースされました。CSSやServiceWorkerの機能がアップデートされたほか、将来的にGoogle Chromeに搭載する予定の機能を試用するための仕組みが搭載されています。 New in Chrome 78 | Web | Google Developers https://developers.google.com/web/updates/2019/10/nic78 New in Chrome 78: New origin trials, CSS Properties and Values API, and fresher service workers! - YouTube ◆CSSの変数にフォールバック機能が追加 以前より、「--変数名」「var(変数名)」記法を利用し
【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
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変数による配色はcontrastとrgbも用意したら捗るぞ
![[みんなのケータイ]ダイソーのUSB 3.0/USB PD 100W対応USB Type-Cケーブルを試してみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/227d48d9a391cf24dce8448515869dd7e581422c/height=288;version=1;width=512/https%3A%2F%2Fk-tai.watch.impress.co.jp%2Fimg%2Fktw%2Flist%2F1607%2F848%2F01.jpg)
デザイントークンを作成し、まとめてCSS変数にしてくれる・「Design Tokens Generator」
ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」
Google Chrome 78安定版リリース、CSS変数へのフォールバック機能や新たな実験の仕組みなどを搭載
CSS変数でできること - Custom propertiesのセレクタの省略と詳細度の分離
定義されたCSS変数が::backdrop内で参照できない
Zennサイトの角丸チューニングによるユーザー体験向上とCSS変数の整理
【超便利】CSS変数って知ってる？使いこなしてコーディングを効率化しよう！ - PENGIN BLOG
news.yahoo.co.jp
m308.net
www.isc.meiji.ac.jp/~chienoza
www.alterna.co.jp
ikken-hokkori-burogu.com
news.tv-asahi.co.jp