メインコンテンツまでスキップ

CSS クラス名

CSS クラス名リスト​

さまざまなサイトで紹介されているものをベースに、実際のプロジェクトで使うものとしてアレンジしています。

クラス名の記法

複数語で指定する場合はケバブケースを使用してください。
クラス名の記法

CSS設計とその記法に関して

記法に関してはガイドラインに則りつつ主にBEM記法を採用しています。
BEM記法やCSSの設計に関しては別ページにて追記予定。

形容詞​

名詞の性質や状態を修飾する品詞。「〜の」「〜な」。

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

分類​

サイトのページやカテゴリとして使える名詞。

  • about - 〜について。
  • work - 仕事・任務。
  • product - 製品。
  • service - サービス。
  • news - お知らせ・近況。
  • event - 行事・出来事。
  • history - 歴史・沿革。
  • archive - 保存・保管・記録。
  • concept - 構想・概念・考え。
  • recommend - おすすめ・推奨。
  • toc - 目次。
  • index - 索引・指標。
  • contact - 問い合わせ・連絡。
  • inquiry - 問い合わせ・質問・調査。
  • access - 交通手段。
  • shop - 店舗。
  • related - 関連のある。
  • privacy - 個人情報の利用・保護の方針。
  • faq - Frequently asked questions（よくある質問）の略。
  • input - フォームの入力画面。
  • confirm - フォームの確認画面。
  • finish - フォームの完了画面。
  • search - 検索結果画面。
  • cart - 購入するアイテムを一時的に保存する画面。
  • checkout - 保存していたアイテムを購入する画面。

Block​

BEMのBlockで使われるような名詞。

  • section - 区分・区画。
  • content - 文書の内容。
  • article - 記事。
  • post - 投稿。
  • top - 頂上・上部。
  • home - トップページ。
  • sidebar - 補足記事。
  • wrapper - 内包する。
  • wrap - wrapperの略語。
    • container - wrapperの類語。容器・入れ物。wrapperはレイアウト的に、containerは意味的に使うことが多い。
  • group - 集まり。
  • area - 特定の場所・範囲。
  • emphasis - 強調・重視。
  • catch - 興味を惹く・関心をつかむ。
  • note - 注釈。
  • description - 概要。
    • desc - descriptionの略語。
  • introduction - 前置き・導入。
    • intro - introductionの略語。
  • announce - お知らせ。
  • information - 情報。
    • info - informationの略語。
  • action - Call To Action。重要度の高い。
  • more - もっと多くの。
  • feature - 主要なもの。
  • detail - 詳細・細部。
  • summary - 概要・要約。

Element​

BEMのElementで使われるような名詞や形容詞など。

  • inner - 内側の。
  • outer - 外側の。
  • body - 主要部分。
  • head - 上部。
  • foot - 下部。
  • heading - 見出し・表題。
  • title - 表題・題名。
  • lead - 見出しの補足・記事の要約。
  • list - 一覧・表。
  • menu - 一覧・表。
  • item - （表やデータなどの）項目。
  • unit - 1つの単位・1セット。
  • column - 縦列。
    • col - columnの略語。
  • text - 本文。
  • caption - 画像・図表の補足文。
  • thumbnail - 縮小した画像。
    • thumb - thumbnailの略語。
  • avatar - 人の顔を示す画像。
  • feature - 特徴を補足する画像。
  • tel - 電話番号。
  • address - 住所。
  • date - 日付。
  • time - 日時。
  • category - 分類・部類。
    • cat - categoryの略語。
  • tag - 識別子。
  • next - 次の。
  • previous - 前の。
    • prev - previousの略語。
  • mask - 覆い隠す。
  • overlay - かぶせる・上書きする。
  • delimiter - アイテムの範囲や境界線を示すインターフェイス。
    • separator - delimiterの類語で混ぜないように分離する目的で使います。
    • divider - delimiterの類語でグルーピングするように分割する目的で使います。

Modifier​

BEMのModifierで使われるような名詞や形容詞など。

  • success - 成功。
  • alert - 注意・警戒。
  • attention - 配慮・気配り。
  • error - 間違い・失敗。
  • caution - 用心・警告。
  • warning - 警告・予告。
  • danger - 危険・驚異。
  • tiny - とても小さい。
    • xs - tinyの類語でExtra small（smallよりさらに小さい）こと。
  • small - 小さい。
  • medium - 中間。
  • large - 大きい。
  • huge - とても大きい。
    • xl - hugeの類語でExtra large（特大・超大型）のこと。
  • reverse - 反転する。
  • push - 前方に押す。
  • pull - 自分の方に引く。
  • offset - 相殺する・埋めあわせる。
  • left - 左側の。
  • center - 真ん中。
  • right - 右側の。
  • top - 上部。
  • middle - 真ん中。
  • bottom - 下部。
  • round - 角丸。
  • circle - 円形。

State​

状態を示す動詞や形容詞など。 is-xxxxで使うことが多い。

  • show - 見せる。
  • hide - 隠す。
  • open - 開く。
  • close - 閉じる。
  • current - 現在の。
  • active - 活動中・有効な。
  • disabled - 無効になっている。

UI​

利用者に情報を提供するためのインターフェイス。

Text​

  • link - アンカーテキスト。検索する
  • label - 分類する・項目名。検索する
  • tag - 符号・識別子。検索する
  • badge - 残数を示す数値。検索する
  • copyright - 著作権表示。検索する
  • tooltip - マウスオーバー時に補足情報を表示するインターフェイス。検索する
  • button - オン・オフの選択に使うインターフェイス。検索する
    • btn - buttonの略語。

Image​

  • image - 画像。検索する
    • img - imageの略語。
  • icon - 対象の内容や機能などを小さな絵柄で表したもの。検索する
  • loading - 読み込み中であることを示すインターフェイス。検索する
  • logo - 社名や製品名などを図案化・装飾化した文字・文字列。検索する
  • map - 地図。検索する
  • chart - 理解しやすいような方法で情報を示すリストやグラフのこと。検索する
    • graph - chartの類語で視覚表現のための手段のこと。検索する
  • hero - キービジュアルになる大型の画像。検索する
  • banner - （主に宣伝用の）画像をともなうリンク。検索する
  • carousel - 画像などのコンテンツを上下左右にスライドさせて切り替えるインターフェイス。検索する
    • slider - carouselの類語。検索する
    • ticker - carouselの類語で自動でアイテムを左右に流しながら表示する。ユーザーは基本的にコントロールできない。検索する
  • modal - モーダル。主な用途はサムネイル画像をクリックしてモーダルを開き画像を大きく見せること。
    • lightbox - モーダルのjQueryプラグインのこと。
  • navigation - 情報へ誘導するリンク。検索する
    • nav - navigationの略語。
    • globalNavigation - ほとんどの画面で表示されている主要なナビゲーション。検索する
    • localNavigation - あるカテゴリ内専用のナビゲーション。グローバルナビゲーションの中や下に配置する場合や、サイドバーに配置する場合がある。検索する
  • megaMenu - 深い階層のカテゴリやページへのナビゲーション。ドロップダウン（クリックやマウスオーバー）で階層を表示していく。カテゴリやページ数の多いサイトのグローバルナビゲーションに使われることが多い。検索する
  • breadcrumb - パンくずリスト。トップページから現在ページまでの階層構造を示したリンク。検索する
  • springboard - 同じサイズのリンクを2×2や3×3のように配置した同じ重要度を持つ並列なナビゲーション。検索する
  • listMenu - 縦に並んだリスト型のリンクで、階層構造をもったナビゲーション。検索する
  • dashboard - グラフやステータスなどを一つの画面にまとめたインターフェイス。検索する
  • pagination - 昇順にしたページ番号付きのナビゲーション。検索する
  • linearNavigation - その画面の前後に移動するためのナビゲーション。paginationとの違いはページ指定ができないこと。検索する
  • backToTop - ページトップに戻るためのページ内リンク。検索する
  • tab - 書類などのインデックスタブを模した、画面内のコンテンツ表示を切り替えるインターフェイス。検索する
    • tabbar - おもに画面下部に固定されたタブで、画面全体を切り替えるインターフェイス。検索する
    • segmentedControl - 機能的にはtabと同じで、見た目がタブではなくボタンである点が違う。検索する
  • off-canvas - 表示領域外から画面の大半を覆い隠したり（オーバーレイ）、ずらすようにスライドしながら表示するナビゲーション。検索する
    • sideDrawer - offCanvasの類語。drawerは「引き出し」の意味。検索する
  • toggleMenu - 同一の操作で二つの状態を交互に切り換えるインターフェイスで、操作対象になるボタンを基準にナビゲーションを表示することが多い。検索する
  • sitemap - サイト内のすべてのページへのリンクをリスト化したもの。検索する
  • sns - ソーシャルネットワーキングサービス。検索する

Form​

  • form - 送信フォーム。
  • login - ユーザー認証をするためのフォーム。検索する
  • registration - ユーザー登録をするためのフォーム。検索する
  • stepNavigation - 複数画面にわたるフォームの順序や、現在地を示したナビゲーション。検索する
  • searchBox - キーワード検索するためのフォームエリア。検索する
  • textField - input[type="text"]のような利用者が編集する改行なしのテキストフィールド。検索する
  • textarea - textareaのような利用者が編集する複数行のテキストフィールド。検索する
  • checkbox - input[type="checkbox"]のような1つ以上の項目を選択するインターフェイス。検索する
  • radio - input[type="radio"]のような1つの項目を選択するインターフェイス。検索する
  • select - selectのような1つの項目を選択するインターフェイス。ラジオボタンと違い、（dropdownのように）項目が最初は隠れているのが特徴。検索する
  • submit - 送信ボタン。検索する
  • reset - リセット（取り消し）ボタン。検索する
  • modify - 修正ボタン。検索する

Other​

  • cards - トランプのような積み重なったカードのメタファーをもつインターフェイス。検索する
  • dropdown - 複数の項目を表示して、1つの項目を選択するインターフェイス。検索する
  • accordion - 折りたたまれたコンテンツを選択することで表示させるインターフェイス。検索する
  • scrollTab - 表示領域よりも横に長いナビゲーションで、左右にスクロールすることで非表示部分を見ることができるインターフェイス。検索する
  • dialog - （主に）注意や警告を知らせるために使用されるメッセージで、ユーザーに操作を要求するのが特徴。検索する
    • toast - dialogの類語で、dialogとの違いは時間が経つと自動的に消えること。検索する
    • popupWindow - dialogの類語で、リンク先を別の小さなウィンドウで表示するインターフェイス。検索する
  • toolbar - ユーザーが利用できるツールやアクションをまとめたインターフェイス。検索する
  • comment - 記事に対する反応。検索する
  • table - テーブル・図表。検索する
  • timeline - チャットや年表のように時系列に並べたリスト。検索する

jsonファイル​

css.json

エディタのスニペットなどや辞書登録しやすくなればと思ってjsonファイルも用意しました。