【HTML/CSS】class名に使える英単語
私もよく悩みますが、class名って「どうしよう…？」ってなりますよね。
英語強い方ならそう迷わないかもしれませんが、あまり英語に慣れていない方だと困りますよね。
自分だけであればローマ字でも問題なかったりもしますし、場合によってはありですが、案件やチーム開発で他の方にコードを共有するということなど考えると英語でかっこよくclass名をつけるほうが良いでしょう。
調べるといくつかまとめた記事が出てきたのでそれらを参考にしつつさらにまとめてみたいと思います。
囲み、レイアウト用
- container - コンテナ、容器。
- wrap、wrapper、outer、 - 外枠。
- inner - インナー、内枠。
- block、box - ブロック、ボックス、要素をまとめるとき等。
- module、mod - モジュール、部品。
- 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 - 記事。
- news - ニュース。最新。
- informaiton / info - 情報。お知らせ。
- catch - 関心、興味を惹く。
- description / desc- 概要、説明。
- introduction / intro - イントロ、導入、前置き。
- more - より多くの、もっと。
- detail - 細部、詳細。
- list - リスト、一覧、表。
- menu - メニュー、一覧。
- column / col - 縦の列。カラム。
- text - テキスト、文字。
- thumbnail / thumb - サムネイル、縮小画像。アイキャッチともいう。
- address - 住所、アドレス。
- category - 分類、カテゴリー。
- next - 次の。
- previous / prev - 前の。
- overlay / mask - かぶせる。覆う。
- small / medium / large -小/中/大。
- slider / carousel - スライダー/カルーセル。
- breadcrumb - パンくずリスト。
- toggle - 開閉など切り替える部分のこと。トグル式などという。
- search - 検索。サーチ。
- dropdown - ドロップダウン。項目がズラっと下に表示されるようなもの。
リンク
ざっくり参考サイトから個人的にも良く使うだろう単語を抜粋したり、追記したりしてみました。
参考にしていただければ幸いです。
