【VSCode】オススメのCSSコードスニペット
コーディングの際私はVSCodeを使用しています。
特に便利なのは「ユーザースニペット」。
あらかじめよく使うコードを登録し、呼び出すことができます。

ユーザースニペットの登録

ファイル > 基本設定 >ユーザースニペット
「css」を選びファイルに追記します。

オススメのCSSコードスニペット

縦横中央揃え(ポジション使用)

  "AC1": {

 "prefix": "position-vw",

 "body": [

   "position: absolute;",

   "top: 50%;",

   "left: 50%;",

   "transform: translate(-50%, -50%);",

 ]

   },

横中央揃え(ポジション使用)

   "AC2": {

 "prefix": "position-v",

 "body": [

   "position: absolute;",

   "top: 50%;",

   "left: $1;",

   "transform: translateY(-50%);",

 ]

   },

横中央揃え(ポジション使用)

   "AC3": {

 "prefix": "position-w",

 "body": [

   "position: absolute;",

   "top: $1;",

   "left: 50%;",

   "transform: translateX(-50%);",

 ]

   },

横中央揃え(マージン使用)

  "Margin center": {
"prefix": "margin-center",
"body": [
  "margin-left:auto;",
  "margin-right:auto;",
]
  },

CSSアニメーション(Transition)

 "Transition": {
 "prefix": "tra-ease-out",

 "body": [

   "transition: all 3s ease-out;"

 ]

   },

要素の縦横比をキープ

"TateyokoHi": {

 "prefix": "tateyokohi",

 "body": [

 "width : 100%;",

 "height : 0;",

 "padding-top: calc(300 / 1000 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */"

 ]

   },
おすすめの記事