class名(クラス名)の付け方って悩むよね〜〜！
分かりやすく教えるよ！では見てみよう♪
class命名のポイント
class名を付けるときにまず注意したいのが、class名を見ただけでどの部分の何に対して指定しているのかが、
ある程度検討がつくということです
特にコーディングを学び始めて間もない方は番号をふるだけだったり、
適当に脈絡もない名前を付けてしまったりして、
修正が必要になったときに見返すと「訳の分からない状態」になってしまう人もいたりします
class名を見れば「だいたいこの辺かな？」とアタリが付けられるようになることが一番です！！！
ある程度の規則性
コードの品質が高いレベルで必要な場合は「厳格な規則性」が求められます
学習中の場合は「ある程度」でOKです
たとえばボタンに対して”btn”と指定していたり”button”と指定していたりしなければ良いでしょう
class命名規則のポイント
主なポイント
class名を見たらどこの何かがわかる
まずclass名を付けるときに注意したいのが、class名を見ただけでどの部分の何に対して指定しているのかある程度検討がつくということです。
特にコーディングを学び始めて間もない方はナンバリングをするだけだったり、何の脈絡もない名前を付けてしまったりして、修正が必要になったときに見返すと「何が何だかわからない状態」になってしまう人もいたりします。
そんな悲劇はもうたくさんです。class名を見れば「だいたいこの辺かな？」とアタリが付けられるようにしましょう。その術を以降で伝えていきます。
ある程度の規則性がある
コードの品質が高いレベルで必要な場合は「厳格な規則性」が求められますが、学習中の場合は「ある程度」でOKです。たとえばボタンに対して”btn”と指定していたり”button”と指定していたりしなければ良いでしょう。
その他の注意点
英語で付ける
class名は半角英数字で英語で付けるようにしましょう。日本語をローマ字に置き換えるのはNGです。
◯ btn、button
× botan
数字から始まるのはダメ
class名は数字から始まってはいけません。必ずアルファベットで始めるようにしましょう。
◯ btn01
× 01btn
複数の単語を組み合わせる場合はハイフンかアンダースコア
複数の単語を組み合わせるときはハイフンまたはアンダースコアでつなぎます
他の単語でつないだり、半角スペースを空けるのはNGです
特に半角スペースを空けた場合、2つの別々のclassとして認識されます。
◯ section-btn、section_btn
× section btn、section.btn
classの命名規則はこれでOK！
ざっくり場所で名前を付ける
ざっくり場所で名前を分けます
例えばheaderにはclass=”header”と付けて、
headerの中にある要素にはclass=”header-◯◯”といった感じにclassを付与していくと良いです
パーツ名で名前を付ける
パーツ名もclass名の手がかりになります
例えば、ボタンは”◯◯-btn”、写真は”◯◯-img”、本文は”◯◯-text”、リンクボタンなら”link-btn”といった感じにclassを付与していくと良いです
classの命名でよく使用する英単語・表記
形容詞
名詞の性質や状態を修飾する品詞。「〜の」「〜な」。
main– 主要なsub– 副次的なprimary– 1番の・最優先のsecondary– 2番目の・副次的なtertiary– 第三のquaternary– 第四のcommon– 共通のglobal– 全体的のlocal– 局所的なgeneral– 一般的なbrand– ブランドのsite– サイトのfirst– 最初のsecond– 二番目のbg– 背景
分類
サイトのページやカテゴリとして使える名詞。
about– 〜についてwork– 仕事・任務product– 製品service– サービスnews– お知らせ・近況event– 行事・出来事history– 歴史・沿革archive– 保存・保管・記録concept– 構想・概念・考えrecommend– おすすめ・推奨table of contents– 目次toc–Table of contentsの略語
index– 索引・指標contact– 問い合わせ・連絡inquiry– 問い合わせ・質問・調査access– 交通手段shop– 店舗related– 関連のあるprivacy– 個人情報の利用・保護の方針faq–qandaの類語、Frequently asked questions（よくある質問）の略qanda– Question and answer（質問と回答）の略
input– フォームの入力画面confirm– フォームの確認画面finish– フォームの完了画面search-result– 検索結果画面cart– 購入するアイテムを一時的に保存する画面checkout– 保存していたアイテムを購入する画面
Block
section– 区分・区画site– サイトcontainer– 全体を囲むものcontent– 文書の内容article– 記事post– 投稿top– 頂上・上部home– トップページsidebar– 補足記事wrapper– 内包するwrap–wrapperの略語container–wrapperの類語
容器・入れ物wrapperはレイアウト的に、containerは意味的に使うことが多い
group– 集まりarea– 特定の場所・範囲emphasis– 強調・重視catch– 興味を惹く・関心をつかむnote– 注釈description– 概要desc–descriptionの略語
introduction– 前置き・導入intro–introductionの略語
announce– お知らせinformation– 情報info–informationの略語
action– Call To Action。重要度の高いmore– もっと多くのfeature– 主要なものdetail– 詳細・細部summary– 概要・要約
Element
inner– 内側outer– 外側body– 主要部分head– 上部foot– 下部heading– 見出し・表題title– 表題・題名lead– 見出しの補足・記事の要約list– 一覧・表menu– 一覧・表item– （表やデータなどの）項目unit– 1つの単位・1セットcolumn– 縦列col–columnの略語
text– 本文caption– 画像・図表の補足文thumbnail– 縮小した画像thumb–thumbnailの略語
avatar– 人の顔を示す画像feature– 特徴を補足する画像tel– 電話番号address– 住所date– 日付time– 日時category– 分類・部類cat–categoryの略語
tag– 識別子next– 次のprevious– 前のprev–previousの略語
mask– 覆い隠すoverlay– かぶせる・上書きするdelimiter– アイテムの範囲や境界線を示すインターフェイスseparator–delimiterの類語で混ぜないように分離する目的で使いますdivider–delimiterの類語でグルーピングするように分割する目的で使います
Modifier
success– 成功alert– 注意・警戒attention– 配慮・気配りerror– 間違い・失敗caution– 用心・警告warning– 警告・予告danger– 危険・驚異tiny– とても小さいxs–tinyの類語でExtra small（smallよりさらに小さい）こと
small– 小さいmedium– 中間large– 大きいhuge– とても大きいxl–hugeの類語でExtra large（特大・超大型）のこと
reverse– 反転するpush– 前方に押すpull– 自分の方に引くoffset– 相殺する・埋めあわせるleft– 左側のcenter– 真ん中right– 右側のtop– 上部middle– 真ん中bottom– 下部round– 角丸circle– 円形
State
状態を示す動詞や形容詞など。
show– 見せるhide– 隠すopen– 開くclose– 閉じるcurrent– 現在のactive– 活動中・有効なdisabled– 無効になっている
Text
link– アンカーテキストlabel– 分類する・項目名tag– 符号・識別子badge– 残数を示す数値copyright– 著作権表示tooltip– マウスオーバー時に補足情報を表示するインターフェイスbutton– オン・オフの選択に使うインターフェイスbtn–buttonの略語。
Image
image– 画像img–imageの略語
icon– 対象の内容や機能などを小さな絵柄で表したものloading– 読み込み中であることを示すインターフェイスlogo– 社名や製品名などを図案化・装飾化した文字・文字列map– 地図chart– 理解しやすいような方法で情報を示すリストやグラフのことgraph–chartの類語で視覚表現のための手段のこと
hero– キービジュアルになる大型の画像banner– （主に宣伝用の）画像をともなうリンクcarousel– 画像などのコンテンツを上下左右にスライドさせて切り替えるインターフェイスslider–carouselの類語 クリック（タップ）などの操作により、複数のコンテンツを横にスライドさせることで、メインの表示を切り替えられる仕組みのことticker–carouselの類語 特定範囲内に文字列を流して表示させる表示方式のことlightbox–carouselの類語で、モーダルのjQueryプラグインのこと
主な用途はサムネイル画像をクリックしてモーダルを開き画像を大きく見せること
Navigation
navigation– 情報へ誘導するリンクnav–navigationの略語
mega-menu– 深い階層のカテゴリやページへのナビゲーション
ドロップダウン（クリックやマウスオーバー）で階層を表示していく
カテゴリやページ数の多いサイトのグローバルナビゲーションに使われることが多いbreadcrumb– パンくずリスト
トップページから現在ページまでの階層構造を示したリンクtopicpath–breadcrumbの類語
springboard– 同じサイズのリンクを2×2や3×3のように配置した同じ重要度を持つ並列なナビゲーションlist-menu– 縦に並んだリスト型のリンクで、階層構造をもったナビゲーションdashboard– グラフやステータスなどを一つの画面にまとめたインターフェイスpagination– 昇順にしたページ番号付きのナビゲーションlinear-navigation– その画面の前後に移動するためのナビゲーションpaginationとの違いはページ指定ができないことback-to-top– ページトップに戻るためのページ内リンクtab– 書類などのインデックスタブを模した、画面内のコンテンツ表示を切り替えるインターフェイスtabbar– おもに画面下部に固定されたタブで、画面全体を切り替えるインターフェイスsegmented-control– 機能的にはtabと同じで、見た目がタブではなくボタンである点が違う
off-canvas– 表示領域外から画面の大半を覆い隠したり（オーバーレイ）、ずらすようにスライドしながら表示するナビゲーションside-drawer–off-canvasの類語
drawerは「引き出し」の意味
toggle-menu– 同一の操作で二つの状態を交互に切り換えるインターフェイスで、操作対象になるボタンを基準にナビゲーションを表示することが多いsitemap– サイト内のすべてのページへのリンクをリスト化したものsns– ソーシャルネットワーキングサービス
Form
form– 送信フォームlogin– ユーザー認証をするためのフォームsignin–loginの類語logout–signout– ユーザー認証を解除すること
registration– ユーザー登録をするためのフォームsignup–registrationの類語
step-navigation– 複数画面にわたるフォームの順序や、現在地を示したナビゲーションsearch-box– キーワード検索するためのフォームエリアtext-field–input[type="text"]のような利用者が編集する改行なしのテキストフィールドtextarea–textareaのような利用者が編集する複数行のテキストフィールドcheckbox–input[type="checkbox"]のような1つ以上の項目を選択するインターフェイスradio–input[type="radio"]のような1つの項目を選択するインターフェイスselect–selectのような1つの項目を選択するインターフェイス
ラジオボタンと違い、（dropdownのように）項目が最初は隠れているのが特徴submit– 送信ボタンreset– リセット（取り消し）ボタンmodify– 修正ボタン
Other
cards– トランプのような積み重なったカードのメタファーをもつインターフェイスdropdown– 複数の項目を表示して、1つの項目を選択するインターフェイスpulldown–dropdownの類語
accordion– 折りたたまれたコンテンツを選択することで表示させるインターフェイスscroll-tab– 表示領域よりも横に長いナビゲーションで、左右にスクロールすることで非表示部分を見ることができるインターフェイスdialog– （主に）注意や警告を知らせるために使用されるメッセージで、ユーザーに操作を要求するのが特徴toast–dialogの類語で、dialogとの違いは時間が経つと自動的に消えることpopup-window–dialogの類語で、リンク先を別の小さなウィンドウで表示するインターフェイスする
toolbar– ユーザーが利用できるツールやアクションをまとめたインターフェイスcomment– 記事に対する反応table– テーブル・図表timeline– チャットや年表のように時系列に並べたリスト
より高度な学習をしたい人へ
classの命名規則は突き詰めると「CSS設計」に行き着きます
- 予測しやすい
- 再利用しやすい
- 保守しやすい
- 拡張しやすい
代表的なCSS設計手法
- BEM
- OOCSS
- SMACSS
- FLOCSS
まとめ
CSS設計についてはまたの機会にいたします
今回はclassの命名規則についてお話しいたしました
参考にしていただけたら嬉しいです
関連記事
classの命名規則はわかりやすいのが一番だね♪
これからも色々教えるよ！