ケバブケース変換ツール テキストをCSSクラス、URL、およびファイル名用のケバブケースに変換します。

What Is ケバブケース変換ツール?

ケバブケース変換器は、テキストをケバブケース形式に変換します。ここで、すべての文字が小文字になり、単語はハイフンで区切られます。ケバブケースは、CSSクラス名、HTML属性、URLスラッグ、npmパッケージ名、および多くのフレームワークでのファイル名の標準的な命名規則です。例: "Hello World" は "hello-world" になり、"backgroundColor" は "background-color" になります。この名前は、ハイフンで結ばれた単語がシーカーのように見えることから来ています。

Why Use ケバブケース変換ツール?

• CSSクラス名やカスタムプロパティの標準形式
• ほとんどのWebフレームワークでURLスラッグに必要な形式
• npmパッケージ名やGitブランチ名として使用される
• Webコンテキストでの複数単語識別子の最も読みやすい形式
• 任意の入力形式からの変換に対応

Common Use Cases

CSSクラス

BEMや標準的なCSS命名規則に従ったクラス名をフォーマットします。

URLスラッグ

ページタイトルまたはコンテンツ見出しからSEO対応のURLパスを作成します。

npmパッケージ

npmのkebab-case規約に従ったパッケージ名をフォーマットします。

ファイル命名

Angular、Vueなどのコンポーネントベースのフレームワークで使用するためのファイル名をkebab-caseで命名します。

Technical Guide

ケバブケース変換では、スネークケースと同じワード分割アルゴリズムを使用しますが、代わりにアンダースコアではなくハイフンで単語を結び付けます。入力は、空白文字、アンダースコア、ドット、既存のハイフン、および大文字小文字の変換で分割されます。すべての単語が小文字に変換されてから、単一のハイフンで結び付けられます。連続するハイフンは圧縮され、先頭と末尾のハイフンは削除されます。このアルゴリズムは、キャメルケース入力 ("backgroundColor" → "background-color")、パスカーケース ("PageTitle" → "page-title")、混合形式を正しく処理します。注: ケバブケース識別子は、ハイフンが減算演算子であるため、大多数のプログラミング言語では直接変数名として使用できません。

Tips & Best Practices

• 1
  CSSプロパティはネイティブにkebab-case: background-color, font-size, border-radius
• 2
  BEMメソッドではkebab-caseとダブルハイフンを使用: block__element--modifier
• 3
  kebab-caseのURLはSEOにおいてアンダースコアやキャメルケースよりも優先される
• 4
  JavaScriptではブラケット表記でkebab-caseプロパティにアクセス: obj["my-prop"]
• 5
  Angularではコンポーネントセレクターにkebab-caseを使用(app-user-profile)

Related Tools

キャメルケース変換ツール

テキストをJavaScriptの変数名や関数名用にキャメルケース形式で変換します。

📝 Text Tools

パスカルケースコンバーター

クラス名やコンポーネント命名用にテキストをパスカルケースに変換します。

📝 Text Tools

スネークケースコンバーター

テキストをPythonの変数やデータベースカラム用にスネークケースに変換します。

📝 Text Tools

ドットケースコンバーター

テキストを設定キーやプロパティに使用するドットケース形式に変換します。

📝 Text Tools

スラッグ生成ツール

テキストからカスタマイズ可能なセパレータを使用して、URLに適したスラッグを生成します。

📝 Text Tools

Frequently Asked Questions

Q kebab-caseとは何か?

kebab-caseはすべて小文字で、単語の間にハイフンを使用します: my-variable, page-title, nav-bar-item。

Q JavaScript変数にkebab-caseを使用できないのはなぜですか?

ハイフンはJavaScriptでは減算演算子として解釈されるため、ブラケット表記(obj["my-key"])またはキャメルケースを使用してください。

Q URLでkebab-caseがsnake_caseより優れているのはなぜですか?

Googleはハイフンを単語の区切りとして扱うため、SEOにおいてURLではkebab-caseが優先されます。

Q CSSカスタムプロパティについては?

CSSカスタムプロパティ(変数)は--接頭辞を使用したkebab-caseで表記します: --primary-color, --font-size-large。

Q BEMとkebab-caseの関係は?

BEM(BEMメソッド)では基礎としてkebab-caseを使用し、__を要素に、--を修飾子に使用します。

About This Tool

ケバブケース変換ツール is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.