HTMLのid・class名の命名規則と命名規則の種類
id・class名の付け方には法則があり「半角英数」「-（ハイフン）「_（アンダースコア）」の組み合わせで名前をつけます。
英語は、大文字と小文字どちらも使用できますが、基本は小文字で統一します。
ですが、命名規則の種類には大文字と小文字を混合して使用する命名方法もあります。
いくつか命名規則に種類がありますが、どれも、どのような内容かが判別しやすい名前にするのがベストです。
それでは、id・class名の命名規則の種類とその特徴を挙げていきます。
ケバブケース（ハイフン記法）
文字の区切りに、ハイフンを使うCSSの記法です。
ハイフンが串のように見えることから、ケバブケースとも呼ばれます。
プログラムでは使用できない記法のため、アンダースコア記法やキャメル記法を好む傾向があります。
.sample-class{ }
キャメル記法（キャメルケース）
英単語の区切りに大文字を使うCSSの記法をキャメル記法（キャメルケース）と呼びます。
プログラマー寄りの方が好む記法です。
区切りの大文字がラクダのコブにみえるところから名付けられました。
スネークケース（アンダースコア記法）
文字の区切りに「_（アンダースコア）」を使うCSSの記法をスネークケース（アンダースコア記法）と呼びます。
アンダースコアで区切った形が、へびのように見えることから、スネークケースとも呼ばれます。
JavaScriptやPHPなどのプログラムは、ハイフンを使うとエラーになるため、プログラマー寄りの方が好む記法です。
私の経験上ですが、スネークケースを使用している企業が多い印象です。
.sample_class{ }
一般的なHTMLのid・classの命名規則
コーダーやプログラマーが迷いやすいと言われている、HTMLのid・class名の付け方をご紹介します。
id・classの命名規則パターン１：半角英数字のみを使用する。
「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。
id・classの命名規則パターン２：記号は「-（ハイフン）「_（アンダースコア）」のみ使用する。
上記に含まれないその他の記号についても、プログラム上で誤った処理をしてしまうケースがあります。
エラーを引き起こす原因と成り得るので、使用しない方が良いです。
id・classの命名規則パターン３：機種依存文字は使用しない。
id・class名の場合、スペースを含んでしまうと別なid・classとして認識されてしまいます。
id・classの命名規則パターン４：全角スペース、半角スペースは使用しない。
id・class名の場合、スペースを含んでしまうと別なid・classとして認識されてしまいます。
id・classの命名規則パターン５：必ずアルファベットから開始する。
数字から開始しているid・class名は、認識されません。
また、JavaScriptなどプログラムは、変数名、関数名の先頭に数字を使うとエラーになるからです。
id・class名の付け方とプログラミングでよく使う英単語一覧
まず、id・classをつける上で大事なことは、長さや見やすさよりも、文字列を見ただけで意味が伝わるかどうかです。
ですので、自分がわかりやすいid・class名を考えるのも良いですが、下記の表を見て一般的な命名や先輩の命名規則を知ることがとても重要になります。
さらに、自分でわかりやすいid・class名をつけたり提案できれば、株はかなり上がると思いますので、class名を決める考え方もこのページで学んでいってください。
Google翻訳を有効活用
恐らく多くの方が使用しているGoogle翻訳ですが、翻訳した英単語そのままid・class名にすると必要以上に長くなっていしまいます。
例えば、会社のサービス一覧コンテンツを作成するとなった時、id・class名を決める際「サービス一覧」と検索すると「List of services」と出てきます。
これをclass=”list_of_services”としてしまうと必要以上に長くなってしまいます。
※文字数的にはOKなのですが、考え方的にはNGです。
極端な例を出すと「新人研修」のid・class名を「training」「new_training」とせずGoogle翻訳通り「New employee training」とすると流石に長いですよね。
冒頭でも述べましたが、id・classをつける上で大事なことは、長さや見やすさよりも、文字列を見ただけで意味が伝わるかどうかです。
最初は難しく感じるかもしれませんが、慣れればわかりやすい名前が付けられるようになりますので、ご活用ください！
ちなみに、私はGoogle翻訳をタブに固定して使用しています！
id・class名作成ツールを利用
id・class名を自分で考えて決めるのは、頭のリソースを使うのでやめたい！という方には是非、id・class名作成ツールを利用していただければと思います。
登録も無料なので1度使用してください！
HTMLのid・class名の命名規則と命名規則の種類のまとめ
最後まで、お読みいただきありがとうございます。
他にもWeb制作やブログを行っている方に役立つ記事を投稿しております。
また、珍しいですが、仕事のパフォーマンスを上げる体調管理術や考え方なども投稿しております。
是非、このサイトをブックマークなどをしてお気に入りに加えていただければ嬉しいです。
our note サービス一覧
our noteはブログに加えて、下記のサービスを行っております。
バナー制作やコーディングなどの、Web制作に関するご依頼を頂いております。
また、私が制作したLINEスタンプの販売も行っております。
詳細は、下記をご覧ください。
ココナラ
「ココナラ」というサービスを活用して、バナー制作やコーディングの案件を受注しております。
品質を担保するため、最大2案件までとさせていただいております。
案件のご相談やご依頼がございましたら、ココナラからご依頼をお願いいたします。
ココナラ
LINEスタンプ
下記のボタンより、私が制作したLINEスタンプをご確認・ご購入いただけます。
LINEスタンプ