CSSにおける、padding についての理解を深めましょう
ある程度描き慣れてくるとどっちがどっちだっけというので、調べることがあるので
備忘録として残しておきますね。
CSS
div {
padding:A;
}
A : top,right,bottom,left
All で表現しておくとわかりやすい
CSS
div {
padding:Y X;
}
X : right,left
Y : top,bottom
X軸とY軸で表現しておくと覚えやすい
CSS
div {
padding:T R B L;
}
T : top
R : right
B : bottom
L : left
方向の頭文字で表現しておくと覚えやすい
CSS（コピペ可能）
div.paddingA100px {
padding:100px;
background-color:rgba(250,200,200,0.4);
}
div.paddingY50pxX100px {
padding:50px 100px;
background-color:rgba(200,250,200,0.4);
}
div.paddingT50pxR100pxB150pxL200px {
padding:50px 100px 150px 200px;
background-color:rgba(200,200,250,0.4);
}
要素div 内でしか反応しないような書き方です。
例：
HTML（コピペ可能）
<h3>paddingA100px</h3>
<div class="paddingA100px">
.....文章の中身.....
</div>
<h3>paddingY50pxX100px</h3>
<div class="paddingY50pxX100px">
.....文章の中身.....
</div>
<h3>paddingT50pxR100pxB150pxL200px</h3>
<div class="paddingT50pxR100pxB150pxL200px">
.....文章の中身.....
</div>
※ paddingY100pxX100px
[top:100px right:100px bottom:100px left:200px]の場合と同じ
※ paddingT50pxR100pxB150pxL200px
例[top:50px right:100px bottom:150px left:200px]の場合
クラス名は、開発用には、わかりやすいようにしておくとツールによっては候補が出てきます。
デザインが決まれば、パーツとして、名前を決めてもいいですね。
開発版に関しては、Githubにも書いておきますね