![ブッ君](http://webookmark.net/wp-content/uploads/2021/03/6972A07B-9E1D-4B0A-8E55-2DC18C2FC432-150x150.png)
CSSの基本的なことが分かったところで、いよいよ具体的なCSSの使い方を説明して行くよ!
![マー君](http://webookmark.net/wp-content/uploads/2021/03/3F8A7FDF-8859-44C8-931C-ED73D444D2CC-150x150.png)
お願いします!!
![ブッ君](http://webookmark.net/wp-content/uploads/2021/03/10AD4DE2-7F91-4524-98BE-E739C73333BF-150x150.png)
今回はmarginとpaddingについてだよ!かなり使用頻度が高く、重要な部分だからね。意外にその違いをあいまいなままにしている人も多いけど、Webサイトの制作で重要となる「余白」と大いに関わりのある部分だから、しっかりと理解して行ってね!
![マー君](http://webookmark.net/wp-content/uploads/2021/03/D9A8D3D4-C551-430F-85BC-65871A31977C-150x150.png)
なかなか難しそうだね。。でも重要な部分だからしっかりと行っていこう!!
![ブッ君](http://webookmark.net/wp-content/uploads/2021/03/10AD4DE2-7F91-4524-98BE-E739C73333BF-150x150.png)
そうだよ!頑張ってね!!
ボックスの構造について
marginを理解しよう
marginプロパティの基本的な使用方法の説明になります!
margin: autoに関しての説明になります。これも使用頻度が高いので、しっかりと使えるようにしていきましょう!!
インライン要素にはmarginの上下は効きません!その対処方法は・・・
paddingを理解しよう
paddingプロパティの基本的な使用方法が説明されています!
インライン要素におけるpaddingの効果
インライン要素に対しては、先に説明のあるブロック要素に対してのpaddingの表示のされ方とは違います!paddingを使用した時に思うような表示にならない時には、paddingを設定したhtmlタグがインラインかブロックか確認しよう!!
marginとpadding、borderのボックス構造
図形を利用してわかりやすく、marginとpadding、そしてborderの範囲が説明されています。ここをしっかりと理解しておくことが今後のコーディングに大きくかかわるのでしっかりと理解していきましょう!!
box-sizingプロパティの効果
box-sizingはpaddingやborderを設定した時に、同時に使用することも多々あるプロパティです。ボックスのサイズをどこまで含めるかを設定するプロパティで、後で説明する横並びのレイアウトを行うときなど、レイアウト崩れを起こす時にはbox-sizingの設定が原因の事がありますので、しっかりと理解していきましょう!!
まとめ
- marginやpadding、borderがボックス(コンテンツ)のどの部分を調整するプロパティなのかを理解する
- marginプロパティのautoの使い方を理解する
- インライン要素へのmarginとpadding
- box-sizingでボックス(コンテンツ)サイズをどこまで含めるか設定する事を覚える
![ブッ君](http://webookmark.net/wp-content/uploads/2021/03/6972A07B-9E1D-4B0A-8E55-2DC18C2FC432-150x150.png)
Web制作において「余白を制する者は全てを制す」っていうと言いすぎかなwwでもそのぐらい余白は重要で、そのためのプロパティが今回説明したmarginやpadding、border、そしてbox-sizingになるから、しっかりと理解する事!!いいね!!!
![マー君](http://webookmark.net/wp-content/uploads/2021/03/EE32D421-D535-4601-B630-B0BB05EF4EC8-150x150.png)
わかった!!頑張って「Webを制する」ぞ!!!!
コメント