Learning site for website creation

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 閉じている状態