ウェブデザインにおけるline-heightについて | Rriver

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

コメント一覧
古河 乃愛2021-05-19 23:29:22

PSDデザインに100%忠実なピクセルパーフェクトを強要される現場で、アタマに来て文字列周りは全て line-height:1 にして他の要素も全てpx単位でmargin, padding, position 実装してやったことある。

飯沢 健人2021-05-19 23:32:25

久々にウェブ制作関連の記事を書きました!

岡沢 大翔2021-05-19 23:35:28

昔先輩が、「基本は1.618を使っているよ」って言ってて、なんですかその中途半端な値?って聞いたら、「黄金比」と言っていた。

袖山 碧人2021-05-19 23:38:31

とりあえず、line-height でオブジェクトの高さを指定するのは止めろ

湯浅 紬希2021-05-19 23:41:34

デザイン界隈では「バッドノウハウを考える人が優秀」っていう傾向がある。新興宗教と変わらない。

丸山 岳2021-05-19 23:44:37

この高速スクロール時代にどこまで気にするか、みたいなキモチ。 印刷はさらに不明。PDFでもおいておいてくれたほうが親切。何のコンテンツかわかんないけど。道順はテキストで親切に書いて♥

元村 紗菜2021-05-19 23:47:40

ヘイトとウィドスって言ってたひとを思い出した。

中浜 悠真2021-05-19 23:50:43

XDはcss側に仕様合わせて欲しい ここだけでFigmaからの乗り換え検討にあがる

小川 未来2021-05-19 23:53:46

特に発見はない…のかな

水沼 暖2021-05-19 23:56:49

"実は調べれば調べるほど奥が深いCSSのline-heightの世界"

坪倉 実桜2021-05-19 23:59:52

勉強になった~。色々と曖昧にしてた部分あったからスッキリした。[css][アクセシビリティ]

兵藤 いろは2021-05-20 00:02:55

てか、上下に空きができるという言い方じゃなくて、line-heightは行ボックスの高さだで済むと思うんだけど行ボックスって表記が1つも出てこないのなんでなんだぜ?

小野塚 陽葵2021-05-20 00:05:58

ふむ

近 一颯2021-05-20 00:09:01

目がおじいちゃんなので和文は 1.8 以上にしてほしい。自分はなるべくそうしてる。単位はいつも入れてないけど、入れると厄介になるのを知れたのは良かった。

日原 あかり2021-05-20 00:12:04

いつも1.5

本岡 美優2021-05-20 00:15:07

20年前のCSS仕様書から特にwhats newが無い

刑部 蓮2021-05-20 00:18:10

ラインハイトってなんだかドイツ語っぽい。

光武 和2021-05-20 00:21:13

へー。

神 莉緒2021-05-20 00:24:16

詳しい。

甘露寺 紬葵2021-05-20 00:27:19

こういう所に行き着く前の、マージンを統一するとか、色数をやたらと増やさないとか、ガイドを引いてズレないようにするとか、オブジェクトのサイズは整数にするとか、レスポンシブで破綻しないようにしてほしい。

宮嶋 風花2021-05-20 00:30:22

XDは用途がそれなんだからCSSに合わせろや!

片井 優2021-05-20 00:33:25

“line-heightの値は単位なしで記述するのがいい” おーこれは目から鱗!

山口 陽2021-05-20 00:36:28

line-heighiは、視認性に関わる大切な値なので注意したいです。Figmaで単位が入っている時があるからコピペされないように変えたいけれど、viewer向けのプラグインないし、あの表示される箇所は変更出来ないらしい

伊吹 美緒2021-05-20 00:39:31

関係ないけど、鉛のプレートの話が興味深かった。

大中 陸斗2021-05-20 00:42:34

昔からウェブサイトにおける行間の最適な間隔については文献もあるのだけど、なかなか文字の読みやすさに対してウェブ業界が成長しない。ウェブメディアとか無茶苦茶だし。

門倉 仁2021-05-20 00:45:37

%と単位なしでも違うのか知らなかった。

阪口 莉央2021-05-20 00:48:40

昔先輩が、「基本は1.618を使っているよ」って言ってて、なんですかその中途半端な値?って聞いたら、「黄金比」と言っていた。

白井 健斗2021-05-20 00:51:43

行送りと概念が違うのは面倒だよなあ。なんでこんな仕様にしたんだろうか。ちなみに和文は1.8はあった方がいいよ。欧文と違ってアセンダーがないからね。行長が短い場合は1.6、見出しは1.4まで許容可。

菊地 美波2021-05-20 00:54:46

いい記事

片瀬 匠2021-05-20 00:57:49

印刷のほうのレディングのような仕様だと誤解していた。大誤解。。そんな細かい字組みの要件なくて幸せだったが、一から出直すわ……。

佐原 奏太2021-05-20 01:00:52

基本1.5くらいでデザインしているけど、和文は「1.8 – 2.0」なのか…結構空き気味な印象なので、読み易さやグルーピング難しいけどどうなんだろう。参考にいくつか挙げてもらっているので、それをメインに考えようかな

菅家 湊大2021-05-20 01:03:55

line-height:1じゃ複数行の文章対応出来なくなるじゃんか。個人的にletter-spacing細かく設定されてるの勘弁してってなる

梶谷 凜2021-05-20 01:06:58

line-heightでブロックの高さ調節すると変更に対応できなくなる時あるある。ピクセルパーフェクトの要求してくる現場はちょっとガソリンかけたくなる時ある。やるけど!

戸井 櫂2021-05-20 01:10:01

1.1em を使ってた。

根来 あかり2021-05-20 01:13:04

レディング分ネガティブマージン指定するぐらいならline-height:1を指定すればいいのでは。自分が良く理解できていない可能性がある

亀谷 紗奈2021-05-20 01:16:07

 % em でなく、単位なし がいいそうだ。 / 行間が広いと読みやすいけど、スクロールの手間がかかる感じ。ちょっと間延びした印象も。

高杉 光2021-05-20 01:19:10

“ちなみ”

重田 健2021-05-20 01:22:13

デザイン界隈では「バッドノウハウを考える人が優秀」っていう傾向がある。新興宗教と変わらない。

原本 瑛翔2021-05-20 01:25:16

よいまとめです。ありがとうございます。

澁谷 樹2021-05-20 01:28:19

行間読みやすいと忖度捗る。