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種類」ということになる事例もありますので、全体を最適化して保守性を高めるために、配色の変数化は一般的です。こんな感じですね。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたが知らないかもしれない CSS 変数活用法
CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ
CSS変数による配色はcontrastとrgbも用意したら捗るぞ