まず、id・classをつける上で大事なことは、長さや見やすさよりも、文字列を見ただけで意味が伝わるかどうかです。

ですので、自分がわかりやすいid・class名を考えるのも良いですが、下記の表を見て一般的な命名や先輩の命名規則を知ることがとても重要になります。

さらに、自分でわかりやすいid・class名をつけたり提案できれば、株はかなり上がると思いますので、class名を決める考え方も学んでいってください。

より詳しい命名規則と命名規則の種類について

id・class名に「-（ハイフン）「_（アンダースコア）」を使うかどうか大文字か小文字か。

どんな命名規則があるかなどは下記のページにまとめましたので、ご参考ください！

HTMLのid・class名の命名規則と命名規則の種類

恐らく多くの方が使用している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翻訳をタブに固定して使用しています！

Google翻訳

HTMLのid・class名でよく使う英単語を一覧にしました。

英単語はリンクになっており、クリックするとその英単語の意味や使い方が書いてあるページに移動します。

ここに書かれている英単語は、HTMLによく使われますが、JavascriptやPHPにも使用されますので「こんな英単語がある」と知っておくだけでも引き出しが増えるので実務で役に立ちます。

about	〜について
company	会社概要など
service	サービス
work、works	事業実績
history	沿革、歴史
access	アクセス、交通情報
privacy	プライバシーポリシーなど
recommend	おすすめ
contact、inquiry	お問い合わせ
feature	特徴、特集
price	料金
news、information、info	ニュース、新着情報、情報
category	カテゴリー
result	結果
staff	スタッフ、社員紹介など
recruit	採用情報
faq	よくある質問、Q&A
other	その他
wrap、wrapper	外枠
inner	インナー、内枠
block、box	ブロック、ボックス、要素をまとめるとき等
common、com、cmn	共通の
module、mod	モジュール、部品
note	注釈
notice、caution	警告、注意文
text、txt	テキスト、文章
title、tit、ttl	タイトル、見出し
lead	リード文
more	もっと、更に
detail	詳細、細部
banner、bnr	バナー
logo	ロゴ画像
icon、icn	アイコン
button、btn	ボタン
movie	動画
image、img、thumbnail	画像、サムネイル
slide、slider	スライド、スライドショー
popup	ポップアップ
circle	丸
triangle	三角
square	四角
round	角丸
container	コンテナ、容器。
wrap、wrapper、outer、	外枠。
group	グループ、集まり。
area	範囲、特定の場所。
section	区画。
main	主要な。
primary	主要な。
secondary	補助的な・第二の。
tertiary/third	第三の。
quaternary/fourth	第四の。
fifth/sixth/seventh/eighth/ninth/tenth	第五、第六、第七、第八、第九、第十、、、、
common	共通の。
global	全体的な。
local	局所的な。
general	一般的な。
site	サイトの。
top/right/bottom/left	上/右/下/左。
side/sidebar	補足、横の。
home	ホーム、トップページなど。
post	投稿。
article	記事。
catch	関心、興味を惹く。
description/desc	概要、説明。
introduction/intro	イントロ、導入、前置き。
list	リスト、一覧、表。
menu	メニュー、一覧。
column/col	縦の列。カラム。
text	テキスト、文字。
thumbnail/thumb	サムネイル、縮小画像。アイキャッチともいう。
address	住所、アドレス。
next	次の。
previous/prev	前の。
overlay/mask	かぶせる。覆う。
small/medium/large	小/中/大。
slider/carousel	スライダー/カルーセル。
breadcrumb	パンくずリスト。
toggle	開閉など切り替える部分のこと。トグル式などという。
search	検索。サーチ。
dropdown	ドロップダウン。項目がズラっと下に表示されるようなもの。

恐らく多くの方が使用している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翻訳をタブに固定して使用しています！

Google翻訳

id・class名を自分で考えて決めるのは、頭のリソースを使うのでやめたい！という方には是非、id・class名作成ツールを利用していただければと思います。

今回挙げるのは「codia」という、ツールで、上記画像のように、テキストを入力するとid・class名に使える長さ、意味合いに編集して表示されます。

ですので、こちらとしては文章を打ち込むだけでid・class名が勝手に生成されるということすね！

これなら頭も使わないので、とても便利です！

登録も無料なので1度使用してください！

codia