Visual Studio Code:Emmet記法でcssのmarginやpaddingに関するコードを展開する方法

  • ブックマーク
  • Feedly

margin

marginを指定するには「m」と入力すれば次のように出力されます。

body {
  /* m */
  margin: ;
}

フォーカスが;の前にあるのでpx、パーセント、remでサイズを入力します。

padding

paddingを指定するには「p」と入力すれば次のように出力されます。

body {
  /* p */
  padding: ;
 }

フォーカスが;の前にあるのでpx、パーセント、remでサイズを入力します。

px指定

marginで10pxと一気に指定するには「m10」と入力します。

body {
  /* m10 */
  margin: 10px;
 }

さらにmarginで10px 20px 30pxと一気に指定するには「m10-20-30」と入力します。

body {
  /* m10-20-30 */
  margin: 10px 20px 30px;
 }

パーセント指定

marginで10%と一気に指定するには「m10p」と入力します。

body {
  /* m10p */
  margin: 10%;
 }

さらにmarginで10% 20%と一気に指定するには「m10p20p」と入力します。

body {
  /* m10p20p */
  margin: 10% 20%;
 }

rem指定

marginで10remと一気に指定するには「m10r」と入力します。

body {
  /* m10r */
  margin: 10rem;
 }

margin-bottom

margin-bottomで10pxと一気に指定するには「mb10」と入力します。

body {
  /* mb10 */
  margin-bottom: 10px;
 }

情報源

書籍

この記事を書いた人

羽沢 仁

羽沢 仁

業務系システムのエンジニアとして、コンサルティング会社で5年、事業会社の社内SEとして5年、フリーランスとして6年、要求定義、設計、開発、テスト、リリース対応の業務に携わってきました。来年からは、街の○○屋さんと直接つながって、ITツールを提供するサービスを開始します。詳しいプロフィールはこちらをご参照ください。