PhotoshopでWEBデザインを行う際、CSSのline-heightをフォントサイズにあわせて、毎回計算しなければならないのが面倒じゃありませんか？

Photoshopの初期設定のままだと、行送りは「自動」になっていると思います。この場合は、CSSは「line-height:1.2;」です。この行送りの「自動」の値を、文字設定パネルの、「段落」>「ジャスティフィケーション」で変更することが可能です。この機能を利用すれば、一括で％を変更することができ、とても便利です。150％にした時は、「line-height:1.5;」です。しかし、一括指定じゃなくて、段落毎に、ピクセル単位で設定する時は、いちいち計算しなくてはいけなくて、、、泣きたくなりますね。

わたくしも、まいどまいど、うんざりしてしまったので、一覧表を作成しました。

ただし、Photoshopは行送り、CSSは行の高さを指定していますので、微妙な違いが発生してしまいます。予めご注意くださいね。

Photoshoの文字設定と、CSSの文字設定の違い

WEBサイトのデザインカンプをPhotoshopで制作するとき、Photoshoの文字設定と、CSSの文字設定の違いに戸惑ったことはありませんか？

たとえば、文章の行送りの設定をCSSの設定に合わせて作ったつもりだったのに、、、実際に画面にしてみると、Photoshopの時にはなかったはずの空白が、文字の上にできてしまっているのに戸惑った経験はありませんか？

行間とか行送りというのは、どういったものなのか？　PhotoshopとCSSのそれぞれの設定の違いは何なのか？それを理解して、事前に、誤差を踏まえた上で、デザインできるようになるといいですね。そのために、簡単な解説をしたいと思います。

Photoshopは行送り、CSSは行の高さ

行送りとは、文章が複数の行になっている時の、文字の基準とするラインから、次の行の文字の基準とするラインまでの距離を指す言葉です。対して、行間とは、その名の通り、行と行の間隔のことをいいます。なので、同じようで同じではありません。

そして、Photoshopの文字パネルで設定できるものは「行送り」になります。CSSで設定しているものは「行間」と呼ばれていますが、実際には、行間とは微妙に違うものになります。文字を含めた行の高さを設定しているようなものです。

Photoshopの行送り設定

1行目の文字のアンダーラインから、次の行の文字のアンダーラインが行送り。

CSSのline-height設定

CSSでは、line-heightのプロパティを用いて、行間を調整できるとされています。ただし、DTPでいうところの行間とは、微妙な違いがありますので、誤差について認識しておく必要があります。

たとえば、CSSの場合・・・

文字のサイズが24ピクセルで、line-heightを48ピクセルに設定した時、画面でみると、文字の上下に12ピクセルの余白が生まれます。CSSでは、見た目は行間のように見えているだけで、実際に指定しているのは、文字も含めた文章の行ボックスの高さなのです、ですから、48ピクセルの高さのボックスの中に、24ピクセルの文字を中央配置すれば、上下に12ピクセルの隙間が生まれます。

これが、Photoshopでデザインしているデザイナーを困惑させる、文字の上にできる謎の空白の正体です。

※日本語版Photoshopの場合です。環境設定-テキストオプションで東アジアを選択、段落パネルで日本語基準の行送りにチェックが入っているとした場合を想定しています※

https://helpx.adobe.com/jp/photoshop/using/asian-type.html

この記事は、主に、駆け出しのWEBデザイナーさんや、Photoshopの操作になれていない方に読んで頂きたい記事ですが、クライアントさんにも読んでいただいて、CSSの設定とPhotoshopの設定は違うので、デザイン時点の状態と、完成した状態で、寸分違わず同じものを求めるのは、無理があるということを、ご理解いただけたら嬉しいです。