kebab-case とは？URL と CSS での使い方

kebab-case はすべての文字を小文字で書き、単語をハイフン（-）でつなぎます。串に刺したケバブの具材にちなんで名付けられました。

kebab-case のルール

user profile image は kebab-case で user-profile-image になります。spinal-case や dash-case とも呼ばれます。

アンダースコアの代わりにハイフンを使う点だけが snake_case と異なります。

使われる場面

• URL のパスやスラッグ（例：/my-blog-post）
• CSS のクラスやカスタムプロパティ（--main-color）
• HTML の data 属性（data-user-id）
• ファイル名や npm パッケージ名

なぜ URL や CSS ではハイフンなのか

多くのプログラミング言語では識別子にアンダースコアを使えますが、ハイフンは引き算として解釈されるため名前には使えません。そのためハイフンは、URL・CSS・ファイル名といったコードの外の領域に自然と定着しました。

検索エンジンはハイフンを単語の区切りとして扱いますが、アンダースコアはそう扱われないことがあるため、URL ではハイフンが推奨されます。

注意点

ハイフンはコードの識別子には使えないため、kebab-case は JavaScript の変数名などには使われません。その場合は代わりに camelCase に変換しましょう。