w3.cssフレームワークの主なクラスは、以下のカテゴリーに分類できます。
コンテナ・レイアウト関連クラス
|
クラス名 |
説明 |
|
w3-container |
コンテンツを囲むための基本的なコンテナ。左右に16pxのパディングが適用されます。 |
|
w3-panel |
w3-containerと似ていますが、上下にもパディングが適用され、角が丸くなります。 |
|
w3-card, w3-card-4 |
影付きのカード（パネル）を作成します。w3-card-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-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-ul, w3-li |
スタイリッシュなリストを作成します。 |
0 件のコメント:
コメントを投稿