CSSにおける、margin についての理解を深めましょう
ある程度描き慣れてくるとどっちがどっちだっけというので、調べることがあるので
備忘録として残しておきますね。
margin について
marginとは
marginとは、上下左右のマージンを一括で指定するプロパティです。上下左右を異なるマージン幅にすることができ、その場合は、スペースで区切って複数の値を指定します。負の値を指定することもでき、複数の領域を重ねて表示させるような表現も可能です。
以下の値で指定します。
厨二風にいえば、、、
margin は、「枠の書」に書かれている、第１章「外枠の呪文」マージンです。
鬼眼のCSS 「枠の呼吸」 壱ノ型 上右下左の外枠（うえみぎしたひだりのそとわく）！！みたいな感じ、、、
効果は、外側のオーラやバリアーみたいなものです。
要するに
div {
margin:A;
}
A : top,right,bottom,left
All で表現しておくとわかりやすい
div {
margin:Y X;
}
X : right,left
Y : top,bottom
X軸とY軸で表現しておくと覚えやすい
div {
margin:T R B L;
}
T : top
R : right
B : bottom
L : left
方向の頭文字で表現しておくと覚えやすい
div.marginA100px {
margin:100px;
background-color:rgba(250,200,200,0.4);
}
div.marginY50pxX100px {
margin:50px 100px;
background-color:rgba(200,250,200,0.4);
}
div.marginT50pxR100pxB150pxL200px {
margin:50px 100px 150px 200px;
background-color:rgba(200,200,250,0.4);
}
要素div 内でしか反応しないような書き方です。
例：
<h3>marginA100px</h3>
<div class="marginA100px">
.....文章の中身.....
</div>
<h3>marginY50pxX100px</h3>
<div class="marginY50pxX100px">
.....文章の中身.....
</div>
<h3>marginT50pxR100pxB150pxL200px</h3>
<div class="marginT50pxR100pxB150pxL200px">
.....文章の中身.....
</div>
※ marginY50pxX100px
[top:50px right:100px bottom:50px left:200px]の場合と同じ
※ marginT50pxR100pxB150pxL200px
例[top:50px right:100px bottom:150px left:200px]の場合
クラス名は、開発用には、わかりやすいようにしておくとツールによっては候補が出てきます。
デザインが決まれば、パーツとして、名前を決めてもいいですね。
最近の流行の、漫画で使われている技名で覚えたり、レトロゲームの技名で覚えたりすると子供さんにも楽しんで プログラミング学習で面白がってもらえたりしますよ！！
開発版に関しては、Githubにも書いておきますね。
シェアプログラミング
Github CSS について
みんなで作るプログラミングの輪、ベーシックからテクニックまでを掲載していきます。
参加希望の方は、こちらまでDMをください
【関連一覧】
【CSS】外枠の技：margin
【CSS】内枠の技：padding
関連記事
【About】(http://qiita.com/sunstripe) - サンストライプ
制作チーム：サンストライプ
(月１WEBコンテンツをリリースして便利な世の中を作っていくぞ！！ボランティアプログラマー/デザイナー/イラストレーター/その他クリエイター声優募集中！!)
地域情報 THEメディア
THE メディア 地域活性化をテーマに様々なリリース情報も含め、記事をお届けしてます！！
https://the.themedia.jp/
ゼロからはじめる演劇ワークショップ
多様化の時代に向けて他者理解を鍛える
プログラミングワークショップ・ウェブ塾の開講！！！
様々なテーマでプログラミングに囚われずに取り組んでいきます。
詳しくはこちら ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
プログラミングサロン 月１だけのプログラミング学習塾
協力応援 / 支援者の集い
チーム：サンストライプ
プログラミングラボ
一緒にポートフォリオを作りませんか？現場の体験やそれぞれの立場から年齢関係なく作品を作りたい方々と一緒にチームを作って、作品を作っています。現場に行きたい人には、職場紹介や職場の体験や悩み相談なども受けております。
様々な職種からプログラミングの知識を得たい、デザインの知識を得たい、データーベースの知識を得たいという人が集まっております。
週１のミーティングにそれぞれの近況と作業報告して、たまにリモート飲み会などをしております！！
興味がある方は、DMに話しかけてみてください。
トラストヒューマン
http://trusthuman.co.jp/
私たちは何よりも信頼､人と考えてます｡
｢コンサルティング｣と｢クリエイティブ｣の両角度から｢人材戦略パートナー｣としてトータル的にサポートします！！
キャリア教育事業
広域学習支援プラットフォーム『のびのび日和』
https://slc-lab.amebaownd.com/
スポンサー募集
ネリム
https://nerim.co.jp/
配信事業などを映像コンテンツなどの制作しております