余白って何？情報をまとめる間隔と揃え方の基本

文字や画像を置いたのに、なんだか読みにくい。そんなときは、色を増やす前に余白と揃える位置を見てみよう。

この記事の目標は、「関係のある情報を近づけ、違う情報のまとまりを離す」こと。デザインソフトがなくても、ブラウザで開く作例で間隔の違いを試せるよ。

余白は、何もない場所ではなく区切り

余白は、文字や画像のまわりにある空いた部分。見出しと説明が近ければ同じ組に見えやすく、別の話題との間が広ければ区切りを見つけやすくなる。

たとえば、お店の案内なら「営業時間」とその時間を近づけ、「連絡先」とは少し離す。すべてを同じ間隔で並べるより、何と何が組なのか伝わりやすいね。

ただ広くすればよいわけでもない。見出しから本文を離しすぎると、何についての説明か分かりにくくなることもあるよ。

外側の間隔と内側の余白を分けよう

カードのような四角い枠を想像してみよう。

CSSはWebの見た目を指定する仕組み。paddingは内側の余白、marginは外側の余白を指定する性質があるよ。gapは、対応するレイアウトで要素同士のすき間を指定するもの。似た「空き」でも、どこを変えるかが違うんだ。

作例で、二つの空きを動かしてみる

必要なのはブラウザだけ。余白の作例を開くと、説明カードと二つのスライダーが出る。

1. 最初は文章と枠の距離を見てみよう。
2. 「内側の余白」を動かす。文字と枠の間が広がれば成功。
3. 「カード同士の間隔」を動かす。別のカードまでの距離が変わるか見る。
4. 両方を大きくしすぎず、見出しと説明を一組として読める位置を探す。

数値の単位はpx。ここでは画面上の長さを指定するCSSの単位として使っているよ。ブラウザの拡大率や画面の条件もあるので、紙のミリメートルと同じとは考えないでね。

揃える位置を一つ決める

余白と合わせて、見出し・本文・ボタンの左端など、揃える位置を決めよう。文章が長いときは左揃えを出発点にすると、次の行の始まりを見つけやすい。

「すべて中央」「全部同じ大きさ」にする必要はないよ。まず一つの基準線で情報を整理し、強調したい部分だけに違いを付けると、何を読んでほしいか考えやすくなる。

うまくいかないときの確認

• 文字が枠に近いなら、カードの内側を見直す。
• 別の話題が一つに見えるなら、まとまり同士の間隔を見直す。
• 空きが多すぎて関係が切れるなら、同じ組の要素を近づける。
• スマホで窮屈なら、文字を小さくする前に段組みと固定サイズを見直す。

作例では内側を16から32、カード間を12から28へ変えたときに、ブラウザがその値を適用することを確認した。見やすさは文章量や用途でも変わるので、最終的には実際の内容を入れて確認しよう。

文字そのものの間隔を変えたときの崩れは、行間・字間とレイアウトの確認へ。余白と文字間隔は別の観点として扱うと整理しやすいよ。