PhotoshopからはじめるCSS再入門 第4回：ピクセルからの脱出、新しい単位「em」
（この記事では2014年6月公開のAdobe Edge Reflow Preview 8を使用しています）
これまでの連載の中では、要素の幅を％で指定するなど、Photoshopにおけるデザインとは全然違うデザインのやり方を紹介してきました。ピクセルが％になった時点でめまいを感じる人がいるかもしれませんが、今回はさらに、文字の大きさを指定する際に使う新しい単位「em」を紹介します。
テキストボックスの配置
Edge Reflowでテキストを置く方法は、Photoshopとそれほど変わりません。ツールバーから「Add a Text Box（テキストボックスを追加）」をクリックして、ページの好きな場所に置きます。
テキストボックスもボックスの一種なので、前回ご紹介した方法で、枠線や余白を設定できます。文字の大きさや行間などを調整するには、「Styling」タブに切り替えて、「Typography」の各項目を変更します。
文字の大きさの単位
Photoshopで文字を扱う場合、「pt（ポイント）」や「px（ピクセル）」で指定している方もいると思います。1ポイントは72分の1インチで、つまり紙の上では絶対的な大きさを指定できる便利な単位でした。
紙の上では便利だった「1インチ」も、1ピクセルが基本単位となっているコンピューターの世界では扱いづらい単位となりました。何ピクセルが1インチに相当するかは、画面の密度によってまちまちなためです。単位をピクセルで統一したらよさそうに思うかもしれませんが、1ピクセルといっても実にいろいろな大きさがあります。
そこでCSSの世界では、このような絶対的な単位に代わり、相対的な新しい単位「em」も使われるようになりました。
「em（エム）」は、基本の大きさを1としたときに、何倍の大きさで表示するかという指定です。基準の大きさが10pxのところで1.5emを指定すれば15pxで表示されます。つまりemを使えば、デザイナーは常に1.0を基準に文字の大きさの指定すればよいのです。
今置いたテキストボックスのフォントサイズには「1em」が指定されていますので、基準の大きさのままで表示されています。
ちなみにエムと呼ばれるのは、紙の時代にアルファベットの「M」を基準にしていた名残りのようです。
基本の大きさ
Edge Reflowで、画面下の「Page」をクリックし、「Styling」タブに切り替えてみてください。
「Base Size（基準の大きさ）」の欄を見ると、16pxになっていると思います。
これをフロントエンドエンジニアに伝えないと、「1emって何ピクセルよ？」と聞かれることになります。
会社によっては、計算しやすいようにこの基準サイズを10pxにしているところもあるでしょう。
レスポンシブWebデザインでは、画面の幅や解像度に依存しないように、なるべく％やemなどの相対的な大きさの指定をしながらデザインを進めていきます。もちろん何が何でもということではなくて、必要な場合にはpxも使います。
部分的なスタイル
Photoshopと同じようにEdge Reflowでも、テキストボックス中の一部の文字を選択して、その部分だけ大きさなどを変えることができます。
テキストボックスに文章を2行書いて、2行目のみを選択し、「Size」を2emに変更してみましょう。
2行目だけ大きくなりました。画面下を見ると、テキストボックスの中に「Span」というものができたのがわかります。
spanという英単語は「範囲」とか「期間」という意味です。「短いスパンで更新してよ」とか、横文字好きの代理店の方がよく使いますね！
さらにCode（コード）アイコンをクリックすると、このスパン（範囲）に2emが指定されていることがわかります。
２倍の２倍？
さて、もう１つ同じようなテキストボックスを作ってください。今度はテキストボックスを作ったら、すぐにSizeを「2em」にします。
ボックス内の文字の基本の大きさが2emになりました。
この状態で2行目を選択して「2em」を指定するとどうでしょう。
このスパンの文字の大きさは、さきほどより明らかに大きいです。大きすぎるくらいです。
emは、その場所における文字の大きさが基準になります。このテキストボックスの2行目における基準の大きさはすでに2emでした。そこにさらに2emと指定されたので、結果的に4倍の大きさで表示されました。
現実の世界で例えるとこうなります。
学生街で大盛りを頼むと、もともとのサイズが大きいので、超大盛りが出てきて困ることはよくありますよね。僕は危険を察知すると「大盛りはどれくらい大盛りですか？」という質問をするようにしています。大抵のお店の人は「em」で答えてくれます。
行の高さ
さて、次に行間です。正確には、CSSの世界で指定できるのは、行間ではなくて「行の高さ」です。
CSSでは、行間は指定できなくて、代わりに行の高さを指定できます。行の高さを指定することによって生まれる余白は、文字の上下に均等に入る仕組みになっています。
標準の状態では1emが指定されています。その場所における文字の大きさが基準になります。行の高さに1emを指定すると、前後に余白はあかず、ぎっちり詰まります。1.6emとすると、上下に0.3emずつ余白ができるので、見た目の行間は0.6emになります。
ウェイト
文字の太さはPhotoshopなどでは、「L」や「B」などフォントのウェイトを直接指定するでしょう。CSSの世界では100〜900までの数値で指定します。
標準は400です。どの数値がどのウェイトで表現されるかはフォントによって違います。
この欄には数値の代わりに「normal」（400を指定するのと同じ）や「bold」（700を指定するのと同じ）と入力することもできます。どんなウェイトを持ったフォントで表示されるかわからないテキストは、これらのキーワードでウェイトを指定しておけば間違いないでしょう。
タイプフェイスの指定
Webページでは、環境によってインストールされているフォントが違うため、実際にどんなフォントで表示されるかは分かりません。Windowsで見る人と、Macで見る人では表示されるフォントが全然違います。
このためフロントエンドエンジニアは、とんでもないフォントで表示されないように、次のようなコードを書いて凌いできました。
font-family: Verdana, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
ブラウザはこの順番でフォントを探していって、最初で見つかったフォントで表示しようとします。しかし所詮はただの優先順位の指定で狙ったフォントで表示されるとは限りません。見出しは画像文字にするしかありませんでした。
Webフォント
そこで登場したのがWebフォントです。フォントがないなら、フォントをページに埋めてしまえという発想です。Edge Reflowでは欧文の無料Webフォントサービス「Edge Web Fonts」を簡単に使うことができます。
新しいテキストボックスを置いて、Typeface（タイプフェイス）の欄にある「T+」というアイコンをクリックします。
フォントの一覧が表示されます。ここでは、左側のフォントの種類から「Script（筆記体）」を選び、「Damion」というフォントを選択して、フォントパネルの外側をクリックして決定します。
たったこれだけの操作でWebフォントが有効になりました。簡単ですね。
Webフォントを指定することで、どの環境でも同じように表示されますが、使い過ぎには注意しましょう。ページを表示する際に、フォントの情報も一緒にダウンロードさせることになるので、Webフォントの量やウェイトの数によっては表示までに時間がかかるようになり、残念な感じになります。
今回はCSSの世界のテキストについて紹介してきました。新しい単位「em」は、細かい数字を気にせずに、常に1を基準に考えればよいので、慣れれば今より楽にデザインできるでしょう。Webフォントも活用しながら、これからのWebデザインをEdge Reflowで体験してみてください。