マージンとパディングを理解する!

先日、マージンとパディングの違いは?で少し触れた、

マジーンとパディングについて詳しく勉強していこうと思います。

 

まずは画像を使いまわしておさらい…(笑)

在宅ママのデザイン学習室

マージンとマディング、どっちがどっちや!?

と思っていましたが、

”マージンをもつ”なんて言葉がありますよね。

余裕をもって、という感じの意味です。

 

各要素の周りに余裕を持たせるのが”マージン”です!

 

パディングは間隔。

各要素の中にあるテキストやイメージファイルと枠線の間に間隔をもたせます。

 

枠線を指定しない場合、

マージン、パディングのどちらを指定しても見た目は変わりません

 

ですが、枠線がある場合は、見た目が変わります

 

例)マージン、パディングにそれぞれ10pxを指定

・html

<p style=”border-style: solid; padding: 10px;”>パディングに10pxを指定</p>

<p style=”border-style: solid; margin: 10px;”>マージンに10pxを指定</p>

 

・ブラウザの表示

在宅ママのデザイン学習室

 

おわかりでしょうか…?

パディングは文字の周りに余白が、

マージンは枠線の周りに余白が出来ています。

 

このマージンとパディングの設定は、

テーブルなどでもどちらを指定するかで見た目が変わりますので、

是非覚えてご活用くださいね!

 

パディング

 

padding:値

文字列やイメージファイルなどと枠線の間隔を指定します。

値は「数値+単位」で指定します。

指定した数値が上下左右すべてに適用されます。

 

上下左右の設定

 

padding-top:値

内容と枠線(上)の間隔を指定

padding-right:値

内容と枠線(右)の間隔を指定

padding-bottom:値

内容と枠線(下)の間隔を指定

padding-left:値

内容と枠線(左)の間隔を指定

 

マージン

 

margin:値

枠線外側の余白を指定します。

値は「数値+単位」で指定します。

指定した数値が上下左右すべてに適用されます。

 

上下左右の設定

 

margin-top:値

枠線上側の間隔を指定

margin-right:値

枠線右側の間隔を指定

margin-bottom:値

枠線下側の間隔を指定

margin-left:値

枠線左側の間隔を指定

 

上下左右を一度に指定する

 

上下左右同じ値、または上のみのように一部だけの場合は、

上に記載した方法で指定をすればよいですが、

上は10px、右は20px、下は30px、左は40pxとバラバラに指定をしたい場合、

全てのCSSを記述するのは正直面倒ですよね…

 

そこで、一括で指定する方法があります!

 

margin:上 右 下 左

 

これです!

間に半角スペースを入れて数値を入れれば、

上下左右を一度に指定できます。

順番は上から右回り

この指定は、マージン、パディングはもちろん、

イメージファイルの配置などでも使えます。

間隔をあけない場合は「0px」にすればOK!

 

例)マージンに上は10px、右は20px、下は30px、左は40pxを指定

・html

<p style=”border-style: solid; margin:10px 20px 30px 40px;”>上は10px、右は20px、下は30px、左は40px</p>

 

・ブラウザの表示

在宅ママのデザイン学習室

 

それぞれ指定した値で余白ができています!

これは便利!

 

実のところ、テキストで見ていて、こんなに上下左右何度も指定したことあったかな…?

と思って調べました(笑)

 

”上から時計回り”を忘れずに!!

 

 

余白の使い道…

 

あなたのホームページに余白はありますか?

「サイドバーががら空きだ!」なんて思いましたか?

 

ここで私が話す余白は、”文字と文字の間隔”です。

 

実際のところ、サイドバーに情報がありすぎると

お客様はどの情報を見ればいいのか迷ってしまいます。

 

迷う=行動しない

 

です!

ホームページは伝えたいことをはっきりさせるために、

シンプルにすることがベストです。

 

この時、文字がビッチリでは読む気も失せます…

活字が苦手な人ならなおさらです。

 

文字と文字、イメージとイメージ、見出しと本文など…

それぞれのコンテンツに余白をもたせることで、

見やすく、そして何を伝えたいのかがわかりやすくなります

 

伝えたいことをつめこむあまり、

読みにくい、読みたいと思わない、わかりにくいホームページになっていませんか?

 

是非、余白をうまく活用して、

お客様が読みたくなるホームページ作りをしてくださいね^^

 

【CSS・HTMLをもっと学びたい方へ】

  • 独学で勉強しているけど限界…
  • プロに質問したい…
  • 基礎から学びなおしたい…

など、CSS、HTMLをきちんと学びたい!という方にはWEBデザイン講座がおすすめ!

質問回数無制限に加え、就職サポートまでついたおすすめのWEB講座は「テックアカデミー」
今ならキャンペーン実施中でsy!

>>「テクアカデミー」無料動画説明会はこちら

コメントを残す

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