CSS を書いていると、メディアクエリや中央寄せのような、決まった形の指定を何度も書くことになります。こうした定型の部分は、エディターのスニペット (コードの断片を略語から呼び出す機能) に登録しておくと便利です。ここでは VS Code (Visual Studio Code) のユーザースニペットを例に、登録の方法と、登録しておくと役に立つ CSS を紹介します。略語から定型文を呼び出す考え方は、テキスト展開ツールの記事 でも紹介しています。

スニペットのファイルを開く

コマンドパレット (Ctrl + Shift + P、macOS では Command + Shift + P) で「Snippets: Configure Snippets」を実行し、言語の一覧から css を選びます。CSS 用のスニペットのファイル css.json が開きます。メニューからも開けますが、場所や表記は版や表示の言語によって違うので、コマンドパレットを使うのが確実です。

ファイルは JSON の形式ですが、// で始まるコメントも書けます。

スニペットの書き方

{
  "メディアクエリ (幅の広い画面向け)": {
    "prefix": "mq",
    "body": [
      "@media (min-width: ${1:48rem}) {",
      "\t$0",
      "}"
    ],
    "description": "幅で切り替えるメディアクエリ"
  }
}
  • いちばん外側の名前 (ここでは「メディアクエリ (幅の広い画面向け)」) は、スニペットの見出しです。ファイルの中で重ならなければ、自由に付けられます
  • prefix は呼び出すための略語です。CSS のファイルで mq と打つと、入力の候補にスニペットが出てきます。候補を選ぶと、body の内容が入ります
  • body は入る内容で、1 行を 1 つの文字列にして配列に並べます。\t はタブで、入れる場所に合わせて字下げが整えられます
  • description は、候補の一覧に出る説明です。省いてもかまいません

カーソルの位置は、$ と数字で指定します。

  • $1、$2 … : スニペットを入れたあと、Tab キーを押すたびに、番号の順にカーソルが移ります
  • ${1:48rem} : カーソルが来たときに 48rem が選ばれた状態で入っています。そのまま Tab キーで進めば既定値になり、文字を打てば置き換わります
  • $0 : 最後にカーソルが置かれる位置です
  • 同じ番号を 2 か所に書くと、1 か所を打つだけで、両方に同じ文字が入ります

ほかに、${1|block,flex,grid|} のように書くと、候補の中から選べます。

登録しておきたい CSS の例

よく使うレイアウトのひな形をいくつか登録しておくと、書き始めが速くなります。ここでは、body に入れる内容を、見やすいように CSS の形で示します (JSON に書くときは、1 行ずつ文字列にします)。

カードを並べるグリッド (画面の幅に合わせて列の数が変わる):

.${1:cards} {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(${2:16rem}, 1fr));
  gap: ${3:1rem};
}

画面には表示せず、読み上げの対象には残す (アイコンだけのボタンの説明などに使う):

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

動きを減らす設定にしている利用者への配慮:

@media (prefers-reduced-motion: reduce) {
  ${1:.target} {
    animation: none;
    transition: none;
  }
}

なお、VS Code には Emmet という入力の補助が組み込まれていて、CSS では m10 と打って候補を選ぶと margin: 10px; が入ります。1 行の指定は Emmet、複数行のひな形はスニペット、と使い分けるとよいでしょう。

プロジェクトで共有する

プロジェクトのフォルダーの中の .vscode フォルダーに、拡張子が .code-snippets のファイルを置くと、そのフォルダーを開いているときだけ使えるスニペットになります。リポジトリに入れておけば、同じプロジェクトに関わる人と共有できます。.code-snippets のファイルでは、scope で使う言語を指定します。

{
  "中央寄せ (Flexbox)": {
    "scope": "css,scss",
    "prefix": "center",
    "body": [
      "display: flex;",
      "align-items: center;",
      "justify-content: center;"
    ],
    "description": "子要素を縦横の中央に置く"
  }
}

昔の定型文と、今の定型文

以前は、ブラウザーごとの表示の違いを吸収する CSS ハック (特定のブラウザーだけが読む書き方) を、定型文として登録しておくことがよくありました。古い Internet Explorer だけに効く * html から始まるセレクターや、プロパティ名の前に _ や * を付ける書き方などです。

Internet Explorer はサポートが終わり、今の主要なブラウザーは CSS の標準にそって表示するので、こうしたハックは不要です。古い CSS に残っていたら、整理してかまいません。ブラウザーによって対応が違う機能を使いたいときは、ハックではなく @supports で、その機能に対応しているかを確かめて書き分けます。

/* :has() に対応しているブラウザーだけに効かせる */
@supports selector(:has(a)) {
  .card:has(img) {
    padding-top: 0;
  }
}

今、スニペットに登録する価値があるのは、ブラウザーの違いを埋めるコードよりも、くり返し書くレイアウトやメディアクエリのひな形です。

まとめ

  • VS Code では「Snippets: Configure Snippets」から、言語ごとのスニペットのファイルを開ける
  • prefix に略語、body に内容、description に説明を書く
  • $1・$2 で Tab キーで移る位置、${1:既定値} で既定値、$0 で最後のカーソル位置を決める
  • .vscode の .code-snippets ファイルで、プロジェクトのスニペットを共有できる
  • ブラウザーごとの CSS ハックは今は不要。登録するならレイアウトやメディアクエリのひな形がよい

参考