「はじめて相談室」では、「はじめてＷＥＢ」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします！「こんなこと聞いていいのかな…」という方大歓迎の相談室です。

今回は、ホームページの余白の入れ方がよくわからないというご相談です。

たけのこの里派！さんのホームページを見せていただいたところ、スペースがうまくいかない原因は「余白を入れる方法」にあることがわかりました！

たけのこの里派！さんは、文章の下にいくつか改行を入れることで余白をとっているんです。こんな感じで。

この方法だと、パソコンでもスマホでも同じように余白があきます。パソコンに合わせて調整をすると、幅のせまいスマホでは、バランス的に余白が多すぎるように見えることがあります。

実はJimdoには「余白」というコンテンツがあります。

これは、ほんとうに「余白をとるだけ」のコンテンツです。
入れても余白が空くだけなのでとっても地味ですが、重要コンテンツなんですよ。

余白コンテンツを入れた直後は「50px」の余白があきますが、空き具合は調整できます。
「px（ピクセル）」は大きさ（高さ）を示す単位で、数字が大きくなるほど余白が大きく空きます。
数字を入れることで調整ができますが、感覚的に調整をしたい場合は図の部分をドラッグすることでも調整できます。

1. スマホで見たときに余白が自動調整される

一番のメリットは、スマホで見たときの余白が自動調整されることです！
図のように、「文章」コンテンツ内で改行を入れたときと、「余白」コンテンツで調整したものとでほぼ同じ高さでスペースを入れたときに、スマホで見ると「余白」コンテンツで設定したスペースがかなり縮んでいるのがわかります。

2. 見出しや画像の前後の余白が調整できる

改行で調整できない「見出し」や「画像」の前後の余白が調整できることもメリットのひとつです。Jimdoでホームページを作ると、コンテンツの前後には自動的にある程度の余白が空くのですが、もっと空けたい！というときには「余白」を使うと思い通りにスペースを空けられます。

3. 余白の大きさが自由に調整できる

3つ目のメリットは、余白が自由に調整できること。改行で余白を入れると「◯行分」の余白が空きますが、たとえば「3行分だと少ないけど4行だと多い」というときに、細かな調整ができるので便利です。

今回は「余白」についてお話してきました。
ホームページの見た目は、余白がうまく取られているかどうかでかなり左右されます。「余白」コンテンツをうまく使って、しっくりくるホームページを作っていきましょう！