2018年09月25日(火)
【CSS】余白を指定！paddingとmarginの使い方と役割
使いやすく、挙動もすぐわかるため「なんとなく」分かったつもりになるのが「paddingプロパティ」や「marginプロパティ」です。しかし、厳密に幅の設計を行うと、途端に迷いが生じませんか？
「『余白』の計算と言われると、あまり考えてサイトを設計していないな」
「widthの幅は、どこから、どこまでの距離なの、paddingやmarginも含まれているの?」こんな印象を持っている人も中にはいるはずです。「padding」と「margin」は数あるCSSプロパティの中で、最も使用頻度の高く、それはサイトの設計(特に幅の設定)に大きく影響します。これがしっかり理解できれば、サイトを美しく見せることができます。ここでは、必ず知っておいて欲しい「padding」と「margin」で設定できる「余白」の考え方を中心に説明します。この記事は、初心者向けの記事であり、経験者が読むには物足りなさを感じるかもしれません。
padding/marginの役割
要素について理解しよう!
「padding]と「margin」について説明する前に、何度も出てくる「要素」という言葉を知っておきましょう。要素とは、開始タグから、終了タグまでの塊を指す言葉です。htmlでは...
0
46
11
32author:
creive（クリーブ）
クリエイティブを、アーカイブする。creive（クリーブ）は「クリエイティブ」をテーマに、デザインや制作、ライフハック等の情報を発信しているメディアです。
‹ PREV
無料から使えるASP型メールフォーム5社を徹底比較！各ツールの特長を押さえよう
NEXT ›
[ユーザー投稿] 【WordPress事例】ママ向けビューティメディアの先駆け「beamy」、「KUSANAGI」採用で安定したサイト運営を実現
Ads
クリエイティブを、アーカイブする。creive（クリーブ）は「クリエイティブ」をテーマに、デザインや制作、ライフハック等の情報を発信しているメディアです。creive（クリーブ）の記事『【CSS】余白を指定！paddingとmarginの使い方と役割』についてまとめています。
この記事は特にGoogleについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のcreive（クリーブ）で全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとcreive（クリーブ）の記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
