CSSのclass名で迷ったらここを見ろ!よく使われる命名規則15選



CSSのclass名で迷ったらここを見ろ!よく使われる命名規則15選

CSSコーダーの頭を悩ませるポイントの一つに、コンポーネントの「命名」があります。各コンテンツのスタイルを指定する時に class や id が使われますが、後々のメンテナンスのことを考えるといい加減なネーミングはできません。そんなことで今回は CSS コーディング時の迷いを捨てるために、よく使われるコンポーネントを紹介しつつ、class 名についてピックアップしてみたいと思います。

目次
  1. よく見るwebデザイン・コンポーネントのclass名15選
  2. hero
  3. header
  4. search
  5. navi
  6. dropdown
  7. video
  8. grid
  9. col
  10. card
  11. overlay
  12. feature
  13. form
  14. thumbnail
  15. button
  16. footer
  17. コンポーネントのclass名って・・・
  18. まとめ

よく見るwebデザイン・コンポーネントのclass名15選

hero

css-hero photo : code.org

web サイトの一番目立つポジションにある hero。コンポーネント的にhead や top などの class 名も使われると思いますが、AppleMazda などかっこいいサイトには hero が使われていますので、CSS センス向上的に hero を使いたいですね。

header

css-header photo : RECRUIT

サイトのロゴやタイトル、ナビゲーションを搭載する header。鉄板コンポーネントですが、最近はスマホ・デザインの影響で class 名は “header bar-positive” などコーダーの腕の見せ所となってきています。

search

css-search photo : WordPress

ポータル・サイトからブログ・サイト、ショッピング・サイトなど、ありとあらゆる web デザインで使われるサーチバー。検索を極める Google サーチバーのスタイル class 名は複雑で、DAI 語録なみに考えさせられます。

navi

css-navi

photo : Yahoo! Japan

表示スタイルに違いはあるものの、多くの web サイトで採用されているナビゲーション。ナビゲーションの class 名としては、navi の他に .nav や .navigation、.menu として使われることが多いですね。

dropdown

css-dropdown photo : Twitter 堀江貴文様

パッと見はドロップダウンのコンテンツが表示されていませんが、マウスオンやクリックすることでコンテンツが登場するコンポーネントです。ツイッター以外にも、気付かないうちにあちこちでドロップ&ダウンしていると思いますよ。

video

css-video photo : iPhone 6 S

2015 年のトレンド・デザインでもある動画。背景やコンテンツとして使われ、class 名にはシンプルに video が使われますよね。

grid

css-grid photo : LEXUS

グリッド・デザインを採用している時に用いられる、コンポーネントの grid。仰々しく grid と書かずに container でいくパターンも多いですね。

col

css-col photo : Deutsche Welle

縦割りカラム・デザインを取り入れた時によく使われる col。col とは Column(カラム)の略式で、class 名としては product や item などの名称で使われたりすることもあります。

card

css-card photo : viemo

カード・スタイルにアイテムを並べる時によく使われる card。写真や画像を使って、パッと見でコンテンツを伝える時に使われます。

overlay

css-overlay photo : Overstock

マウスオンした時に画像上に情報やリンクが表示される overlay。CSS もしくは JavaScript とリンクしてスタイリングされますよね。hover や hob とも class名を書くこともありますよね。

feature

css-feature photo : BuddyPress

シングルページなどでサービスの特徴や技術紹介をする時によく使われる feature。国産のモダンデザインでは、コーディング内のclass 名に留まらず、ページ・デザインにも文字として feature が使われるようになってきていますね。

form

css-form photo : Lancers

ユーザー登録や資料請求などの個人情報を入力する時に用いられる定番のコンポーネント。class 名はシンプルな form がよく使われます。

thumbnail

css-thumbnail photo : The Code Player

コンテンツのイメージを直感的に感じてもらうための「サムネイル画像」。ブログの記事一覧やニュース・フィードの一覧、写真一覧などに使われますよね。

button

css-button photo : WordPress フォーラム

フォーラムやコメント投稿などで使われるボタン。スマホ・サイトをデザインする時は、たくさんのボタン・スタイルが必要になってきますよね。btn と略して使われるケースも多いです。

footer

css-footer photo : CodeCamp

header同様、ほぼどのサイトでも使われているコンポーネントです。

コンポーネントのclass名って・・・

css-class-name-te

class名で指定したHTML要素(コンポーネントなど)のスタイルをCSSで設定することができます。例えば、このブログページ・トップのCode部ロゴを要素検証すると、<div class=”sitename”>・・・と要素が表示されます(上記写真参照)。ページのソース表示からCSSファイルを開いてclass名を検索すると、その要素のスタイルを容易に見つけ、参考にすることができます。また自身の管理するサイトでは、スタイルの管理・編集が楽になります。

class 名のネーミング自体は、開発者自身で自由につけることができ、自由度の高い CSS 機能になります。しかし、コンテンツの内容とリンクしないようなネーミングをつけると、時間が経って分かりにくくなる場合もありますし、何より他の web デベロッパーがサイト内を見た時に、いかにも初心者っぽくなります。そのため一定のガイドラインに沿った、class 名を付ける方が CSS 力の向上にもつながるというモノです。class は id と違って、連結してスタイルを調整できるので、CSS 初心者は絶対に知っておくべきポイントと思います。
・CSS class の名前 ガイドライン例/ApproachIonic
CSS class の連結サンプル

まとめ

いかがでしたでしょうか?今回ご紹介したコンポーネントのclass名は、はじめの内は慣れない英語ばかりでストレスになりますが、少しずつがんばって慣れていくと、将来CSSのコーディングで仕事をするようになった時、自分の開発したwebサイトを売却・譲渡する時に慌てずに済みます。時間がある時に、少しずつ他のサイトのclass名を覗いて見ると、同じようなコンポーネントでも様々なネーミングが付けられていることに気付くと思います。その結果、class名に自信を持ち、命名で悩まなくてすむ日も来るかもしれませんね。

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp