Webサイト制作において、CSSはデザインの要です。しかし、プロジェクトが大きくなったり、複数人で作業したりすると、コードの書き方がバラバラになりがちです。「インデントが揃っていない」「不要なルールが残っている」「全角スペースが混じっている」…そんな経験はありませんか？
そんなCSSの「秩序」を守ってくれるのが、今回ご紹介する「Stylelint（スタイルリント）」です。
Stylelintとは？ CSSの「コード検査官」
Stylelintは、CSSのコードをチェック（Lint＝リント）するためのツールです。あらかじめ設定した「ルール」に基づき、コードがそのルールに違反していないかを自動で検査してくれます。
例えるなら、CSSコード専門の「交通ルール検査官」のようなものです。記述ミス（速度違反）や、非推奨な書き方（一時停止無視）を見つけ出し、警告してくれます。さらに、軽微な違反であれば自動で修正（自動運転で補正）までしてくれる、非常に賢いツールです。
Stylelintを導入するメリット
- コードの品質と一貫性の担保
チーム開発でも「Aさんはインデントがタブ、Bさんはスペース2つ」といったバラツキを防ぎ、統一された読みやすいコードを維持できます。 - エラーの早期発見
「閉じカッコが足りない」「プロパティ名が間違っている」といった単純な構文エラーを、ブラウザで確認する前に発見できます。 - メンテナンス性の向上
ルールに沿ったきれいなコードは、未来の自分や他のメンバーが修正する際の手間を大幅に削減します。
Stylelint導入の前提条件
Stylelintは「Node.js（ノード・ジェイエス）」という環境で動作します。導入には、Node.jsに含まれる「npm（エヌピーエム）」というパッケージ管理ツールを使用します。
ご自身のPCにNode.jsがインストールされているか不明な場合は、PCの「ターミナル」（Windowsでは「コマンドプロンプト」や「PowerShell」）を開き、以下のコマンドをそれぞれ実行してみてください。
node -v
npm -vv18.18.0 のようにバージョン番号が表示されれば準備OKです。もしエラーになる場合は、先にNode.jsの公式サイトからインストーラーをダウンロードして、インストールを済ませておきましょう。
Stylelintの導入・設定手順
それでは、実際にStylelintを導入する手順を見ていきましょう。先ほどと同じく、ターミナルで作業を進めます。
Step 1: プロジェクトの初期化とStylelintのインストール
まず、あなたのWebサイトのプロジェクトフォルダ（CSSファイルなどを置いている場所）にターミナルで移動します。
次に、以下のコマンドを実行して、プロジェクト管理ファイル package.json を作成します。（すでにある場合は不要です）
npm init -y続いて、Stylelint本体と、一般的な推奨ルールをまとめた設定パック stylelint-config-standard をインストールします。
npm install stylelint stylelint-config-standard --save-devStep 2: Stylelint設定ファイルの作成
次に、どのようなルールでチェックするかをStylelintに教えるための設定ファイルを作成します。プロジェクトのルート（package.json と同じ階層）に、**stylelint.config.js** という名前のファイルを作成し、以下の内容を記述してください。
【ポイント】JSON形式のファイル（.stylelintrc.json）も使用可能ですが、近年ではコメントの記述やより柔軟な設定が可能な **JavaScript形式（stylelint.config.js）** が主流になりつつあります。
module.exports = {
extends: 'stylelint-config-standard',
// 必要に応じてrulesなどを追加
};これは、「先ほどインストールした stylelint-config-standard のルールを基本ルールとして使います」という宣言になります。
※弊社では、この標準ルールをベースに、プロパティの並べ替えを追加するなど、さらに独自のコーディング規約に合わせてカスタマイズしたルールセットを使用しています。独自のルール設定にご興味のある方は、「stylelint ルール」で検索して、ご自身の環境に合わせたカスタマイズに挑戦してみてください。
Step 3: 実行スクリプトを package.json に登録
Stylelintを簡単に実行できるように、package.json に専用の命令（スクリプト）を登録します。package.json を開き、"scripts" という項目を以下のように編集（または追加）してください。
【重要】"lint:style" と "fix:style" の値（パス）は、ご自身のプロジェクトでCSS（またはSCSS）ファイルを置いている場所に合わせて書き換えてください。
例：src/scss/ フォルダ内の全ての .scss ファイルを対象にする場合
{
"scripts": {
"lint:style": "stylelint \"src/scss/**/*.scss\"",
"fix:style": "stylelint \"src/scss/**/*.scss\" --fix"
}
}これで準備は完了です。
Step 4: Stylelintの実行（チェックと自動修正）
ターミナルで以下のコマンドを実行してみましょう。
▼ ルール違反がないかチェックする
npm run lint:styleルールに違反している箇所が見つかると、ターミナルに「何行目のどの記述が問題か」が一覧で表示されます。
▼ 可能な範囲で自動修正する
npm run fix:styleインデントのズレや不要なスペースなど、Stylelintが自動で修正できる問題を一括で直してくれます。非常に便利ですので、ぜひ活用してください。
まとめ
今回は、CSSのコード品質を保つ「Stylelint」の導入手順をご紹介しました。最初はルール違反の警告がたくさん出て驚くかもしれませんが、一つひとつ修正していくことで、確実に読みやすく保守性の高いコードが身につきます。
きれいなコードは、将来の自分自身を助けることにもつながります。ぜひStylelintを導入して、快適なCSSコーディング環境を手に入れましょう！
よくある質問（FAQ）
Q1. SCSSやSassでもStylelintは使えますか？
A1. はい、使えます。SCSSの構文に対応させるためには、追加のパッケージ（例: stylelint-config-standard-scss）をインストールし、stylelint.config.js でそれを指定する必要があります。基本的な導入方法はCSSの場合と同じです。
Q2. Prettier（フォーマッター）との違いは何ですか？
A2. 良い質問です。Prettierはコードの「見た目（スタイル）」、例えばインデントや改行、引用符の種類などを統一するフォーマッター（整形ツール）です。
一方、Stylelintはコードの「品質」、例えば構文エラーや非推奨な書き方（例: !important の使用）をチェックするリンター（検査ツール）です。
両者は役割が異なるため、組み合わせて使うのが一般的です。その際は、ルールが競合しないよう調整する設定（例: stylelint-config-prettier）も利用されます。
Q3. ルールを独自にカスタマイズしたい場合はどうすればよいですか？
A3. stylelint.config.js ファイルに "rules" プロパティを追加することで、標準ルールを上書きしたり、無効にしたりできます。例えば、「インデントはスペース4つ」に変更したい場合や、「特定のルールだけは無視したい」場合（例: "selector-class-pattern": null）に便利です。
