ウェブ

CSSクラス名の命名や短縮名【まとめ一覧】

CSSクラス名の命名や短縮名【まとめ一覧】

よく使われるクラス名を一覧にしてまとめました。

英語が苦手な方でも読み方と意味も付けています。class名は自由に命名した場合、他の人が見て理解できる単語にしておかないと後々、修正や更新の際に混乱を招いてしまいます。

class名はオリジナルではなく、ある程度決まった命名が必要になってきますので、下記の英単語を参考にしてみてくださいね。

▪クラス名命名参考例⇩

<main id="home">
	<section class="news">
		<div class="container">
			<ul class="news_list">
				<li class="item">
					<h2 class="title"></h2>
				</li>
			</ul>
		</div>
	</section>
</main>

newslistをくっつけてnews_listでニュースリストなど、組み合わせて使う場合もあります。

※完全に決まりはありませんが、ある程度他のコーダーが理解しやすいネーミングセンスが必要ですね。

要素を囲むブロック

レイアウト

レイアウト「配置」「配列」などを意味する。

単語読み方 / 意味
containerコンテナ / 大箱
sectionセクション / 章・節・項などの区間
articleアーティクル / 自己完結型のコンテンツ
wrapラッパー / 包むもの
boxボックス / 箱
itemアイテム / 項目
groupグループ / 集まり
mapマップ / イメージマップ
レイアウト

コンテンツ

コンテンツ「内容」「中身」などを意味する。

単語読み方 / 意味
mainメイン / 主要コンテンツ
sideサイド / サブコンテンツ
newsニュース / お知らせ
shopショップ / 店舗情報
eventイベント / 行事
contactコンタクト / お問い合わせ
workワーク / 実績
homeホーム / トップページ
postポスト / 投稿
menuメニュー / 一覧
listリスト / 表一覧
testテキスト / 文字
addressアドレス / 住所
nextネクスト / 次へ
prevプリビアス / 前へ
top / right / bottom / left上 / 右 / 下 / 左
sideサイド / 横の
smallスモール / 小
mediumミーディアム / 中
largeラージ / 大
sliderスライダー
centerセンター / 中央
roundラウンド / 丸み
reverseリバース / 反転
コンテンツ

コンポーネント

コンポーネント「部品」「構成要素」などを意味する。

単語読み方 / 意味
buttonボタン
headerヘッダー
footerフッター
formフォーム / 入力欄
tableテーブル / 表
navナビ
crumbsクラムズ / パンくず
mainvisualメインビジュアル
tabタブ
searchサーチ
cardカード
コンポーネント

メディア関連

メディア「画像」「動画」などを意味する。

単語読み方 / 意味
imageイメージ / 画像
iconアイコン
logoロゴ
mapマップ / 地図
videoビデオ / 動画
advertisementアドゥヴァタイズメント / 広告
メディア

フォーム関連

フォーム「入力欄」などを意味する。

単語読み方 / 意味
labelラベル / 項目名
loginログイン
logoutログアウト
messageメッセージ
フォーム

状態を表す

動的(jQuery)にクラスを付け加えたりする場合に使用する用語。

単語読み方 / 意味
openオープン / 開く
closeクローズ / 閉じる
hideハイド / 隠す
showショー / 見せる
successサクセス / 成功
errorエラー / 失敗
alertアラート / 注意
dangerデインジャー / 危険
warningウォーニング / 警告
overlayオーバーレイ / 重ね合わせる
activeアクティブ / 動作中
disabledディセーブル / 無効にする
fixedフィックスド / 固定する
loadingローディング / 読み込み中
状態動的

英単語のクラス名省略系

スペルが長い場合の省略型一覧です。

▪省略型参考例⇩

<main>
	<section class="nav">
		<div class="cat">
			<h2 class="ttl"></h2>
		</div>
	</section>
</main>

一般的に使われている省略パターンを記述しています。

省略前省略後意味
titlettlタイトル
buttonbthボタン
imageimg画像
texttxtテキスト
numbernum数、数値
downloaddlダウンロード
leftl
rightr
categorycatカテゴリー
advetisementad広告
descriptiondesc概要文
navigationnavナビゲーション
informationinfo情報
messagemsgメッセージ
favouritefavお気に入り
省略

WordPressのテンプレートファイル名

ウェブページを生成する方法を制御するWordPress のルールに従って記述された)PHPファイル名。

テーマ作成
WordPress化テンプレートコードとテンプレートファイル階層【オリジナルテーマ作成】【個人のメモ用】HTMLファイルからWordPress化するにあたってファイル名を.phpに変更して、Themes(テーマ)を作っていく必要があります。初期段階でWordPressに入っているテーマは3つあり「twentytwenty」「twentytwentyone」「twentytwentytwo」のテーマです。...

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA