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>

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

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

要素を囲むブロック

レイアウト

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

コンテンツ

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

コンポーネント

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

メディア関連

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

フォーム関連

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

状態を表す

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

英単語のクラス名省略系

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

▪省略型参考例⇩

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

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

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

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

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