CSSの余白調整、余白指定法｜margin、padding

CSSの勉強をスタートすると序盤に登場するのがmarginやpaddingといった余白の指定方法です。CSSの中では初歩的な部分とはいえ、勉強をはじめてまもない頃では混乱しやすい部分の一つとも言えるのではないでしょうか。しかし、余白を自由にコントロールできることで得られるメリットはとても大きいので、苦手を乗り越え、ぜひマスターしておきたいところです。そこで、今回はCSSの余白調整にスポットをあててご説明します。

余白を制するとデザインのクオリティが一段上がる

デザインにおいて大切な要素の一つが余白です。余白は美しさを演出するだけではなく、ユーザーの見やすさや使いやすさにおいても大きな効果を発揮します。CSSを使うとソースコードを無駄に膨らますことなく、簡潔な記述で余白をコントロールできます。余白の調整をマスターして、成果を得られるホームページ制作を実現しましょう。

marginとpaddingを理解してデザインの自由度を上げる

marginとpaddingは両方とも余白を指定するプロパティです。ただし、この2つの指定する余白は位置が異なります。marginは要素の外側、paddingは要素の内側の余白を指定します。わかりやすくイメージするに、要素で線で囲んでいると考えてみましょう。要素から枠線までの余白は内側に該当しますのでpaddingです。枠線から外はmarginが制する余白です。

さて、長さを表すプロパティが2つ出てきて、widthとheightとの関係が気になった人もいることでしょう。widthとheightは要素の縦横のサイズです。画像の場合は、その縦横サイズのことを指します。

つまり、外側から「margin」→「padding」→「widthとheight」という構成になります。

marginとpaddingの記述方法

基本的にmarginとpaddingの記述方法は同じです。書き方のパターンをご紹介します。余白はピクセル（px）でもパーセント（％）でも指定可能です。

1）一行でスッキリ記述する

上下左右を一行ずつ記述する方法もありますが、ソースコードが短くて見やすい4方向を一行で記述する方法を先にご説明します。以下のパターンをご覧ください。

・上下左右に20pxの余白を指定します。値を1つだけ指定すると全方向に余白サイズが適用になります。

margin: 20px;
padding: 20px;

・上下左右すべてに任意の値を指定したいときは、上右下左という時計回りの順序で記述します。たとえば、上50px、右40px、下30px、左20pxとする場合は以下になります。

margin: 50px 40px 30px 20px;
padding: 50px 40px 30px 20px;

・上下を共通、左右を共通の値とする場合は、2種のみの記述となり順番は、「上下」「左右」です。たとえば、上下20px、左右30pxなら、以下のように書きます。

margin: 20px 30px;
padding: 20px 30px;

・上と下をそれぞれ指定し、左右のみを共通にする場合は、「上」「左右」「下」の順で記述します。上10px、下30px、左右50pxなら以下になります。

margin: 10px 50px 30px;
padding: 10px 50px 30px;

2）必要な部分の余白のみを指定する方法

今度は部分の余白だけを指定します。top（上）、right（右）、bottom（下）、left（左）に10%を指定した例が以下です。

margin-top: 10%;
padding-top: 10%;

margin-right: 10%;
padding-right: 10%;

margin-bottom: 10%;
padding-bottom: 10%;

margin-left: 10%;
padding-left: 10%;

※ピクセルではなくパーセントを使うと便利な場合

さて、ここでは例として％（パーセント）を使ってみました。余白を指定する際、pxを指定するよりも%の方が便利な場合があるのです。たとえば、ホームページの幅が1000pxと仮定してみます。真ん中に600pxの幅（width）の画像を配置し、左右のpaddingが100pxずつ、同じくmarginが100pxずつといった指定をする場合、細かく幅の計算をして配置しなければいけません。仮にページ幅を変更しようと思った際には、再計算が必要となり手間がかかります。こういった場合、%で設定しておくと細かな計算をし直す必要がなく、レイアウトが楽になります。
パーセントで記述すると、画像のwidthが60%、左右のpaddingが10%ずつ、marginも10%ずつとなります。当然、それぞれのパーセントの合計は100%にならなければいけませんので注意が必要です。つまり、幅をパーセントで指定する場合は、幅に関わるすべての数値指定（width、padding、margin）はパーセントに統一することを忘れないようにしましょう。

▼画像加工で困ったら？手軽なツールを紹介

みんなが使えて導入しやすい！デザイン・動画・サイト制作の【簡単ツール特集】

専門職でなくても使いこなせるデザイン制作関連のツールを特集。弊社のマーケター・営業メンバーや総務・人事担当も実際に使えているツールを、1カテゴリにつき1つピックアップしてご紹介します。

行間をコントロールして文章の見栄えをよくする

行間が少ない文章を読みにくいと感じたことはありませんか。CSSを使えば、ほんの少しのコード記述で文章を読みやすくできます。それでは、行間の調整についてご説明します。

行間の調整には、line-heightというプロパティを使用します。line-heightは、行間を指定した数値にできるのです。
以下の記述例は30pxの行間を指定しています。

line-height: 30px;

px（ピクセル）による指定のほか、%（パーセント）、em（エム）などを使えます。emは、%と似ていて、*1emが100%*に当たります。つまり、

ちなみにpxなどを指定せず数値のみの場合は文字のサイズに応じた比率になります。文字サイズに自動的に対応するので、デザインが崩れる心配がありません。

決して難しいものではありませんが、デザインにもユーザビリティにも大きく貢献できますので、ぜひご活用ください。また、少々変わり種として、exという単位も使えます。exはアルファベットの小文字の「x」の高さを1としています。小文字なので行間が少し詰まった印象になるでしょう。あまり使わないかもしれませんが、このような指定もできるということを覚えておいてもよいでしょう。

読みやすさがぐっと向上する文字間の調整について

行間の次は、文字間の指定についてご説明します。文字間は行間と同じように読みやすさを向上できます。使用するプロパティは、letter-spacingです。letter-spacingもpxやemを使って数値を指定できます。

数値が大きいことで文字間を広げられますが、数値にマイナスを指定することで、文字間を狭くすることができます。
それでは、記述例として以下に文字間を10pxにするケースをご紹介します。

letter-spacing:10px;

ちなみに、文字間を指定なしにした場合は、初期値として0が設定されています。もちろん、初期値で問題ない場合は無理に変更する必要はありません。コンテンツを閲覧するユーザーの立場になって考えて、最適な状態にするように心がけましょう。

自動的に改行をさせないようにして体裁をよくする

文章の折り返しが思うようにいかず見栄えが悪くなった経験はありますでしょうか。文章の表示スペースが少ないときに不自然なところに改行が入ってしまう場合などです。このような場合に利用できるのが自動的な改行を禁止できる*white-space:*というプロパティです。使い方は以下のようにnowrapを指定して記述するだけです。

white-space: nowrap;

まとめ

今回はCSSの余白をテーマに基本的な記述方法をご説明しました。書き方だけを読むと簡単に感じるかもしれませんが、実際のホームページの制作現場で使う場合、様々なケースがあり迷うことも多いかと思います。とくに文字間や行間とは違い、marginやpaddingを使った余白の調整に関しては経験を積まなければ、ソースコードの記述が実際の表示イメージと食い違ってしまうこともありがちです。何度も記述してみるのはもちろんですが、他のホームページでどのようにCSSを記述しているのか等、気になる場合は積極的にチェックしてみることをオススメします。できるだけCSSを読む機会を増やし、確実にスキルアップしていきましょう。

もっとCSSの使い方を知る

CSSで背景を作る。backgroundプロパティの使い方を解説

ホームページ制作を行う際、必要になるのが背景の設定です。背景は面積が広い分、全体の印象を大きく左右する重要な役割を果たします。背景の設定にはCSSを使うことが多いのですが、背景を設定することは決して難しい作業ではありません。背景に好きな色をつけたり、画像を配置することも簡単です。今回はCSSを使った背景の設定方法をご説明します。

CSSでpositionを使い要素を並べる｜static、relative、absolute、fixedを解説

今回のテーマはCSSの要素の並べ方です。static、relative、absolute、fixedを解説します。初心者のうちは、なかなか難しい位置決めですが、少しでもわかりやすく説明したいと思います。

▼画像加工で困ったら？手軽なツールを紹介

みんなが使えて導入しやすい！デザイン・動画・サイト制作の【簡単ツール特集】

専門職でなくても使いこなせるデザイン制作関連のツールを特集。弊社のマーケター・営業メンバーや総務・人事担当も実際に使えているツールを、1カテゴリにつき1つピックアップしてご紹介します。