【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

CSSのmarginとpaddingで余白を設定しよう

CSSのmarginとpaddingで余白を設定しよう

吉永です。今回第一回目の記事になります。
CSSでwebページを作成するにあたり、ボックス関連の分野は難しいと感じる方が多いと思います。それは、paddingとmarginの違いが曖昧なままだからだと考えられます。

そこで、この記事ではpaddingとmarginの違いを明確にしながら、実際の現場で活かせるように解説します。

marginとpaddingとは?

「mariginは境界線の外側の余白をつくる」、また「paddingは境界線の内側の余白をつくる」と多くの本やサイトでは説明されています。しかし、多くの方はあまり違いを考えずにこの二つのプロパティを使用しているのではないでしょうか。

paddingとmarginの使用箇所を明確に区別する必要がない箇所も確かにあります。しかし、可変するサイトを制作する場合は違いを明確にしないと、デザインが大きく崩れてしまうこともあります。ここからの解説で違いを明確にしておきましょう。

marginとpaddingで余白を設定する

borderを使用して、違いを可視化してみる

borderを使用すると、paddingとmarginの間に境界線を引くことができるので違いを可視化できます。ここで注目すべきポイントは、borderの位置がmarginとpaddingの値に依存している点です。

つまり、borderのプロパティを使う際は、marginとpaddingの値にも注意を向ける必要があるということです。以下の例のように記載すると違いがよく分かります。

borderを使って違いを可視化

参考URL:http://yoshinaga-test.aispr.jp/csstest





<div class="boxa">boxA</div>




       .boxa{
                 margin: 20px;border: solid;background-color:yellow;
                 padding: 10px;
                }

marginとpaddingの値を変更してみる。

次にmarginとpaddingの値を変更してみましょう。まず、paddingを使うと、境界線の内側の余白が変化しています。このことから、ボックス内の文字位置の調整に向いていることが分かります。

逆に、marginを使うと、境界線の外側の空白が変化しています。このことから、marginはボックス同士の間の余白を作るのに向いているということが分かります。

また、二つのボックスが隣接している際、marginは隣接しているmarginの中で、最大の値だけが有効になります。つまり、隣接するmarginは重なり合うということになります。

逆に、paddingはいくら大きくしても、重なり合うことはないです。このような違いから、余白の長さに変化が生じますので、注意する必要があります。以下の例のように記載すると違いがよく分かります。

marginが重なってしまうこと

 

参考URL:http://yoshinaga-test.aispr.jp/csstest2


<div class="boxa">boxA</div>

       

<div class="boxb">boxB</div>

     .boxa{
                margin: 20px;border: solid;background-color:yellow;
                padding: 10px;
               }
     .boxb { 
                 margin: 20px;border: solid;  
                 background-color: lime;
                 padding: 10px; 
                } 

レスポンシブ化に際しての注意点

paddingとmarginともに、ボックスの位置、大きさにとても影響を与えてしまうので、サイトのレスポンシブ化に際しては注意が必要です。特に余白を大きく取り過ぎるとデバイスによっては、ボックスの横幅・縦幅一方が大きくなり過ぎることもあるので、確認を怠らないようにする必要があります。

このような場合は、デバイスごとにCSSを変更してみたり、widthやheightを使って横幅、縦幅を固定してあげると良いかもしれません。以下の例のように記載し、PC画面とスマホ画面を比べてみるとよく分かります。PC画面とスマホ画面の両方で確認してみましょう。

参考URL:http://yoshinaga-test.aispr.jp/csstest3

<div class="boxa">boxA</div>

.boxa{
       margin: 20px;border: solid;
       background-color:yellow;
       padding: 10px;
}
@media screen and (max-width:640px){
.boxa {
   width: 70%;
   margin-left: 50px;
}
}

まとめ

ここまでのことをまとめると、marginとpaddingについては、

・borderを意識してみると違いが分かる
・paddingは文字位置の調整に向いている
・marginはボックス同士の間における余白の調整に向いているが、隣接している場合重なり合うので、注意する
・レスポンシブ化する際は、デバイスごとにバランスが崩れてないか確認してみる

marginとpaddingの違いが明確に分かってくると、作業の効率化だけでなく、サイトのレイアウトのバリエーションも増えると思うので、是非理解しておきましょう。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+