css

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

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

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

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

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

「padding」の単語の意味

「padding – パディング」
paddingの意味は、詰め物、綿、芯を入れるといった意味があります。

paddingは「詰め物(余白)を作るためのCSS」です。

「padding」の使い方

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

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

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

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

/* 下方向に余白を指定 */
padding-bottom:;

「padding」の省略記法(emmet)

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

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

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

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

/* p */
padding:;

/* pt */
padding-top:;

/* pr */
padding-right:;

/* pl */
padding-left:;

/* pb */
padding-bottom:;

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

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

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

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

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

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

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

まとめ

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