こんにちは、ディフェンスに定評のあるヨシミです。
これを見てバスケットボールを想像した人はきっと同世代です。

今日は『余白』についてお話しようと思います。

見やすいwebページを作るにあたって『余白』も重要なファクターの1つ。ブティックなどでもスペースが贅沢に使われていると、商品が素敵に見えることってありますよね。

余白とは何もない空白部分ですが侮ることなかれ、
『大切なものは目に見えない』と星の王子様のキツネも言っていました。

フォームに適切な余白

スマホで入力項目があるサイトでは、余白があるサイトと余白がないサイトとで、入力のしやすさがまったく違います。

パソコンで難なく入力できるサイトだからといって、それをそのままスマホサイトに転用できるかと言ったらそうでもありません。

パソコンで十分な余白とスマホで十分な余白の大きさは違うからです。

efo-form01

その違いの理由は、操作の主体がマウスポインタであるか、指であるかの差にあります。

パソコンは大きな画面で小さなポインタを操作するため、ピンポイントに任意の箇所をクリックできます。比べてスマホはどうでしょうか。

画面は小さいし、操作の主体はポインタよりはるかに広い面積を持つ指です。

しかも片手で操作する場合、最も面積の広い親指で操作する人がほとんどではないでしょうか。ただ見るだけのサイトなら良いのですが、入力項目のあるサイトでは上手くカーソルインできないことがストレスとなり、離脱の原因にもなってしまいます。

そのためスマホサイトでは、より広い余白が必要になります。

余白をあける方法、その種類

webページで余白を作るプロパティは2つあります。margin(マージン)とpadding(パディング)です。

私がまだおしりに殻をつけていたヒヨコの頃、「なんで余白の指定が2種類あるの?1つでよくない?」と、ニワトリに聞かれたら笑われちゃうようなことを思っていました。

しかし、両者には明確な違いがあります。簡単に言えば「marginは枠線の外側の余白」「paddingは枠線の内側の余白」です。

そう、両者を理解するには枠線を基準にすると分かりやすいのです。下に図示してみました。

efo-margin-padding

と、こんな感じの領域区分になります。では実際に上下左右にそれぞれ10px指定してみた時のイメージを図示します。

background-color(背景色)の範囲に注目してください。

efo-margin-padding2

background-color(背景色)とborder(枠線)は双方に同じものを指定しています。範囲領域が全然違いますね。

paddingは枠線の内側の領域のため、要素にbackground-colorを指定すると要素と同じように色がつきます。

ここではmarginの領域を分かりやすくするため、便宜的に色を付けています。

ですが、実際にはmarginは枠線の外側の領域ですので、要素にbackground-colorを指定しても色は付きません。

marginの相殺

marginとpaddingの大きな違いとして「marginの相殺」と言われる現象があります。

これは縦に並んでいる要素のmarginが、重なり合う場合に起こる現象です。

下図は上の要素には下に余白(margin-bottom)を、下の要素には上に余白(margin-top)を指定したものです。

efo-margin

上の画像のようになりそうなものですが、実際には下の画像のようになります

efo-margin2

縦方向のmarginが重なり合う場合は、上と下のmarginの合計ではなく、marginの値が大きい方が優先されます。

つまり、下方向に20pxのmargin、上方向に10pxのmarginをかけた場合、双方の間には20+10=30pxの余白ができるのではなく、大きい方が優先されて20pxの余白ができます。これを「marginの相殺」といいます。

これからの余白

余白とは何もない空白部分を指しますが、デザインにもユーザビリティにも影響を与える大切なものです。

スマホが広く普及されている昨今では、その重要性はますます高まっています。特に入力フォームがあるサイトではスマホ対応することを強くオススメします。

イチからスマホサイトを構築するのは手間がかかりすぎる!そう考える方は是非弊社に相談を。

いつかは人間の方が進化してスマホを操作しやすい指になるかもしれませんが、進化を待っている間は上に記載したようなコードを書いてスマホ対応するほかありませんね★