プロなら知っておきたい！Photoshop文字設定とCSSプロパティの相互関係

デザイン / 2014.10.28

プロなら知っておきたい！Photoshop文字設定とCSSプロパティの相互関係

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

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

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

文字設定
	Photoshop	CSS
	１.フォントファミリ	font-family
	２.フォントサイズ	font-size
	３.行送り	line-height
	４.トラッキング	letter-spacing
	５.太字	font-weight:bold;
	６.斜体	font-style: italic;
	７.オールキャップス（すべて大文字）	text-transform:uppercase;
	８.下線	text-decoration: underline;
	９.打ち消し線	text-decoration: line-through;

段落設定
	Photoshop	CSS
	１.テキスト左揃え	text-align : left;
	２.テキスト中央揃え	text-align : center;
	３.テキスト右揃え	text-align : right;
	４.均等配置（最終行右揃え）	text-align:justify; text-justify:inter-ideograph;
	５.１行目／左上のインデント	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」などの指定方法がありますが、近年では単位は付けないのが良いとされています。理由としては、こちらのサイトで分かりやすく書かれているので気になる方は参考にしてみてください。