タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ウェブデザインにおけるline-heightについて
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の不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Yuya Kinoshita
line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 Webサイトのコーディング（実装）では、デザインデータ通りの数値を反映しているにも関わらず、ブラウザ上の表示がデザインデータと比べてずれる（余白が大きくなりすぎる）場合があります。 これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後（ブラウザ表示）の余白のずれにつながっていると考えています。 この問題を解決するため、line-heightの不要な上下の余白を打ち消すCSSを試したところ効果を実感できたので、この方法のメリット・デメリットや活用についてまとめました。 チームで進めている実際のプロジェクトでこの方法を試してから、2020年1月の時点で9ヶ月ほど経ちますが、メリットとデメリットを比較してメリットが完
行送り（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のstack機能を使ってline-heightを考慮したデザインを作る | フロントエンドBlog | ミツエーリンクス
2020年12月17日 Adobe XDのstack機能を使ってline-heightを考慮したデザインを作る UIデザイナー 辛川 この記事はミツエーリンクス Advent Calendar 2020 - Adventarの17日目の記事です。 皆さんはこんな経験ありませんか。 デザイン上は美しい余白だったが、設計後想定よりも若干余白が大きくなってしまった。 デザインテンプレートを作成したページは想定通りだったが、別ページでその他のモジュールと組み合わせた際に、想定されない余白が生じてしまった。 開発後に上記が発覚しデザインの調整を行おうとすると、影響範囲を考えながらモジュールの調整を行うような大工事になる事もあり、想定外の工数が発生してしまいます。このような場合、デザイン時に何かしらの想定不足が考えられますが、その1つにline-heightの考慮があげられると思います。 大型サイトの
The Lorem ipsum text is derived from sections 1.10.32 and 1.10.33 of Cicero's De finibus bonorum et malorum. The physical source may have been the 1914 Loeb Classical Library edition of De finibus, where the Latin text, presented on the left-hand (even) pages, breaks off on page 34 with "Neque porro quisquam est qui do-" and continues on page 36 with "lorem ipsum ...", suggesting that the galley t
Adobe XDでテキストの行間のサイズを測るにはどうしたらいいの？XDでは行間のサイズは単位なしになっていて、 コーディングする時にline-heightでどう指定すればいいか分からなくて困っているXDにおけるline-heightの計算方法が知りたい 数値 / 文字サイズで求められる結論。 指定されている数値を文字サイズで割ってあげる、これだけでOKです。 これだけだとちょっとイメージしづらいと思うので続いて画像つきで解説します！ XDでline-heightを計算してみる数値が43.2に指定されている添付画像のテキストの場合を例に計算してみましょう。 計算式は、43.2 / 24 = 1.8。 これをline-heightで指定するので実際のコードは以下のようになるでしょう。
iOSアプリでLine Heightを
設定するときに注意したいこと / Things to keep in mind when setting Line Height in your iOS app
[Online] potatotips #73 iOS/Android開発Tips共有会 https://potatotips.connpass.com/event/202810/
In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height, we might think about the concept of leading from print design — a term, interestingly enough, that comes from literally putting pieces of lead between lines of type. Leading and line-height, however similar, have some important differences. To u
Webサービスの制作におけるline-heightの扱い方とかをまとめました。 コーディングのポイント CSSをリセットしてから、bodyにline-heightを入れていると思いますがそれは大きな間違いです。 bodyにline-heightを入れてしまうと全ての要素に適応されてしまうため、buttonやinputにもline-heightが入ってしまいます。
テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック - Qiita
テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニックCSS3 考え方 1.テキスト要素の全高（文字の高さ+上スペース+下スペース）は、line-heightにfont-sizeを掛けたものに等しくなります。 2.文字の高さはfont-sizeと等しい（近似値）と仮定します ■グリーン: font-size、■オレンジ: font-sizeとline-height、■ブラック: 上スペース 先頭行だけを上に揃えるには、テキストのブロックからline-heightで加えられた上部のスペースだけを取り除けば実現できます。 SASS @mixin lhCrop($line-height) { &::before { content: ''; display: block; height: 0; width: 0; margin-top: calc(
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本語の文章とline-heightに対する考察 - Qiita
The Good Line-Height
【XD】 line-heightの計算方法ご存知ですか？練習問題とともに解説
How to Tame Line Height in CSS | CSS-Tricks
line-heightについて考えませんか - Qiita
kajirinhappy.com
comic-gardo.com
www.daily.co.jp
www.jiji.com
b.hatena.ne.jp
www.47news.jp