余白


余白は「字や絵などが書いてある紙面で、何も記されないで白く残っている部分」のことをいいます。余白の無いレイアウトは窮屈な印象を与え、文字や情報(図や写真など)の視認性、可読性を下げることにつながります。

sample_301

濃いレビューを書くコツは、人それぞれが持っている個性を生かし、自分にしか書けないレビューを意識することにある。個性を知るためには「自分の特長」をいかに理解するかにかかっているので、自分を見つめ直すことも大切な作業になる。

レビューを読んでもらうためには、文章がとても重要になってくるが、同じ文章でも読みやすいレイアウトで書かなければいけない。Webサイトのレイアウトを調整するためには、HTMLやCSSといった簡単なプログラム言語を知らなくてはいけないため、ハードルは高い。

ボックスに余白がないため、狭く窮屈な印象を受ける。

sample_302

適切な余白をつけてあげる。行間は標準のままにしてあります。

濃いレビューを書くコツは、人それぞれが持っている個性を生かし、自分にしか書けないレビューを意識することにある。個性を知るためには「自分の特長」をいかに理解するかにかかっているので、自分を見つめ直すことも大切な作業になる。

レビューを読んでもらうためには、文章がとても重要になってくるが、同じ文章でも読みやすいレイアウトで書かなければいけない。Webサイトのレイアウトを調整するためには、HTMLやCSSといった簡単なプログラム言語を知らなくてはいけないため、ハードルは高い。

余白を大きく取ることで、ゆとりが生まれ可読性が上がる。

sample_303

単純なテキストボックスでも、余白をとると可読性が上がります。

濃いレビューを書くコツは、人それぞれが持っている個性を生かし、自分にしか書けないレビューを意識することにある。
濃いレビューを書くコツは、人それぞれが持っている個性を生かし、自分にしか書けないレビューを意識することにある。

短い語句でも同様に余白があると可読性が上がります。

濃いレビューを書くコツ
濃いレビューを書くコツ
濃いレビューを書くコツ
濃いレビューを書くコツ
余白を大きく取ることで、ゆとりが生まれ可読性が上がる。

解説

Webサイトの場合、横のスペースが限られているためより多くの情報を詰め込もうと余白を削りがちになります。しかし、読んでもらうためには余白をとることも重要です。

ただ余白を空ければいいというわけではなく、左右(あれば中央)の余白の幅を統一するなど余白のバランスも重要になってきます。

CSSでの設定方法
CSSで余白を設定するときには「margin」プロパティ及び「padding」プロパティを使用します。詳細な説明はここでは省きますが、それぞれ特性があるので使い分ける必要があります。

著者の場合は、大きな単位(ボックス単位)での余白には「margin」を小さな単位(テキストボックスなど)では「padding」を使うのを基本と考えています(もちろん例外もあります)。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>