タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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などを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
行送り（line-height）の世界基準 アクセシビリティのスタンダードであるWCAG「達成基準 1.4.12: テキストの間隔を理解する」では、行送りの最低値を1.5と定めている行送りを1.5にした場合でもデザインが破綻しないように促している（@SaekiTominagaさんのご指摘で解釈を誤っていたことが発覚。修正いたします）。しかし世の中のホームページには、リセットCSSを変更していなかったり（あくまでブラウザ間の差異を無くすためのものであり、スタイルを後付けすることが推奨されているわけだが、そもそもどうしてアクセシビリティ基準を守らないんだろうか？1 ただ、sanitize.cssなど、line-heightがちゃんと1.5と設定されているリセットCSSもちゃんと存在する）、古いBootstrapをそのまま使っていたりして、line-heightが狭いのが割とある。そんな場合でも
Adobe XDでテキストの行間のサイズを測るにはどうしたらいいの？XDでは行間のサイズは単位なしになっていて、 コーディングする時にline-heightでどう指定すればいいか分からなくて困っているXDにおけるline-heightの計算方法が知りたい 数値 / 文字サイズで求められる結論。 指定されている数値を文字サイズで割ってあげる、これだけでOKです。 これだけだとちょっとイメージしづらいと思うので続いて画像つきで解説します！ XDでline-heightを計算してみる数値が43.2に指定されている添付画像のテキストの場合を例に計算してみましょう。 計算式は、43.2 / 24 = 1.8。 これをline-heightで指定するので実際のコードは以下のようになるでしょう。
It’s been possible to create gorgeous typography on the web for decades, but often refining the details to perfection can take a lot of effort. Arguably too much effort, and developers just don’t have the time. Happily, the last few years of CSS have seen a lot of new tools, sometimes very simple tools, that when used in a smart fashion suddenly make polishing such graphic design details incredibl
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本語の文章とline-heightに対する考察 - Qiita
【XD】 line-heightの計算方法ご存知ですか？練習問題とともに解説
Polishing your typography with line height units
news.yahoo.co.jp
yurury.hatenablog.com
www.futen.xyz
oyazimirai.hatenadiary.jp
www.youtube.com
www.goodspress.jp