Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 10 件 / 10件

新着順 人気順

line-heightの検索結果1 - 10 件 / 10件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

line-heightに関するエントリは10件あります。 cssdesignフォント などが関連タグです。 人気エントリには 『ウェブデザインにおけるline-heightについて』などがあります。
  • ウェブデザインにおけるline-heightについて

    ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳

      ウェブデザインにおける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のハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG
      • line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Yuya Kinoshita

        line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 Webサイトのコーディング(実装)では、デザインデータ通りの数値を反映しているにも関わらず、ブラウザ上の表示がデザインデータと比べてずれる(余白が大きくなりすぎる)場合があります。 これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後(ブラウザ表示)の余白のずれにつながっていると考えています。 この問題を解決するため、line-heightの不要な上下の余白を打ち消すCSSを試したところ効果を実感できたので、この方法のメリット・デメリットや活用についてまとめました。 チームで進めている実際のプロジェクトでこの方法を試してから、2020年1月の時点で9ヶ月ほど経ちますが、メリットとデメリットを比較してメリットが完

          line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Yuya Kinoshita
        • 日本語の文章とline-heightに対する考察 - Qiita

          行送り(line-height)の世界基準 アクセシビリティのスタンダードであるWCAG「達成基準 1.4.12: テキストの間隔を理解する」では、行送りの最低値を1.5と定めている行送りを1.5にした場合でもデザインが破綻しないように促している(@SaekiTominagaさんのご指摘で解釈を誤っていたことが発覚。修正いたします)。しかし世の中のホームページには、リセットCSSを変更していなかったり(あくまでブラウザ間の差異を無くすためのものであり、スタイルを後付けすることが推奨されているわけだが、そもそもどうしてアクセシビリティ基準を守らないんだろうか?1 ただ、sanitize.cssなど、line-heightがちゃんと1.5と設定されているリセットCSSもちゃんと存在する)、古いBootstrapをそのまま使っていたりして、line-heightが狭いのが割とある。そんな場合でも

            日本語の文章とline-heightに対する考察 - Qiita
          • Adobe XDのstack機能を使ってline-heightを考慮したデザインを作る | フロントエンドBlog | ミツエーリンクス

            2020年12月17日 Adobe XDのstack機能を使ってline-heightを考慮したデザインを作る UIデザイナー 辛川 この記事はミツエーリンクス Advent Calendar 2020 - Adventarの17日目の記事です。 皆さんはこんな経験ありませんか。 デザイン上は美しい余白だったが、設計後想定よりも若干余白が大きくなってしまった。 デザインテンプレートを作成したページは想定通りだったが、別ページでその他のモジュールと組み合わせた際に、想定されない余白が生じてしまった。 開発後に上記が発覚しデザインの調整を行おうとすると、影響範囲を考えながらモジュールの調整を行うような大工事になる事もあり、想定外の工数が発生してしまいます。このような場合、デザイン時に何かしらの想定不足が考えられますが、その1つにline-heightの考慮があげられると思います。 大型サイトの

              Adobe XDのstack機能を使ってline-heightを考慮したデザインを作る | フロントエンドBlog | ミツエーリンクス
            • The Good 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

              • 【XD】 line-heightの計算方法ご存知ですか?練習問題とともに解説

                Adobe XDでテキストの行間のサイズを測るにはどうしたらいいの?XDでは行間のサイズは単位なしになっていて、 コーディングする時にline-heightでどう指定すればいいか分からなくて困っているXDにおけるline-heightの計算方法が知りたい 数値 / 文字サイズで求められる結論。 指定されている数値を文字サイズで割ってあげる、これだけでOKです。 これだけだとちょっとイメージしづらいと思うので続いて画像つきで解説します! XDでline-heightを計算してみる数値が43.2に指定されている添付画像のテキストの場合を例に計算してみましょう。 計算式は、43.2 / 24 = 1.8。 これをline-heightで指定するので実際のコードは以下のようになるでしょう。

                  【XD】 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/

                    iOSアプリでLine Heightを
設定するときに注意したいこと / Things to keep in mind when setting Line Height in your iOS app
                  • How To Tame Line Height In CSS | CSS-Tricks

                    DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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

                      How To Tame Line Height In CSS | CSS-Tricks
                    • テキスト要素の先頭行だけ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(

                        テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック - Qiita
                      1

                      新着記事