【初心者必見】もう迷わない!クラス名の付け方とよく使う単語一覧

wp-class

こんにちは、あまさすです。
この記事では、次のような疑問にお答えします。

クラス名はどうやって付ければいいんだろう?

Webサイトを制作する際に、HTMLに出てくるクラス名について、どうやってクラス名を付ければいいのか悩んでいる方向けに記事を書いています。

記事の内容
  • いいクラス名とは
  • クラス名のルール
  • よく使う単語一覧
  • BEMについて
目次

いいクラス名とは

いいクラス名 = 分かりやすい

ずばりコレです。

クラス名をつける際のルール(次の章で解説しています)は多少ありますが、基本的にこのクラス名にしないとダメというルールはありません。

なのでパッと見たときに、このクラス名はここの記述だとすぐに分かるクラス名にするのがベストです。

関係のない名前にすると

あとで修正するときに、どこの部分かを探すのに時間がかかってしまいます。

クラス名のルール

disclaimer

命名するにも一定のルールがあります。

①半角英数字以外は使用しない

ひらがな、カタカナ、漢字、全角英数字は使用できません。

②スペースは使用しない

半角スペースを入れると、その前後で別のクラス名と認識されてしまいます。

③記号は「-(ハイフン)」、「_(アンダースコア)」以外は使用しない

エラーや認識されないこともあるので、記号はハイフン、アンダースコアのみ使用しましょう。

④アルファベット以外から開始しない

数字や記号から開始しているクラス名は認識されないので、必ずアルファベットから始まるように設定しましょう。

よく使う単語一覧

クラス名でよく使う単語をまとめてみました。

ぜひ参考にしてみてください。

単語意味
global全体的な
mainメイン、主要な
sectionセクション、分割された部分
containerコンテナー、容器
about〜について、企業情報など
works仕事、実績
product製品
serviceサービス
archiveアーカイブ、保管所
newsニュース、新着情報
blogブログ
contactお問い合わせ
accessアクセス
section区分
content文章の内容
article記事
topトップ、上部
toc目次(table of contentsの略)
areaエリア、特定の範囲
boxボックス、箱
titleタイトル、表題
subtitleサブタイトル、副題
description概要
intro前書き
detail詳細
wrap包装(Wrapperの略)
※対象を包み込んで覆い隠すという意味がある
inner内側
text文章
thumbサムネイル画像(thumbnailの略)
imgイメージ画像(imageの略)
date日付
time時間
logoロゴ
heroキービジュアル画像のこと
navナビゲーション(navigationの略)
cardカード
※カード型レイアウトの際に使うことがある
btnボタン(buttonの略)

BEMについて

ここまで、ある程度クラスの記述について学んできました。

CSSにはいくつかの記述方法があるのですが、ここではBEMについて少しだけご紹介します。

BEMとは、Block(かたまり)、Element(要素)、Modifier(装飾)の略語です。
この3つを用いた厳格なクラス名の命名ルールが特徴的なCSS設計方法の一つです。

CSS基準でクラス名のルールを決めておけばCSSが分かりやすくなります。
そしてそのルールをHTMLにも反映させればいいので記述がすっきりします。

メリット
  • メンテナンス性が高い
  • スタイルが予測しやすい
  • 開発スピードが上がる
使い方

<div class=”Block__Element–Modifier”></div>

  1. BlockとElementの区切りは、_(アンダースコア)を2つ
  2. ElementとModifierの区切りは、–(ハイフン)を2つ

Blockとは

Webページは、ヘッダー、フッター、ナビゲーション、サイドバーなどのパーツで構成されています。
このパーツに当たる部分が、Blockです。

<div class="search">
 <input class="search__input" type="text">
 <input class="search__button" type="submit">
</div>

ここでは、クラス名の「search」がBlockとなっています

Elementとは

Blockを構成する要素です。
Elementには、必ずBlock名を含めます

<div class="search">
 <input class="search__input" type="text">
 <input class="search__button" type="submit">
</div>

Elementは、クラス名searchの後ろの「input」と「button」となっています

Block名まで入れるとクラス名は長くなりますが、
「search」Blockの中の「button」なんだなとすぐに理解できます。

Modifierとは

既存のBlockやElementに対して、見た目を変えたい場合に使用します。

<div class="search">
 <input class="search__input--red" type="text">
 <input class="search__button--small" type="submit">
</div>

Modifierは、「red」と「small」です

CSSの記述方法

BEMを用いたCSS記述をみてみたいと思います。

SCSS(cssの記述方式のひとつです)と組み合わせて使用する例が多いです。

.search {

     &__input {
       〇〇: 〇〇;
     }

     &__button {
        〇〇: 〇〇;
     }

}

ネスト(入れ子)にすることができるので、記述が見やすくなります

まとめ

BEMは細かいルールがありますので、詳しく知りたいと言う方は公式サイト(英語)を見てみるのもいいかもしれません。

私は自分が使いやすいようにアレンジして使っているので、多少ルールを無視して使用しています。
チーム内や自分が使いやすいのが一番だと思いますが、ある程度ルールがあるとスムーズに進められるので参考にしてみてください。

ここまで読んでいただきありがとうございました。

  • URLをコピーしました!

この記事を書いた人

現在34歳、ねこ好きの会社員。
副業で、Webデザイン制作、ブログを書いています。
Webデザイン、WordPress、ブログ運営などの記事を更新中。

*好きなもの
ねこ/シンプル/スタイリッシュ/かわいいもの

目次