無料相談受付中
オファシムの広告掲載枠

ホームページ制作

初心者によるCSS講座!marginとpaddingの違い

投稿日:

今回はCSSの講座です!
サイトをデザインする上で必ず必要になるmarginpaddingの違い。
また、実際にどう設定していくのか。
早速初めていきましょうー!

marginとpadding

そもそもmarginってなんなの?
paddingもだけど・・・って感じですよね。わかります。僕もなんのこと???でした(笑)
簡単に言ってしまうと、それは余白です。
どちらもホームページの余白を設定するものなんです。
まだよく分からないですね(笑)

paddingって?

paddingは要素の内側の余白の設定のことです。
???という感じだと思うので、まずはこの写真をご覧ください。

このホームページのトップ画面を検証で開いたものになります。
よく見ると青色とオレンジ色、緑色で分かれているのがわかります。
この青色がページの内容になります。
今回ですと、記事のラインナップですね。
オレンジ色と緑色、この二つがそれぞれmarginと paddingになります。
同じ余白なのに、何が違うのー???
この写真の一部を拡大すると

cssの設定とその図が書いてありますね。
理解するために数字をいじってみましょう。
(実際に変更して見ると理解が深まりますよ!)
では、
padding:10px;
これを
padding:50px;
に変更して見ると・・・

上の写真と比べ、記事のラインナップの周りの余白が広がっていますね!
今変更したpaddingは要素の内側の余白の設定になります。
投稿のラインナップが内側にギュッとなったのも写真を見比べてわかります。

marginって?

ではmarginは?
要素の外側の余白の設定になります。
先ほど同様に、変更してみましょう。
margin-right:340px;
から
margin-right: 500px;
に変更して見ると・・・

記事のラインナップの右側の余白が広くなったのがわかると思います。
これが要素の外側の余白の設定、つまりmarginの設定になるわけです。
当社のホームページのレイアウトを考えて、margin-rightは340pxがちょうどいい大きさ。といった具合に余白をうまく設定して、見やすくて、良いホームページを作っていきましょう!

あなたの目的を達成するためのホームページを作ります。

オファシムはSEO対策、記事コンテンツの制作を主に行なっている会社ですが、ホームページ制作も承っております。ホームページ制作をメインで行っているわけではないのですが、オファシムでは自社運用しているWebサイトが多数あるため、しっかり本来の役割を理解したホームページ制作が可能です。

Web制作のエンジニア集団ではないので、特殊なコーディングスキルは持ち合わせていません。しかし、多ジャンルのサイトを自社運用してきた実績を基に、クライアント様の目的を達成できる最適な構成を作り上げます。

オファシムが意識しているのはホームページの見た目だけではなく、その中身です。

  • ユーザー数を増やしたい
  • 購入者数を増やしたい
  • 自社のブランディングがしたい

あらゆる目的を理解し、最適なサイト構成を行います。初めての方も、まずはお気軽にご相談ください。

ご相談、お見積もりは無料ですので、お気軽にお問い合わせくださいませ。

-ホームページ制作

Copyright© 株式会社OFASIM(オファシム) , 2020 All Rights Reserved.

MENU