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

はじめに

Web開発で毎回同じCSSの初期設定を書くのは面倒だと感じませんか？本記事では、CSSカスタムスニペットをJSON形式で管理し、効率的にプロジェクトをスタートする方法を解説します。特に、VSCodeでの設定手順や活用方法、基本的なCSS調整のサンプルコードを紹介します。

CSSスニペットとは？

CSSスニペットとは、再利用可能なコードブロックです。エディタ（例：VSCode）に登録することで、短縮記法や自動補完を使って素早くコードを挿入できます。JSON形式で管理することで、他の開発者とも簡単に共有できるのが大きなメリットです。

JSON形式のCSSカスタムスニペット例

以下は、プロジェクト初期に役立つCSSのカスタムスニペットのサンプルです。

{
   "Custom CSS Adjustments": {
       "prefix": "!",
       "body": [
           "/* Global Reset */",
           "*, *::before, *::after {",
           "  min-height: 0vw;", 
           "}",
           "",
           "/* Responsive Images */",
           "img {",
           "  width: 100%;",
           "}",
           "",
           "/* Layout Container */",
           ".container {",
           "  max-width: 1440px;",
           "  margin: 0 auto;",
           "}",
           "",
           "/* Line Breaks for PC and SP */",
           ".pc-br {",
           "  display: block;",
           "}",
           ".sp-br {",
           "  display: none;",
           "}",
           "",
           "/* Responsive Breakpoints */",
           "@media (max-width: 768px) {",
           "  .pc-br {",
           "    display: none;",
           "  }",
           "  .sp-br {",
           "    display: block;",
           "  }",
           "}"
       ],
       "description": "Add custom adjustments on top of reseter.css."
   }
}

VSCodeでCSSスニペットを登録する方法

1. VSCodeを開き、「ユーザースニペット」を設定
   • メニュー → Preferences → User Snippets → css.jsonを選択。
2. JSON形式のスニペットを追加
   • 上記のコードをcss.jsonに貼り付けます。
3. スニペットの使用
   • CSSファイル内で「!」と入力すると、設定済みのCSSが挿入されます。

スニペット活用のメリット

1. 作業効率アップ
   コードを書く時間を短縮し、生産性が向上します。
2. コードの一貫性
   チーム開発でも共通のCSS設定を使えるため、スタイルの統一が図れます。
3. メンテナンスが容易
   JSON形式で保存すれば、簡単に編集・管理が可能です。

まとめ

CSSのカスタムスニペットをJSON形式で管理することで、作業効率が劇的にアップします。VSCodeを活用すれば、簡単に設定できるため、初期設定の時間を大幅に削減できます。