これからWEB制作に携わるすべての方へ。クラス名まとめました！

新人コーダーにとってclass名やid名の付け方ってものすごく悩みませんか？ そんな方のために書きました！ 少しでも参考になれば幸いです！

1.Block

Block（ ブロック ）は コンテンツのひとかたまりを表す要素です。

• section – 区分
• unit , box , col , area – レイアウトのためのボックス
• figure – 図版エリア
• content – 文書
• article – 記事
• header – ヘッダー
• footer – フッター
• post – 投稿
• top – 上部
• home- トップページ
• sidebar ( side ) – 補足記事
• container, wrapper , wrap , page , page-body – ページ全体
• group – 集まり
• emphasis – 強調
• catch – キャッチフレーズ
• introduction ( intro ) – 前置き・導入
• announce – お知らせ
• information ( info ) – 情報
• action – 重要度の高い
• more – もっと見る
• feature – 主要なもの
• detail – 詳細・細部
• summary, description ( desc )  – 概要・要約

2. Adjectives

Adjectives（形容詞）は物事の性質や状態を表します。

• main , primary  – 主要な
• secondary – 第二の
• tertiary – 第三の
• quaternary – 第四の
• common – 共通の
• global – 全体的な
• local – 局所的な
• general – 一般的な
• brand – ブランドの
• site – サイトの

3. Catergory

Catergory（カテゴリ）はサイトのページやカテゴリとして使用されます。

• about – 〜について
• work – 仕事
• product – 製品・商品
• service – サービス
• guide – 案内
• topic , topics – 話題
• pickup – ピックアップ
• contact, inquiry – お問い合わせ
• news ( info ) – お知らせ
• spotLight – 注目情報
• event – イベント
• history – 歴史・沿革
• archive – 保存・記録
• concept – 概念・構想
• recommend – おすすめ
• table of contents ( toc ) – 目次
• index – 索引
• contact ( inquiry ) – 問い合わせ
• access – 交通手段
• shop – 店舗
• goodsList – 商品リスト
• related – 関連の
• privacy – 個人情報の利用・保護の方針
• faq ( qanda ) – よくある質問（ Frequently asked questions ）
• input – フォームの入力画面
• confirm- フォームの確認画面
• finish – フォームの完了画面
• search-result – 検索結果画面
• cart – 購入するアイテムを一時的に保存する画面
• checkout – 保存していたアイテムを購入する画面

4.Element

Element（エレメント）は 要因、要素、素材のことです 。

• inner – 内側
• outer – 外側
• body – 主要部分
• head – 上部
• foot – 下部
• heading,title  – 見出し
• lead – 見出しの補足・記事の要約
• list, menu – 一覧・表
• item – 項目（表やデータなど）
• unit – 1つの単位・1セット
• column ( col ) – 縦列
• text ( txt ) – テキスト
• caption – 画像・図表の補足文
• thumbnail ( thumb ) – 縮小した画像
• avatar – 人の顔を示す画像
• feature – 特徴を補足する画像
• tel- 電話番号
• address – 住所
• siteTtl – サイトタイトル
• date – 日付
• time – 日時
• category ( cat ) – 分類
• next – 次へ
• previous ( prev ) – 前へ
• mask – 覆い隠す
• hidden, – 非表示
• first（最初）, firstChild – 最初の項目
• last（最後） , lastChild – 最後の項目

5.Modifier

Modifier（ モディファイア ）は状態を表します。

• top – 上部
• middle – 真ん中
• bottom – 下部
• left- 左側の
• right – 右側の
• tiny – とても小さい
• small – 小さい
• medium – 中間
• large – 大きい
• huge – とても大きい
• alert – 注意・警戒
• attention – 配慮
• error – 間違い
• caution , warning  – 用心・警告
• round – 角丸
• circle – 円形
• center – 真ん中
• current – 現在位置

7. Image

Image（ イメージ ）は 画像や写真、グラフなどを表す際に使用されます。

• image ( img ) , photo  – 画像
• pr – 広告
• icon – 対象の内容や機能などを小さな絵柄で表したもの
• logo – 社名や製品名などを図案化・装飾化した文字・文字列
• map – 地図
• chart , graph – リストやグラフ
• hero – キービジュアルになる大型の画像
• banner ( bn ) – 画像をともなうリンク
• slider  – 画像などのコンテンツを上下左右にスライドさせて切り替えるインターフェイス

8. Text

Text（ テキスト ）は文字情報を表しています。

• link – リンク
• label – 項目名
• tag – 識別子
• notes – 注釈
• copyright – 著作権表示
• button – ボタン

9. Form

Form（ フォーム ）はお問い合わせフォームなどで主に使用されます。

• form – 送信フォーム
• login – ユーザー認証フォーム
• logout , signout – ユーザー認証を解除すること
• registration , signup – ユーザー登録のフォーム
• search-box – キーワード検索するためのフォームエリア
• text-field – input[type=”text”]のような利用者が編集する改行なしのテキストフィールド
• textarea – 利用者が編集するテキストフィールド
• checkbox – input[type=”checkbox”]のような1つ以上の項目を選択する
• radio – input[type=”radio”]のような1つの項目を選択する
• select – selectのような1つの項目を選択する
• submit – 送信ボタン
• reset – リセットボタン。
• modify – 修正ボタン

10. Navigation

Navigation（ ナビゲーション ）は Webサイト、ページコンテンツをナビゲートするために使用される主要リンクのグループを区別するために使用されます。

• navigation( nav ) – 情報へ誘導するリンク
• global-navigation ( gNav )  – 主要ナビゲーション
• local-navigation – カテゴリ内専用のナビゲーション
• list-menu – 縦に並んだリスト型リンク
• dashboard – グラフやステータスなどを一つの画面にまとめたもの
• pageTop – ページトップへ
• back-to-top – ページトップに戻るページ内リンク
• tab – 画面内のコンテンツ表示を切り替えるインターフェイス
• sitemap – サイト内のすべてのページへのリンクをリスト化したもの