Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What is going on with this article?
@bocc

「line-height」と「行間」と「行送り」

More than 3 years have passed since last update.

デザインって何で作られてますか?

やっぱり多く方は「photoshop」で作ってらっしゃるんじゃないんですかね?
いま所属している会社でも、コーディングする際に頂くデザインデータは基本「photoshop」ですね。
(最近は、sketchもあるから結構、photoshopから乗り換えてる人も多いのかな。)

下記のようなレイアウトを渡される事も多いかと思います。
テキストの部分「line-height」は、どう設定されてますか?

photoshop.png

大抵の方は下記の計算式を使って値を導くと思います。

行送りの数値 ÷ フォントサイズ

この場合は、

28 ÷ 14 = 2

ですね。


では、コーディングしてブラウザで確認してみましょう。

web.png

なんじゃこりゃー
なんか、テキスト上部に隙間(ピンクの帯部分)できてるじゃねーかー

となって、デザイナーさんに「デザインと違うんだけど!」って言われた人も多いんじゃないですかね?

これって何でなの?

そもそも「行送り」「行間」「line-height」って、定義が違うものなんですよ。
定義が違えば、反映のされ方も違うというのは当たり前な話なわけで。

photoshop

line-heightを指定する際に、photoshop上で見る値って「行送り」であって「行間」ではない。
「行送り」と「行間」の定義っていうのは

行送り

  • 文字の大きさ + 次の行までの間隔。

行間

  • 2つの行の間隔。

という感じらしいんですね。

私はずっと「photoshop」で「行間」を設定しているんだと思い込んでました。
でも実際は「行送り」だったわけです。

web

cssで行間を指定するとしたら「line-height!」って思うかと思うんですが、
「line-height」って「行間」を指定する訳じゃなくて「行の高さ」を指定するプロパティなんです。
この「行の高さ」は「line-height」で指定した数値からフォントサイズを引いた数値が行の上下に均等に反映されます。

この場合、

( (14 x 2) - 14 ) ÷ 2 = 7 

となって、上下に7pxずつ反映され、上に隙間が出来てしまうって事になるわけですね。

調べて思った事

ややっこしいな、おい
っていうのを個人的に思った訳で、なんかもっとすぐにわかるツールないかなーと思って、こんな物を作ってみました。
※精度は低いと思うので、あしからず。
Line Height Checker

18
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
bocc
ディレクター兼フロントエンドやってます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
18
Help us understand the problem. What is going on with this article?