女性向けエンジニアスクール
3秒でわかる
単語をハイフンでつなぐ命名規則。my-project のような形で、CSSのクラス名やURL、ファイル名で標準的に使われます。
もう少し詳しく
どういうものか
ケバブケースは、複数の単語をすべて小文字にしてハイフンでつなぐ書き方です。user-profile-card main-navigation 2026-08-14-release-note のような形になります。名前の由来は、串に具材を刺した料理のケバブで、ハイフンを串、単語を具材に見立てたものです。
使われる場所はおおむね決まっています。CSSのクラス名とカスタムプロパティ、HTMLのカスタムデータ属性、URLのパス、コマンドラインのオプション、そしてファイル名です。
なぜ必要か
ハイフンが使えない場所と、使うべき場所がはっきり分かれているためです。JavaScriptの変数名にハイフンは使えません。my-value と書くと引き算として解釈されます。逆にURLでは、単語の区切りにアンダースコアよりハイフンを使う方が読みやすく、下線と重なって見えにくくなる問題も避けられます。
具体例
同じ「ユーザープロフィールカード」を各所でどう書くかを並べると違いがはっきりします。
/* CSSのクラスとカスタムプロパティはケバブケース */
.user-profile-card {
--card-padding: 16px;
padding: var(--card-padding);
}<!-- 属性名もケバブケース。JSからは userId として読む -->
<div class="user-profile-card" data-user-id="42"></div>// JavaScriptの変数はキャメルケース
const userProfileCard = document.querySelector(".user-profile-card");
const id = userProfileCard.dataset.userId;data-user-id が JavaScript 側で dataset.userId になるように、ブラウザが自動でケバブケースとキャメルケースを変換している点が分かりやすい例です。
似た用語との違い
| 記法 | 書き方 | 主な使い先 |
|---|---|---|
| ケバブケース | user-profile | CSSクラス、URL、ファイル名、CLIオプション |
| キャメルケース | userProfile | JavaScriptやJavaの変数名とメソッド名 |
| スネークケース | user_profile | Pythonの変数名、SQLのテーブル名と列名 |
| パスカルケース | UserProfile | クラス名、Reactのコンポーネント名 |
つまずきやすいところ
Reactで class の代わりに className を使うのと同じ感覚で、CSSプロパティ名まで変換が必要になる点を忘れがちです。JSXのインラインスタイルでは background-color は書けず、backgroundColor になります。文字列としてのクラス名はケバブケースのまま、オブジェクトのキーになるとキャメルケース、と場所で切り替わります。
もうひとつ、URLに大文字を混ぜるとサーバーによって別ページ扱いになり、検索エンジンから重複と見なされることがあります。URLは小文字のケバブケースで統一しておくのが無難です。
