Margin-top bottom 両方

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

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

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

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

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

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

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

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）はパーセントに統一することを忘れないようにしましょう。

CSCSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。ユーザーユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。CSCSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。ページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。ページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。レイアウトレイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト（ウェブレイアウト）」と呼ばれる、ホームページにおけるレイアウトについて説明します。

Video liên quan