余白

ホームページを見やすくするコツの一つに余白を利用する方法があります。

Jimdoは積み木のように上下にコンテンツを重ねるように作成します。


余白があるだけで『見出し』と『写真』と『ボタン』といったグループを表現することが出来ます。水平線を区切りで多用するよりは、レイアウトを上品に仕上げることが出来るとJimdo研究所では考えています。

 

※改行で余白を作る方法もありますが、改行とは異なり、余白の微妙な高さをピクセル単位で調節することが出来るのが特徴です。ページ内に大量のコンテンツを作る場合には、余白をコンテンツの数だけ作ることになり、結果的に読み込み速度に影響を与える可能性がありますので、その場合には余白よりも改行で対応した方が良いかもしれません。
※一つの余白の高さは5ピクセル~500ピクセルまで1ピクセル単位。

余白のあるなしで見え方はこんなに変わる!

余白のない場合…

適度な余白を入れた場合…


余白がないと、全体にギュギュっと詰まってしまい、なんとなく息苦しいですね。また、ランチメニューとデザートメニューの間が空いていないので、区切りが分かりにくいです。

いっぽう、適度な余白を入れると、余裕を感じることが出来ます。ランチメニューとデザートメニューの区切りも分かりやすいですね。

自分が一番気持ちがいいと感じる余白を入れてあげましょう。

余白の追加方法

余白を入れたい場所にマウスポインタ―を合わせ[コンテンツを追加]から[余白]を選びます。

余白の指定方法には2通りあります。

数値を入力して指定する

px欄に数字を入力して指定します。余白を入れるとき、コンテンツとコンテンツを等間隔になるようにしたり、"見出しの下は10pxの余白を入れる"など自分のルールがあると、ページに統一性がでて美しく見えます。

手動で指定する

スライド矢印部分をマウスで上下に動かすことで、余白のサイズを変えることも出来ます。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422