BLOG 2021.11.26

僕なりのクラス名のつけ方50選

#CSS

Written by nakata

INDEX

最近コンカフェ(メイドカフェ)にハマってしまいました、中田です。

突然ですが、皆さんはCSSでクラス名を考えるの、得意ですか？苦手ですか？

私も長いことCSSというものを書いてきましたが、未だに「これはナンて名前をつけたらいいかな…？」と悩むことがあります。ですが、そんな私でもクラス名をつける上である程度の決まりといいますか、こういう時はこの名前にしよう！といった自分ルールに基づいて名前をつけるようにしています。

そこで今回は、僕が実際に日々の制作でよく使うクラス名×50個を、簡単な説明とともに紹介できればと思います。なお、紹介するものはあくまで僕なりのつけ方であって正解ではないので、その点はご了承ください🙏

それではいってみましょ〜！

クラス名一覧

wrapper

何かを外側から包むような時につけます。僕はbuttonやlinkのような、それ自体にmarginをつけたくないものを○○-wrapperというクラス名をつけたもので囲って、それにmarginを指定するようにしています。

inner

何かの内側に入れて、コンテンツの幅や左右のマージンを指定するものにつけます。僕はsectionのすぐ内側にinnerを作り、それに対してmax-widthやmargin、padding等を指定するようにしています。

container

テキストや画像等、ある程度まとまったコンテンツを囲う時につけます。

contents

上のcontainerとほぼ同じような用途でつけます。containerとcontentsの関係性としては、contentsの内側にcontainerがあることになるのですが、個人的にはどちらを使ってもいいんじゃないかなと思っています。

column

display: flexを指定して横並びする要素を囲う際につけます。横並びにするとコンテンツが2カラムになるので、この名前が直感的かなと思っています。

block

横並びにするわけではないけど、レイアウトの都合上1つの塊にしたい！みたいな時につけるようにしています。

logo

名前の通り、ヘッダー内やフッター内にあるロゴに対してつけます。

nav(navigation)

グロナビに対してつけます。僕はあまり名前を略さない派なので、navigationとフルネームでつけることが多いです。(これはお好みでいいと思います！)

drawer

上のnavを含むメニュー全体に対してつけます。

mv(mainvisual)

メインビジュアルに対してつけます。他にkv(keyvisual)やheroという名前もよく見ますが、僕は個人的にmvを使うようにしています。

copy

よくメインビジュアルの上に置いてあるようなコピーに対してつけます。「哀れなアクマに魂の救済を」みたいなやつです。え？わからないって？？D.Gray-manを見ましょう(宣伝)

text

テキスト全体を囲うものにつけます。ここでテキスト全体を…と説明したのは、僕はテキストそのものにはこの後紹介するような名前をつけて、それら全てをまとめてこのtextで囲むからです。(より抽象的な名前で外側から囲うといいますか、テキスト系の最後の切り札的な感じで使っています)

header

見出しとしての塊を囲う時につけます。見出しと一緒にいくつかの情報があり、それらをレイアウトの関係上囲わないといけない時に、このheaderで囲うことがあります。ブログの詳細ページ冒頭にある、タイトルや日付、カテゴリーが集まっているエリアナンかにもつけますね。

title

その名の通りセクションの見出しや記事のタイトル等につけます。

sub-title

セクションの中見出しや小見出しにつけます。同一セクション内に見出しが複数あった時に、h2をtitle、h3をsub-title…みたいな感じでつけるようにしています！

heading

title同様、セクションの見出しや記事のタイトル等につけます。以前までは上のtitle系を使っていましたが、今はこれらheading系の名前を使っています。特に理由はないのでこれもお好みでいいと思います！

sub-heading

こちらもsub-titleと同じような時につけます。

lead

セクションの冒頭にある文章や基本の文章よりも少し目立つように置かれているテキストに対してつけます。

description

最もよく見るであろう、基本の文章に対してつけます。今こうして書いている説明も、僕だったらdescriptionというクラス名をつけたpタグでマークアップしますね。

message

テキストでも、特にメッセージ性の強いものに対してつけます。代表のメッセージとか、商品を作っている人からのメッセージとか…

name

名前を表しているものに対してつけます。会社の名前、社員の名前、商品の名前etc…

price

値段を表しているものに対してつけます。というかそれくらいしかつける時ないですね…笑

notes

注釈に対してつけます。「※卍解は習得済みです。」みたいなやつですね(？)

label

見出しでも文章でもない、あしらい程度にちょっとついてるテキストとかにつけます。アーティストの紹介で、端にちょこっと「artist」みたいなラベルがついてる時とかです。(説明が下手くそですいません…)

category

ニュース一覧についている「重要」「採用」みたいなものや、ブログについている「CSS」や「WordPress」等のカテゴリーに対してつけます。

上のcategory同様、ブログや商品についているカテゴリーに対してつけます。categoryでもtagでも意味的には伝わると思うので、お好みでいいと思います！

フッターにあるコピーライトに使います。price同様、むしろコピーライトでしか使わない名前ですね笑

bg-text

最近のデザインでよく見る、背景にデカデカと配置されているテキストに対してつけます。bgだけだと普通の背景(画像)と区別が曖昧になってしまうため、textをつけるようにしています。

letter

1文字のものに対してつけます。よくあるテキストを1文字ずつspanタグで区切って、後続のテキストほど遅らせてアニメーションするような場合に、spanタグにこの名前をつけます。

日本語表記&英語表記のものがある場合に、日本語表記のものに対してつけます。「about -コンカフェについて-」みたいな時に、「コンカフェについて」の方につけます。

日本語表記&英語表記のものがある場合に、英語表記のものに対してつけます。上の例でいうと、「about」の方です。

info

ある特定の情報をまとめているものに対してつけます。会社の情報や商品の情報とかですね。

data

統計やグラフのような、何かしらのデータについてまとめているものに対してつけます。上のinfoと少し似ていますが、こちらは数値で表されているような、具体的な情報に対してつける感じですかね。

list

ulタグやolタグ、dlタグ等でマークアップしたリストに対してつけます。listが複数出てきた場合は、○○-listのように頭に異なる名前をつけて区別するようにしています。

item

上で説明したulタグやolタグの中にあるliタグに対してつけます。こちらもlistに応じて○○-itemのように異なる名前をつけて区別するようにしています。

img(image)

画像に対してつけます。navやmvと同様に僕は略さずにimageと名前をつけることが多いですが、imgでもほとんどの人には伝わると思うので略してもいいと思います！

thumbnail

記事やブログのサムネイル画像に対してつけます。こちらもthumbのように略しているものをよく見ますが、僕は略さずにthumbnailとつけています。

photo

写真に対してつけます。あくまでイメージ程度に入れている画像ではなく、画像そのものを見せる、印象づけるために使っているような場合にはimgではなくphotoと名前をつけることが多いです。

imgではなく背景画像として使っているものにつけます。

link

aタグでマークアップしたリンクに対してつけます。

button

aタグでマークアップしたリンクやbuttonタグでマークアップしたボタンに対してつけます。aタグで作っているからlink、buttonタグで作っているからbutton、という分け方ではなく、あくまで見た目がリンクに見えるかボタンに見えるかでlinkとbuttonを使い分けるようにしています。

trigger

モーダルを開くボタンやアコーディオンを開くボタンに対してつけます。ボタンを押すことがトリガーになって何かしらのアクションが起きるので、この名前が直感的かなと思っています。

icon

アイコン全般に対してつけます。検索アイコンやボタンについているアイコンとかですね。

shape

サイトの背景や隅っこでふわふわしていたり、絶えず動いているような有機的なシェイプに対してつけます。以前、何かのサイトでfuyofuyoやyoyoといった動きのニュアンスでクラス名をつけているものを見たことがありますが、動きが変わってそのままの名前では伝わりづらくなった場合にクラス名も修正しないといけないので、あくまで見たままの名前をつけるようにしています。

circle

円形のものに対してつけます。上のshapeのようにアニメーションしているようなものや、見出しやリンクのあしらいでついているようなものとかですね。

line

ハンバーガーメニューの三本線につけています。線を使う機会は多々あると思いますが、多くの場合はborderや擬似要素で作るので、意外とつける機会はないかもしれません。

head

一定のまとまりや対になっているもののうち、最初のものの方につけます。わかりにくいと思うので例を挙げると、見出しのまとまりをhead、それに対する説明のまとまりを次に紹介するbodyにするとか、項目名をhead、その項目に対する内容をbodyにするとか、色々なところで使っています。

body

一定のまとまりや対になっているもののうち、最後のものの方につけます。上のheadで挙げた例のように、headとセットで使います。

main

一定のまとまりや対になっているもののうち、主要なコンテンツの方につけます。上のhead&bodyの使い方とほぼ同じですが、こちらは意味的にこっちがメインで、こっちがサブで…といったようにコンテンツの内容に差が見出せる場合につけます。

一定のまとまりや対になっているもののうち、補助的なコンテンツの方につけます。こちらも基本的にはmainとsubをセットで使います。

サービス紹介

今回は僕なりのクラス名のつけ方ということで紹介させていただきましたが、以下のcodicのようなサービスを使ってクラス名を考えるのもいいかもしれません。日本語を英語に翻訳してくれるという点においてはグーグル翻訳と変わらないですが、このcodicは他にもメソッド名の生成やBoolを返すプロパティ、複数形への変換等、エンジニア向けの翻訳機能も備わっています。

https://codic.jp