承知いたしました。標準的に使用する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（見た目）を分けて定義します。
