CSSカスタムスニペット｜VSCodeのcss.jsonで初期設定を効率化

CSSカスタムスニペットとは、VSCodeの css.json にJSON形式でCSSの定型コードを登録し、prefix（短縮キー）の入力でコードを展開できるエディタ機能のことです。リセットCSS・コンテナ設計・メディアクエリなど毎回書く定型コードを、1〜2文字で呼び出せます。

本記事では、VSCodeへの登録手順、すぐ使えるJSONサンプル5種、Emmet・CSSフレームワークとの違い、そして既存スニペットでよく見かける落とし穴まで解説します。

💡 本記事のスニペットは「リセットCSSの上に重ねる調整用」を想定しています。リセットCSS本体を自作してCDN配信したい方は、先に自作リセットCSSの作り方｜GitHub + jsDelivr CDN を読むと理解がスムーズです。

CSSカスタムスニペットとは？

CSSカスタムスニペットは、VSCodeに標準搭載されている「ユーザースニペット機能」で登録するCSSテンプレートです。prefix に設定した文字列を入力すると、body に定義したCSSコードがエディタ内で展開されます。

Emmet（HTML/CSSの短縮記法）が 汎用的なプロパティ単位の短縮に強いのに対し、カスタムスニペットは プロジェクト固有の初期設定一式 を一発で書き出せる点が違います。両者は競合しないため、併用するのが現実的です。

VSCodeでcss.jsonにスニペット登録する3ステップ

ユーザースニペット設定を開く：メニューから Code → Settings → Configure User Snippets（Windowsは File メニュー）を選択。
言語ファイルを指定：検索ボックスで css.json を選びます。プロジェクト単位に閉じ込めたい場合は「新しいスニペットファイル」を選択して .vscode/css.code-snippets を作成。
JSONを貼り付けて保存：後述のJSONサンプルを貼り付ければ準備完了。CSSファイル内で prefix に設定した文字（例: !）を入力し、Tab または Enter で展開されます。

📁 css.jsonの保存先：macOSは ~/Library/Application Support/Code/User/snippets/css.json、Windowsは %APPDATA%\Code\User\snippets\css.json です。

プロジェクト初期設定に使えるJSONサンプル集

① グローバルリセット＋コンテナ

リセットCSS（自作リセットCSSをGitHub + jsDelivrで配信する手順はこちら）の上に重ねる、プロジェクト初期の調整セットです。prefix に ! を割り当てています。

{
  "Custom CSS Adjustments": {
    "prefix": "!",
    "body": [
      "/* iOS Safari の vw 計算バグ対策 */",
      "*, *::before, *::after {",
      "  min-height: 0vw;",
      "}",
      "",
      "/* 画像のレスポンシブ対応 */",
      "img {",
      "  max-width: 100%;",
      "  height: auto;",
      "}",
      "",
      "/* レイアウトコンテナ */",
      ".container {",
      "  width: min(100% - 32px, 1440px);",
      "  margin-inline: auto;",
      "}"
    ],
    "description": "リセットCSS後の初期調整セット"
  }
}

② Flexbox中央配置

使用頻度の高いFlexbox中央寄せ。flexc で展開します。

{
  "Flex Center": {
    "prefix": "flexc",
    "body": [
      "display: flex;",
      "justify-content: center;",
      "align-items: center;"
    ],
    "description": "Flexboxで中央寄せ"
  }
}

③ CSSグリッド雛形（自動折り返し）

カード一覧などで使う自動折り返しグリッド。${1:280px} はタブストップで、展開後に Tab で値を編集できます。

{
  "Grid Auto Layout": {
    "prefix": "gridauto",
    "body": [
      "display: grid;",
      "grid-template-columns: repeat(auto-fit, minmax(${1:280px}, 1fr));",
      "gap: ${2:24px};"
    ],
    "description": "自動折り返しグリッド"
  }
}

④ メディアクエリ（ブレークポイント）

$0 はカーソルの最終位置を意味し、展開直後にすぐスタイルを書き始められます。

{
  "Media SP": {
    "prefix": "mqsp",
    "body": [
      "@media (max-width: 768px) {",
      "  $0",
      "}"
    ],
    "description": "スマホ向けメディアクエリ"
  }
}

⑤ CSSカスタムプロパティ(変数)

カラー・スペース・角丸の共通値を :root にまとめる初期定義。cssvar で展開します。

{
  "CSS Variables Root": {
    "prefix": "cssvar",
    "body": [
      ":root {",
      "  --color-primary: #0f62fe;",
      "  --color-text: #111;",
      "  --space-1: 8px;",
      "  --space-2: 16px;",
      "  --space-3: 24px;",
      "  --radius: 8px;",
      "}"
    ],
    "description": "CSS変数の初期定義"
  }
}

スニペット vs Emmet vs CSSフレームワーク

3つの手段はそれぞれ得意領域が異なります。プロジェクト初期テンプレを軽量に整えたいなら、カスタムスニペットが最もコストパフォーマンスに優れた選択肢です。

観点	カスタムスニペット	Emmet	CSSフレームワーク
初期設定	JSONを書くだけ	デフォルト搭載	npm install などが必要
学習コスト	低	中（略記の暗記）	高（クラス体系の習得）
上書き耐性	展開後は普通のCSS	展開後は普通のCSS	仕様に依存
チーム共有	.vscode配下に置けば可	共有不要	package.jsonで共有
向いている用途	プロジェクト初期テンプレ	プロパティ単位の短縮	デザインシステム統一

運用ベストプラクティス

グローバルとプロジェクトを使い分ける：個人で常用するテンプレはグローバル（css.json）、案件固有の値（カラー・ブレークポイント）はプロジェクト直下の .vscode/css.code-snippets。
prefixは衝突しない短さで：! や flexc のように2〜5文字。Emmetのデフォルト略記と被らないものを選ぶ。
descriptionは必ず書く：補完候補に説明文が表示されるため、チームメンバーが選びやすくなる。
タブストップ ${1:...} を活用：展開直後に値を編集できると入力速度が一段上がる。

よくある間違いと注意点

img { width: 100%; } の落とし穴

古いスニペット例によくある img { width: 100%; } は、小さな画像まで横幅いっぱいに引き伸ばすため非推奨です。max-width: 100%; height: auto; を定石として登録しましょう。リセットCSS本体側で吸収しておくのも有効です。

.pc-br / .sp-br より clamp()・コンテナクエリ

PC・SPで改行位置を切り替える .pc-br .sp-br は古典的なパターンですが、現在は <br> 制御よりも clamp() で文字サイズと行幅を可変にする、あるいはコンテナクエリで親要素基準に切り替える方が保守しやすくなっています。

min-height: 0vw; の意味

min-height: 0vw; はiOS Safariで calc() 内の vw 単位が誤計算されるバグへの対策として知られる「おまじない」です。意味を理解せずコピペするのは避け、現代のSafari環境で再現するか確認してから入れるのが安全です。

まとめ

CSSカスタムスニペットは、VSCodeの css.json に登録するだけで「プロジェクト初期設定の数分」が「1〜2文字の入力」に置き換わる、費用対効果の高いテクニックです。リセットCSSの自作とセットで運用すると、ゼロからのスタイル設計が圧倒的に速くなります。

📚 次に読む：自作リセットCSSの作り方｜GitHub + jsDelivr CDNで自分だけのCDN URLを手に入れる

よくある質問（FAQ）

Q. CSSカスタムスニペットとは？

VSCodeのユーザースニペット機能を使い、css.json にJSON形式で定義した定型CSSコードを、prefix の短縮入力で展開できる仕組みです。リセットCSSや初期コンテナ設計など、毎回書く定型コードを1〜2文字で呼び出せます。

Q. VSCodeのcss.jsonはどこにある？

macOSは ~/Library/Application Support/Code/User/snippets/css.json、Windowsは %APPDATA%\Code\User\snippets\css.json です。VSCodeメニューの「Configure User Snippets」から開くと迷いません。

Q. スニペットをチームで共有する方法は？

プロジェクトルートに .vscode/css.code-snippets を作成し、Gitに含めます。クローンしたメンバー全員が同じスニペットを使えるようになります。グローバル設定（css.json）はあくまで個人用と割り切るのがおすすめです。

Q. EmmetとCSSカスタムスニペットの違いは？

Emmetは m10 → margin: 10px; のようなプロパティ単位の略記に強く、カスタムスニペットは複数行にまたがる定型コード一式を展開するのに向いています。両者は競合せず併用できます。

Q. グローバルとプロジェクト単位、どちらに置くべき？

個人で常用するテンプレ（リセット・Flex・Grid雛形など）はグローバル、案件固有のブレークポイント・カラー変数はプロジェクト単位に置くのがおすすめです。グローバルにすべて入れると案件間でprefixが衝突しやすくなります。

CSSカスタムスニペット｜VSCodeのcss.jsonでプロジェクト初期設定を効率化する方法