株式会社LIG (リグ) - 台東区上野にあるWeb制作会社

「お客様の中にお医者様はいらっしゃいませんか！？」 「あ、医者なんですね。今度食事でもどうですか？LINE交換しましょう」

  2. LIGブログ
  3. Web制作
  4. HTML・CSS
  5. CSS
  6. コーディング中のクラス名で迷いたくない！...
Web制作

コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選

コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選

こんにちは。フロントエンドエンジニアのせいとです。

コーディングをしていて、クラス名に迷うことってありませんか？
ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。
しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。

そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。
今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。

よく見るコンポーネントの名前17選

thumbnail

thumbnail
サムネイル画像。
アイキャッチ画像やギャラリーページの画像一覧などで用いられます。

avatar

avator
ユーザのアバター画像。
Webサービスのユーザ情報ページや、ブログの著者情報などに用いられてます。

feature

feature
そのサービスの特徴を説明しているコンポーネント。
イメージ＋テキストでひとくくりになっていることが多いです。

overlay

overlay
要素の上に覆いかぶさるコンポーネント。
サムネイル画像をホバーしたり、モーダルウィンドウを開くと出てきます。

media

media
画像とテキストが横並びになった長方形のコンポーネント。
メディアサイトやブログサイトで比較的よく見かけます。

card

card
画像とテキストが縦並びになった長方形のコンポーネント。
上記のmediaより、画像を見せたいときに使われることが多いように思います。

tile, panel

tile_panel
四角形のコンポーネント。しばしば複数並べて配置されています。
画像やリンク、テキストなどの要素で構成されていることが多いです。

hero／jumbotron

hero
ファーストビューなどにある巨大なイメージ。
heroってなんかかっこいいです。
なんでheroなのかっていう理由は下記リンクが参考になります。

また、Bootstapではjumbotronという名前になってます。

bar

bar
横並びにコンポーネントをまとめている集合体。

list／item

list-item
複数のコンポーネントが並べられたデザインを実現する際、全体を覆うタグにlist、コンポーネント1つ1つを囲うタグにitemと命名します。

wrapper／inner

デザインの都合上、タグを囲ったり中にもう1つタグを挟まないといけないシーンが出てきたらこれ。
イメージでは説明しづらいので、タグで解説します。↓

<header class="header">
	<div class="header-inner"> ... </div>
</header>

<div class="button-wrapper">
	<button class="button">button</button>
</div>

目に見える部分ではありませんが、コーディング時、デザインを実現する上で必要になるケースがあります。
ちなみに、container／contentという名前も似たような役割で用いられます。

holder

holder
いくつかのコンポーネントをまとめておくブロック。

group

group
こちらも複数のコンポーネントをまとめておくブロック。
個人的には、groupは「似たようなコンポーネントをまとめておくブロック」で、holderは「特徴が異なるコンポーネントをまとめておくブロック」と使い分けています。

まとめ

いかがだったでしょうか。
ここで紹介しているのはあくまで実装例ですので、開発者にとってわかりやすい名前がつけられればそれに越したことはありません。
しかし、この記事がクラス名を考える際の参考になれば幸いです。
それでは、よきコーディングライフを！

 

【関連リンク】