CSSでよく使うクラス名
公開日:2018年04月19日
ブロックレベルの大きなグループでよく使うclass名
| container | 一番外側のグループ名でよく使う |
|---|---|
| wrapper | 大きなかたまりのグループ名でよく使う |
| outer | 外側にあたるグループ名でよく使う |
| inner | 内側にあたるグループ名でよく使う |
| header | ヘッダーグループでよく使う |
| footer | フッターグループでよく使う |
| layout | レイアウト用に作成したグループでよく使う |
ブロックレベルの小さなグループでよく使うclass名
| group | 中規模のグループ名でよく使う |
|---|---|
| box | 中規模のグループ名でよく使う |
| block | 中規模のグループ名でよく使う |
| content | コンテンツ単位のグループ名でよく使う |
| area | 範囲や領域といった意味をもつグループでよく使う |
| item | 同じような項目が並んでいるグループ名でよく使う |
| card | 画像主体のカードのような形状で同じような項目が並んでいるグループ名でよく使う |
| tile | タイル状に同じような項目が並んでいるグループ名でよく使う（あまり使わないかも・・・） |
| unit | パーツをまとめたグループによく使う |
| module | パーツ状のグループ名によく使う |
意味をもつかたまりでよく使うclass名
| post | 投稿や記事でよく使う |
|---|---|
| about | 説明している箇所でよく使う |
| news | 最新情報・ニュース表示部分グループでよく使う |
| work | 実績紹介表示部分グループでよく使う |
| service | サービス紹介表示部分グループでよく使う |
| event | イベント表示部分グループでよく使う |
| info | お知らせ表示部分でよく使う |
| category | カテゴリーグループでよく使う |
| caption | 補足部分でよく使う |
| user | ユーザーに関する表示部分でよく使う |
| profile | プロフィール表示部分でよく使う |
| comment | コメント表示部分でよく使う |
| sns | SNS関連表示部分でよく使う |
| sitemap | サイトマップ表示部分でよく使う |
| detail | 詳細表示部分でよく使う |
| description | 説明部分でよく使う |
テキストでよく使うclass名
| title | 見出しに使う |
|---|---|
| text | テキスト表示部分に使う |
| pickup | 注目してほしい箇所に使う |
| recommend | おすすめ部分に使う |
| more | 一覧や詳細へ誘導するテキストに使う |
| note | 注釈などに使う |
| link | リンクに使う |
住所や日時でよく使うclass名
| date | 日付表示部分で使う |
|---|---|
| time | 時間表示部分で使う |
| created | 投稿日時表示部分で使う |
| modified | 更新日時表示部分で使う |
| tel | 電話番号表示部分で使う |
| address | 住所表示部分で使う |
| map | 地図表示部分で使う |
| calendar | カレンダー表示部分で使う |
画像でよく使うclass名
| image | 画像表示部分に使う |
|---|---|
| logo | ロゴ表示部分で使う |
| thumbnail | サムネイル表示部分で使う |
| icon | アイコン表示部分で使う |
| photo | 写真表示部分で使う |
| banner | バナー表示部分で使う |
リストでよく使うclass名
| list | リスト表示部分で使う |
|---|---|
| menu | メニュー表示部分で使う |
| breadcrumb | パンくずリスト表示部分で使う |
| tab | タブ表示部分で使う |
フォームでよく使うclass名
| button | ボタンに使う |
|---|---|
| submit | 送信ボタンに使う |
| required | 必須項目に使う |
| success | 成功時の表示内容に使う |
| error | エラー時の表示内容に使う |
| alert | 注意表示時に使う |
| caution | 警告表示時に使う |
| warning | 問題発生時の表示内容に使う |
| cart | カート用のフォームに使う |
| login | ログイン用のフォームに使う |
| search | 検索用のフォームに使う |
| result | 検索結果表示時に使う |
CSSであらかじめ定義しておくデザイン関連のclass名
| large | 大きい文字やボタンのデザインを定義しておき使用する |
|---|---|
| medium | 中サイズの文字やボタンのデザインを定義しておき使用する |
| small | 小サイズの文字やボタンのデザインを定義しておき使用する |
| left | 左揃えのデザインを定義しておき使用する |
| center | 横方向中央揃えのデザインを定義しておき使用する |
| right | 右揃えのデザインを定義しておき使用する |
| top | 上揃えのデザインを定義しておき使用する |
| middle | 縦方向中央揃えのデザインを定義しておき使用する |
| bottom | 下揃えのデザインを定義しておき使用する |
| round | 角丸のデザインを定義しておき使用する |
| circle | 円形のデザインを定義しておき使用する |
状態でよく使うclass名
| show | 表示状態 |
|---|---|
| hide | 非表示状態 |
| active | 現在使用している・有効な状態 |
| disabled | 無効の状態 |
| current | 現在使用している位置 |
| prev | 次の位置 |
| next | 前の位置 |
| open | 開いている状態 |
| close | 閉じている状態 |
同じカテゴリーのコンテンツ
