Pocket

こんにちは、Webデザイナーの斧山です!Photoshopで文字組みを行う際には「トラッキング」や「行送り」など様々な設定を行います。しかし、いくらPSD上で完璧に仕上げていても、いざコーディングをするときに正しくCSSが組めていないと、せっかくの“こだわり”が無駄になってしまいます。
今回は意外と曖昧になりがちなPhotoshopの文字設定とCSSプロパティの相互関係をまとめてみました。それでは早速いってみましょう!

 

Photoshop文字設定とCSSプロパティの関係表

Photoshopの文字設定とCSSプロパティの関係をまとめてみました。

文字設定
Photoshop 文字設定 Photoshop CSS
1.フォントファミリ font-family
2.フォントサイズ font-size
3.行送り line-height
4.トラッキング letter-spacing
5.太字 font-weight:bold;
6.斜体 font-style: italic;
7.オールキャップス(すべて大文字) text-transform:uppercase;
8.下線 text-decoration: underline;
9.打ち消し線 text-decoration: line-through;
段落設定
Photoshop 段落設定 Photoshop CSS
1.テキスト左揃え text-align : left;
2.テキスト中央揃え text-align : center;
3.テキスト右揃え text-align : right;
4.均等配置(最終行右揃え) text-align:justify;
text-justify:inter-ideograph;
5.1行目/左上のインデント text-indent

 

Photoshopの数値をCSSに正しく変換する方法

WebデザインをPhotoshopで作る際は「px単位」で作ると思いますが、コーディングの場合は必ずしもpxとは限りません。ここではPhotoshopの文字設定の数値を正しくCSSで記述するためのポイントをまとめました。


フォントサイズ

フォントサイズの指定は、font-sizeプロパティで行います。
font-sizeの指定は「px指定」「em指定」などいくつかの指定方法があります。
「px指定」は文字通りピクセル単位の指定。環境によって変化しない絶対単位です。
「em指定」は文字の高さを基準にした単位で1emは1文字分です。bodyなどでfont-sizeの指定がない場合、1em=16pxが基準です。
一般的には、「px指定」ではブラウザのズーム機能が使えないなど、ユーザビリティの観点から「em」「%」で指定するのが一般的です。

■Photoshop上で「px」で指定したものをコーディングの時に「em」する場合

この場合は、いろいろ方法がありますが、以下のような計算でem値を割り出します。

em指定したい要素のフォントサイズ(px)÷ 親となる要素のフォントサイズ(px)

親のフォントサイズが14px、em指定したい要素が20pxの場合は、20 ÷ 14 =1.42857…となるので、「font-size:1.43em;」と記述します。割り切れない場合は小数点以下第2位まで、それ以降は切り捨てとしています。(IEが小数点以下第2位までしか読まないため)


行送り

行送りは改行した文字の縦方向の余白のことです。行送の設定をCSSで指定する場合は line-height を用います。
line-height の設定も font-size と同様に「em」「px」などの指定方法がありますが、近年では単位は付けないのが良いとされています。理由としては、こちらのサイトで分かりやすく書かれているので気になる方は参考にしてみてください。

line-height の値には単位なしが良いとされる理由 – lucky bag

■Photoshopの行送りを line-height で表現するポイント

line-heightの値は以下の計算で出すことができます。

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

例えば、「フォントサイズ:20px 、行送り:36px」の場合は、
行送りの数値:36 ÷ フォントサイズ:20 = 1.8 となるので、「line-height : 1.8 ;」と記述します。


トラッキング

トラッキングとは文字と文字のスキマのことで、数値が大きいと余白が増えていきます。
この数値はPhotoshop上では単位が書かれていないのですが、以下の計算で「em」に変換することができます。

トラッキング数値 ÷ 1000

Photoshop上で「トラッキング:50」とした場合は、50 ÷ 1000 = 0.05 となるので「letter-spacing : 0.05em ;」となります。


いかがでしたでしょうか?数値の計算などは電卓片手に計算して行く作業なので、一見デザインとはほど遠い作業のような気もしてきますが、こだわってデザインしたものを正しくHTMLで表現できたときのうれしさはひとしお!ぜひ、ご活用ください!!

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。