コンテナ・レイアウト関連クラス
| クラス名 | 説明 |
w3-container | コンテンツを囲むための基本的なコンテナ。左右に16pxのパディングが適用されます。 |
w3-panel | w3-containerと似ていますが、上下にもパディングが適用され、角が丸くなります。 |
w3-card, w3-card-4 | 影付きのカード（パネル）を作成します。w3-card-4は影が少し強くなります。 |
w3-row, w3-row-padding | レスポンシブなグリッドレイアウトを作成するための行です。w3-row-paddingは子要素にパディングを追加します。 |
w3-col | レスポンシブなグリッドの列を定義します。s、m、lと組み合わせて画面サイズごとの幅を指定します。 |
w3-half, w3-third, w3-quarter | 親要素の幅を半分、1/3、1/4に設定し、レスポンシブなレイアウトを簡単に作成できます。 |
w3-left, w3-right | 要素を左または右にフロート（寄せ）させます。 |
w3-clear | フロートを解除します。w3-leftやw3-rightを使った後に使用することが推奨されます。 |
色・背景関連クラス
| クラス名 | 説明 |
w3-color | 要素の背景色を設定します。例: w3-blue, w3-red, w3-green |
w3-text-color | 要素内のテキストの色を設定します。例: w3-text-blue, w3-text-red |
w3-hover-color | ホバー時の背景色を設定します。例: w3-hover-blue |
w3-hover-text-color | ホバー時のテキストの色を設定します。例: w3-hover-text-blue |
w3-opacity, w3-opacity-off | 要素の透明度を設定します。w3-opacity-offは透明度を解除します。 |
フォント・テキスト関連クラス
| クラス名 | 説明 |
w3-serif, w3-sans-serif | フォントスタイルをセリフ体またはサンセリフ体に設定します。 |
w3-tiny, w3-small, w3-large, w3-xlarge, w3-jumbo | フォントサイズを段階的に設定します。 |
w3-center, w3-left-align, w3-right-align | テキストの水平方向の配置を設定します。 |
w3-wide | テキストの文字間隔を広くします。 |
w3-bold | テキストを太字にします。 |
w3-padding, w3-padding-small, w3-padding-large | 要素の上下左右にパディングを追加します。 |
w3-margin, w3-margin-top, w3-margin-bottom | 要素の周囲にマージンを追加します。 |
その他の主要なクラス
| クラス名 | 説明 |
w3-round, w3-round-large, w3-circle | 要素の角を丸くします。w3-circleは円形にします。 |
w3-border, w3-border-color | 要素に境界線を追加します。w3-border-colorで色を指定します。 |
w3-animate-fading, w3-animate-zoom | フェードインやズームインなどのアニメーション効果を追加します。 |
w3-dropdown-click, w3-dropdown-hover | ドロップダウンメニューを作成します。 |
w3-ul, w3-li | スタイリッシュなリストを作成します。 |
W3.CSSのレスポンシブクラスについて詳しく知りたい場合は、こちらの動画が参考になります。
Mastering W3.CSS Responsiveness Classes
