PhotoshopからはじめるCSS再入門 第3回：余白のまわりの余白

（この記事では2014年6月公開のAdobe Edge Reflow Preview 8を使用しています）

Adobe Photoshopでページをデザインするとき、要素のまわりにあるのは「余白」です。余白を作る意図にはいろいろあっても、余白は余白であって種類などありません。

ところが、CSSの世界では余白には2種類あります。マージン（margin）とパディング（padding）です。困ったことに日本語にするとどちらも「余白」になります。

２種類の余白

「マージン」には「へり」とか「端」という意味があります。例えば「川」におけるマージンは川岸のことです。何かの外側にある余白をマージンと呼びます。

「パディング」には「詰め物」「当て物」という意味があります。まくらや肩パッドを思い浮かべるといいと思います。何かの内側にある余白をパディングと呼びます。

CSSの世界ではこの２つの余白の境界に境界線を描くこともできます。

これらを朝食のお皿で説明するとこのようになります。

Edge Reflowにおける幅と高さ、マージン、パディング （公開時に誤ったイラストが表示されていました。お詫びして訂正します）

マージン

Edge Reflowで何か置くと、置かれた場所に応じてマージンが自動的に設定されます。画像を置いてみましょう。

Edge Reflowを起動して、適当な画像をFinder（Windowsの場合はエクスプローラー）からドラッグ＆ドラッグして配置します。元の画像が大きすぎる場合はLayout（レイアウト）パネルで「Size」で幅を設定して縮小しましょう（例えば25%）。

マージンは「Margin」の5つの入力欄を使って、上下左右にそれぞれ設定できます。

例えば下図のようにして、上マージンに30pxを指定してみましょう。

数値と単位を直接入力する以外にも、
・入力ボックスの中で上下の矢印キーを押す（Shiftキーを押しながら上下キーを押すと大きく変化する）
・マージンの各欄の左にあるアイコン部分を左右にドラッグする
などの方法で設定できます。

マージン指定の最初の入力ボックスは、「まとめて」設定する欄です。ショートハンド（速記？）と呼ばれます。ここに上、右、下、左の順でまとめて書くこともできますし、これに続く４つの入力ボックスにそれぞれ書いて個別に指定することもできます。どちらの方法で書いても同じ結果になります。

もし、上下左右のマージンを全て同じにしたいときは、このショートハンドの欄に1つだけ値を入力します。

パディング

パディングもマージンと同じ要領で「Padding」の欄で指定しますが、最初はすべて0になっています。実際に設定してみましょう。

Paddingの最初の入力ボックスに「20px」と入力します。

境界線で囲まれているエリアの大きさは変わらず、その内側に余白ができ、画像がより小さくなりました。

このように、要素の大きさを決めている境界線の内側の余白がパディング、外側の余白がマージンです。

ボーダー

境界のことをボーダーといいます。ボーダーにはPhotoshopのストロークと同じように、線は種類や太さを選べます。Edge Reflow上では青い境界線が表示されていますが、これは単なるガイド線です。この位置に実際に線を表示させることもできます。「Styling（スタイリング）」パネルの「Borders」で指定します。

実際に指定してみましょう。「Color」で色を指定すれば、幅1ピクセルの実線が上下左右に表示されます。Redius（角丸の半径）を15pxに、Width（幅）を4pxに設定します。

Photoshopのシェイプとは違って、上下左右それぞれに違う設定をすることもできます。

角丸のボーダーを描くことができました。

それではここまで設定した内容をCSSで確認してみましょう。

Edge Reflowの下のほうにあるCode（コード）ボタンをクリックすると、今までに設定した内容がコードとして見れます。これをコピーしてエンジニアにメールで送ってもよいでしょう。

背景画像

Photoshopで繰り返しのパターンなどを敷き詰めて背景を作るときは、パターンを定義して塗りつぶすことが多いのではないかと思います。同じようにCSSの世界でも、写真などの画像と、背景画像は扱いかたが違います。

まずPhotoshopで、背景に使うパターンをGIFやPNGファイルとして書き出しておきます。

Edge Reflowで、パターンで塗りつぶしたいエリアにボックスを置きます。

「Styling（スタイリング）」パネルを開きます。Backgrounds（背景）の「画像レイヤーを追加」ボタンをクリックします。

用意したパターン画像ファイルを、ドラッグ＆ドロップします。

繰り返しパターンとして設定できました。

大きな画像を背景にする

ここからがCSSの面白いところですが、単に繰り返して塗りつぶすだけではなく、Position（位置）をずらしたり、Scaling（拡大縮小）で大きさを変えたり、Repeat（繰り返し）でそもそも繰り返しを行わないように設定することもできます。

これを応用すると、Photoshopであらかじめトリミングした画像を使うのではなく、大きな写真を読み込んでその一部をページ上でトリミングして表示するということが可能になります。（ユーザーの体験としてよいかどうかは別として）

実際にやってみましょう。

ページの上のほうに空間を作って、そこに横長のボックスを置きます。

さきほどと同じ要領で背景画像として大きな画像を設定してください。

トリミング位置がよくないですね。

今設定した背景画像をクリックして、Position（位置）を変更してみてください。

この状態でハンドルを左右に動かして画面の幅を変えてみましょう。

幅が変わったときにトリミングの範囲が変わっていく様子を見ていると、決まった幅の画像を使っていたPhotoshopを使ったデザインのアプローチとは、まったく違う部分があるということが分かると思います。

パディングの背景

さて、この状態でボックスにパディングを20pxに設定してみます。

少し薄くて分かりにくいかもしれませんが、パディングの領域が薄い青で表示されています。

同じように見える余白でも、マージンは外側にあって無色透明ですが、パディングは内側にあって、背景として指定した色や画像が表示されるという違いがあります。

パディングがある場合の位置の基準

ツールバーの左から3番目にある、Add a text box（テキストボックスを追加）をクリックします。

さきほどのボックスの中でクリックして、テキストボックスを配置します。

適当なテキストを入力します。

「Styling（スタイリング）」パネルを開きます。色を変えて、Size（サイズ）を「3.6em」にします。（テキストの扱い方については次回以降に詳しく紹介します）

「Layout（レイアウト）」パネルに切り替えて、テキストボックスのマージンをすべて0にしてください。

さてここが今回一番重要なところです。テキストはマージンを0にしたにも関わらず、ボックスの左上にぴったりくっつきませんでした。テキストはパディングの分だけ内側に寄っています。これがパディングの役割です。ボックスにパディングを設定すると、中の要素の基準となる位置がずれるのです。

さて、今回はCSSの世界に存在する2つの余白について紹介してきました。連続しているように見える余白でも、見えない境界線の外側と内側では違うということを覚えておいてください。