ダークモード
【VSCode】HTML CSS Supportの使い方・拡張機能設定
「HTML CSS Support」はHTMLのコーディングを補助するVSCode（Visual Studio Code）拡張機能の一つです。
HTMLファイルを編集する際に、CSS側で定義されているclassやid名の入力候補を補完してくれる機能があり、コーディングの手間を大幅に削減することが可能です。
そんな便利な拡張機能HTML CSS Supportの使い方と設定方法を解説します。
拡張機能のバージョンアップにより、インストールしただけだと補完機能が効かなくなりました。
拡張機能の設定にて、後述する「読み込むCSS（スタイルシート）の指定」を行う必要があります。
目次
HTML CSS Supportのインストール方法
VSCodeの左サイドメニューから拡張機能タブを開き、検索欄にhtml css supportと入力します。
「HTML CSS Support」の拡張機能が見つかったら、[インストール]ボタンを押せばインストール完了です。
HTML CSS Supportの設定方法
拡張機能設定画面の開き方
①左サイドメニューの拡張機能タブを開く → ②インストール済み拡張機能の中から「HTML CSS Support」を探し、右側の歯車マークをクリック → ③「拡張機能の設定」を選択します。
「設定」という名前の画面が開かれるので、ここでHTML CSS Supportの設定を変更することが可能です。
設定画面上部に「ユーザー/ワークスペース」というタブが表示されています。
全てのプロジェクトに共通する設定を行うには「ユーザー」タブを、そのプロジェクトだけに個別に設定を行うには「ワークスペース」タブを選択してください。
（ユーザー/ワークスペースの両方で設定を行なっている場合、ワークスペースの設定が優先されます）
読み込むCSS（スタイルシート）の指定
class名の入力補完機能を適用するCSSファイルを指定します。
ここにCSSファイルを指定することで、そのCSSファイル内で定義されているclass名やid名の入力補完をしてくれるようになります。
以前はこちらの設定を行わなくても自動で動作していましたが、最新バージョン（v2.0.9）では読み込むCSSのパス指定が必須になっています。
拡張機能設定画面を開き、「CSS: Style Sheets」の項目内の[settings.jsonで編集]をクリックします。
settings.jsonファイルが開き、以下のようにcss.styleSheetsという項目が追加されています。
css.styleSheetsの配列[]内に、適用するスタイルシートのファイルパスを入力してください。
読み込むCSSを個別に指定する例
以下のように、,区切りで複数のスタイルシートのパスを指定することが可能です。
{
"css.styleSheets": [
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css",
"css/common.css",
"style.css",
"css/${fileBasenameNoExtension}.css"
]
}BootstrapなどをCDNで読み込んでいる場合は、CDNのリンクをそのまま記述することで、フレームワークで使用されているclass名も入力補完に出てくるようになります。
${fileBasenameNoExtension}には、編集中のファイル名から拡張子を抜いた文字が代入されます。
上記の例の場合、例えばnews.htmlを編集している場合はcss/news.cssが読み込まれます。
.css形式のファイルを全て読み込む例
一々個別にパス指定するのが面倒な場合、以下のように記述することで、そのプロジェクト配下のスタイルシートを全て指定することが可能です。
{
"css.styleSheets": [
"**/*.css"
]
}上記の例では、ディレクトリの階層や名前、ファイル名に関わらず、.cssの拡張子を持つファイル全てが指定されます。
html以外の言語でもclass名候補を表示させる
デフォルトでは.html形式のファイルを編集中の時のみclass名の候補が表示されますが、設定を追加することでhtml以外の言語にも対応可能です。
拡張機能設定画面を開き、「CSS: Enabled Languages」の項目内の[settings.jsonで編集]をクリックします。
settings.jsonが開き、css.enabledLanguagesという項目が表示されます。css.enabledLanguagesの配列内にデフォルトで”html”が設定されているので、それ以外の適用させたいファイル形式を追加します。
{
"css.enabledLanguages": ["html", "php", "vue"],
}まとめ
VSCode拡張機能「HTML CSS Support」の使い方・設定方法について解説しました。
HTMLの編集では同じclass名を使い回すケースが頻繁に発生するので、class名の入力補完機能があることで作業効率は圧倒的に高まるでしょう。
以下の記事では、その他の便利なVSCode拡張機能についても紹介しているので、是非合わせてご覧ください。
