標準的に使用するCSSを、機能や役割ごとにクラス分けして表にまとめます。

 承知いたしました。標準的に使用するCSSを、機能や役割ごとにクラス分けして表にまとめます。

クラスのカテゴリ	クラス名の例	用途・説明
レイアウト	.container <br> .row <br> .col <br> .flexbox <br> .grid	Webページの全体的な構造を定義します。<br> container はページの幅を制限する際に、row や col はグリッドシステムを構築する際に使われます。flexbox や grid は要素の配置や整列に使います。
テキスト	.text-center <br> .text-right <br> .font-bold <br> .font-italic <br> .text-primary	文字の見た目を調整します。<br> text-center はテキストを中央揃えに、font-bold は文字を太字に、text-primary はテーマカラーを適用する際に便利です。
コンポーネント	.btn <br> .btn-primary <br> .card <br> .card-header <br> .nav <br> .nav-item	繰り返し使用されるUI部品（コンポーネント）を定義します。<br> btn はボタンの基本スタイルを、card は情報カードの見た目を定義します。
ユーティリティ	.m-1 <br> .p-2 <br> .d-none <br> .rounded <br> .shadow	特定のプロパティを簡潔に適用するためのクラスです。<br> m-1 は margin（余白）を、p-2 は padding（パディング）を、d-none は要素を非表示にします。rounded は角を丸く、shadow は影をつけます。
状態	.is-active <br> .is-disabled <br> .has-error	要素の状態を示す際に使われます。<br> is-active は現在選択されている要素に、is-disabled は無効化された要素に、has-error は入力フォームのエラー状態を示す際などに使います。

---

クラス名の命名規則

クラス名を付ける際には、役割や目的が明確になるような命名規則（例：BEM, OOCSS, SMACSS）に従うことが一般的です。これにより、CSSが大規模になっても管理しやすくなります。

• BEM（Block, Element, Modifier）:

  ブロック__要素--修飾子 の形式で命名します。

  例：.card__title--large

• OOCSS（Object-Oriented CSS）:

  構造と見た目を分離する考え方です。

  例：.btn（構造）と .btn--blue（見た目）を分けて定義します。