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

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

hero

photo : code.org

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

header

photo : RECRUIT

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

search

photo : WordPress

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

navi

photo : Yahoo! Japan

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

dropdown

photo : Twitter 堀江貴文様

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

video

photo : iPhone 6 S

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

grid

photo : LEXUS

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

col

photo : Deutsche Welle

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

card

photo : viemo

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

overlay

photo : Overstock

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

feature

photo : BuddyPress

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

form

photo : Lancers

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

thumbnail

photo : The Code Player

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

button

photo : WordPress フォーラム

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

footer

photo : CodeCamp

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

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

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

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

まとめ

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