こんにちは、すず(@suzublog23)です。
[voice icon=”https://suzublog.site/wp-content/uploads/2020/01/nayamu_girl2-2-e1579170514839.png” name=”プログラミング初心者” type=”l”]
クラス名って、どんなのを付けたらいいかイマイチ分からない。
[/voice]
クラスの命名ってむずかしいですよね。
プログラミング初学者だと、クラスの命名に悩んでしまい、コーディングが進まないなんてこともあるかと。
今回よく使われる単語をリスト化したので、クラスの命名に役立てていただければ幸いです。
【CSS設計】CSSのクラス名リスト
Block
area 場所・範囲
article 記事
container ページ全体
description 概要
detail 詳細
group グループ・集まり
home トップページ
information(info) お知らせ
introduction(intro) 前置き・導入
main メインコンテンツ
note 注釈
post 投稿
section 区分
sidebar 補足記事
summary 概要・要約
top 上部
wrapper 内包する
Element
address 住所
body 主の部分
data 日付
category カテゴリー・分類
foot 下部
head 上部
heading 見出し・表題
inner 内側
item 項目
lead 見出しの補足・記事の要約
list リスト・一覧
menu メニュー・一覧
more もっと見る
next 次へ
outer 外側
previous(prev) 前へ
tag タグ
tel 電話番号
text テキスト・本文
thumbnail(thumb) サムネイル・縮小した画像
time 日時
title タイトル・題名
Modifier
alert アラート・警告・注意
bottom 下部
center 真ん中
error エラー・失敗・間違い
large 大きい
left 左
madium 中間
pull 引っ張る
push 押す
reverse リバース・反転
right 右
small 小さい
top 上部
warning 警告
分類
about ○○について
access アクセス・交通手段
cart ショッピングカート画面
complete フォームの完了画面
confirm フォームの確認画面
contact お問い合わせ
history ヒストリー・歴史・沿革
input フォームの入力画面
news お知らせ・新着情報
product 製品
service サービス
work 仕事
状態（State）
active 有効
close 閉じる
disables 無効
hide 隠す
open 開く
show 見せる
current 現在の
テキスト
button オン/オフの選択に使用するIF
copyright コピーライト（著作権表示）
link リンク（アンカーテキスト）
label ラベル・項目名・分類
tag タグ
イメージ（画像）
banner バナー・画像を伴うリンク
figure 図版エリア
hero ヒーローイメージ・キービジュアルとなる大きな画像
loading ロード・読込み中を表すIF
logo ロゴ
map マップ・地図
photo 写真エリア
icon アイコン
image(img) 画像
slider スライダー
ナビゲーション
breadcrumb パンくずリスト
global-navigation 主要なナビ
navigation(navi) ナビ・情報へ誘導するリンク
pageTop トップページに戻る
pagination ページネーション・ページ番号
sitemap サイトマップ・サイト内のすべてのページへのリンクを表にしたもの
sns SNS・ソーシャルネットワーキングサービス
toggle-menu トグルメニュー・ナビを折りたたんだメニュー
フォーム
checkbox チェックボックス
form フォーム
login ログイン
logout ログアウト
modify 修正ボタン
radio ラジオボタン
reset リセット・取消
textarea 複数行あるテキストエリア
text-field 改行なしのテキストフィールド
search-box 検索フォーム
select セレクトボックス
signin サインイン
signout サインアウト
その他
accordion アコーディオン・折りたたまれたコンテンツを表示するIF
arrow 矢印
comment コメント
dialog ダイアログ・注意や警告を知らせるメッセージ
dropdown ドロップダウン（プルダウン）・押すと選択項目が一覧表示される
popup ポップアップ・リンク先を小さなウインドウで表示するIF
line ライン・線
table テーブル・表
toolbar ツールバー・ボタンやアイコン、操作メニューが並ぶバー