css

「margin」ってどういう意味?【意味から覚えるCSS(初心者向け)】

自分が職業訓練の「Webデザインコース」に通っていたときに苦戦したのが、CSSのプロパティを覚える事でした。英語がそこまで得意では無い自分は、全然CSSを覚える事が出来ませんでした。

そこで、考えた覚え方【意味から覚えるCSS講座】というわけです。
CSSの単語の意味を覚えてしまえば、コーディングの時も出てきやすくなりますよ!

この記事は以下のような方にオススメです。

こんな方にオススメ
  • Webデザインを最近始めました。
  • なかなかCSSプロパティが覚えられない。
  • もっと簡単なCSSの書き方ってないの?

「margin」の単語の意味

「margin – マージン」
marginの意味は、マージン、余白、余裕といった意味があります。

marginは「余白を作るためのCSS」です。

単語の意味
「margin - マージン」
マージン、余白、余裕
余白を作るためのCSS

「margin」の使い方

/* 全方向に余白を指定 */
margin:;

/* 上方向に余白を指定 */
margin-top:;

/* 右方向に余白を指定 */
margin-right:;

/* 左方向に余白を指定 */
margin-left:;

/* 下方向に余白を指定 */
margin-bottom:;
CSSの使い方
margin: ;
margin-top: ;
margin-right: ;
margin-left: ;
margin-bottom: ;
全方向余白
上余白
右余白
左余白
下余白

「margin」の省略記法(emmet)

emmet機能を利用した省略記法のご紹介です。
省略記法(emmet)は「Tabボタン」で展開する事が出来ます。

基本的にCSSをコーディングするとき、全部の文字を打つことってほとんど無いです。

省略記法 (emmet)をどれだけ覚えるかで、コーディングの速さは大きく変わります(断然ラクです)

案外、省略記法の書き方が載っている教材は少ないのでよければ参考にしてください!

/* m */
margin:;

/* mt */
margin-top:;

/* mr */
margin-right:;

/* ml */
margin-left:;

/* mb */
margin-bottom:;
省略記法(emmet)
省略記法(emmet)は「Tabボタン」で展開できます。
margin: ;
margin-top: ;
margin-right: ;
margin-left: ;
margin-bottom: ;
m
mt
mr
ml
mb
省略記法を覚えたほうが
コーディング速いよ

「margin」のショートハンド(まとめて指定)

「margin」のショートハンド(まとめて指定)の書き方です。

全方向に個別で指定するときは時計回りに指定すると覚えてください。

/* 上下10px、左右20pxで指定 */
margin: 10px 20px;

/* 上10px、左右20px、下30pxで指定 */
margin: 10px 20px 30px;

/* 上10px、右20px、下30px、左40pxで指定 */
margin: 10px 20px 30px 40px;
ショートハンド(まとめて指定)
/* 上下10px、左右20pxで指定 */
margin: 10px  20px;
/* 上10px、左右20px、下30pxで指定 */
margin: 10px  20px  30px;
/* 上10px、右20px、下30px、左40pxで指定 */
margin: 10px  20px  30px  40px;
全方向に個別で指定するときは
時計回りに指定するよ

「margin」の覚え方(おまけ)

最後は「margin」の覚え方、ダジャレ付きです笑
あくまで、おまけですのでクオリティの低さはご了承ください・・・。

覚え方(おまけ)
「margin - マージン」
ひまーじん(暇人)は
余白の時間ができる

まとめ

以上、今回は【意味から覚えるCSS講座】シリーズ「margin」の覚え方はご紹介いたしました。