Web事業部実績紹介
Web事業部実績紹介
2015.06.18

コーディング中のクラス名で迷いたくない!よく見るコンポーネントの名前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
横並びにコンポーネントをまとめている集合体。

  • 1
  • 2