コンテナクラス
| クラス | 定義 | |
|---|---|---|
| W3-コンテナ | HTMLコンテンツのコンテナ（左右に16pxのパディングが追加されます） | それを試してみてください |
| カラークラスを使用 | それを試してみてください | |
| ヘッダーとして使用 | それを試してみてください | |
| フッターとして使用 | それを試してみてください | |
| W3-leftbarで使用 | それを試してみてください | |
| W3-bottombarで使用 | それを試してみてください | |
| W3-セクション | HTMLコンテンツのコンテナ（に16pxの余白の上部と底部が追加されます） | それを試してみてください |
| W3-バッジ | 円形バッジ8 | それを試してみてください |
| W3-タグ | 長方形タグもっと後で！ | それを試してみてください |
| W3-UL | 順不同リスト | それを試してみてください |
| W3-表示コンテナ | W3-display- クラスのコンテナは、（左上、右上、左下または右下、またはコンテナの中央にあるの要素を配置します） | それを試してみてください |
| W3-画像 | 推奨されていません。 代わりにW3-表示コンテナを使用してください。 | それを試してみてください |
| W3-BLOCKQUOTE | 2.0で削除（代わりにW3-leftbarを使用） | それを試してみてください |
| W3-コード | コードコンテナ | それを試してみてください |
| W3-進行コンテナ | プログレスバーのコンテナ | それを試してみてください |
テーブルクラス
| クラス | 定義 | |
|---|---|---|
| W3-テーブル | HTMLテーブルのコンテナ | それを試してみてください |
| W3-ストライプ | ストライプテーブル | それを試してみてください |
| W3-ボーダー | フチテーブル | それを試してみてください |
| W3-境 | フチライン | それを試してみてください |
| W3中心 | 中心のテーブル | それを試してみてください |
| W3-hoverable | Hoverableテーブル | それを試してみてください |
| W3・テーブルすべて | すべてのプロパティが設定され | それを試してみてください |
| W3-ストライプで、W3ボーダー、およびW3-境 | それを試してみてください | |
| 色の頭を持ちます | それを試してみてください | |
| W3-責任を持ちます | それを試してみてください | |
| W3-小さな付 | それを試してみてください | |
| W3-小さいと | それを試してみてください | |
| W3-大と | それを試してみてください | |
| W3-XLARGEと | それを試してみてください | |
| W3-xxlargeと | それを試してみてください | |
| W3-xxxlargeと | それを試してみてください | |
| 色付き | それを試してみてください | |
| W3-ジャンボと | それを試してみてください |
カードのクラス
| クラス | 定義 | |
|---|---|---|
| W3-カード | （ボーダー付）任意のHTMLコンテンツのコンテナ | それを試してみてください |
| W3-カード-2 | 任意のHTMLコンテンツのコンテナ（2ピクセルボーダー影） | それを試してみてください |
| W3-カード-4 | 任意のHTMLコンテンツのコンテナ（4PXボーダー影） | それを試してみてください |
| W3-カード-8 | 任意のHTMLコンテンツのコンテナ（8pxボーダー影） | それを試してみてください |
| W3-カード-12 | 任意のHTMLコンテンツのコンテナ（12ピクセル境影） | それを試してみてください |
| W3-カード-16 | 任意のHTMLコンテンツのコンテナ（16pxに縁取ら影） | それを試してみてください |
| W3-カード-24 | 任意のHTMLコンテンツのコンテナ（は24px境影） | それを試してみてください |
応答クラス
| クラス | 定義 | |
|---|---|---|
| W3-行 | 流体応答コンテンツの1行のコンテナ | それを試してみてください |
| W3-行パディング | すべての列がデフォルトのパディングを持って行 | それを試してみてください |
| W3-コンテンツ | 固定サイズの中心にコンテンツのコンテナ | それを試してみてください |
| W3-半分 | ハーフ（1/2）画面の列のコンテナ | それを試してみてください |
| W3三分の | 第三に（1/3）画面の列のコンテナ | それを試してみてください |
| W3-twothird | 2つの第3（2/3）画面の列のコンテナ | それを試してみてください |
| W3-四半期 | クオーター（1/4）画面の列のコンテナ | それを試してみてください |
| W3-threequarter | 四分の三（3/4）画面の列のコンテナ | それを試してみてください |
| W3-COL | 任意のHTMLコンテンツの列のコンテナ | それを試してみてください |
| L1 - L12 | 大画面の応答サイズ | それを試してみてください |
| M1 - M12 | メディア画面の応答サイズ | それを試してみてください |
| S1 - S12 | 小さな画面の応答サイズ | それを試してみてください |
| W3-隠す小 | 小さな画面上で非表示コンテンツ（以下601px） | それを試してみてください |
| W3非表示媒体 | メディアの画面上のコンテンツを非表示にします | それを試してみてください |
| W3-非表示大 | 大画面で非表示コンテンツ（より大きい992px） | それを試してみてください |
ナビゲーションクラス
| クラス | 定義 | |
|---|---|---|
| W3-ナビゲーションバー | ナビゲーションバー | それを試してみてください |
| 折りたたみナビゲーションバー | それを試してみてください | |
| W3-topnav | トップナビゲーションバー | それを試してみてください |
| W3-sidenav | サイド・ナビゲーション・バー | それを試してみてください |
| メインコンテンツをオーバーレイサイド・ナビゲーション・バー | それを試してみてください | |
| すべての主要なコンテンツをオーバーレイサイド・ナビゲーション・バー | それを試してみてください | |
| 右側のメインコンテンツをシフトサイド・ナビゲーション・バー | それを試してみてください | |
| オーバーレイの背景とサイド・ナビゲーション・バー | それを試してみてください | |
| W3-崩壊 | 全自動応答サイド・ナビゲーション | それを試してみてください |
| W3-dropnav | ドロップダウンナビゲーション | それを試してみてください |
| W3-ドロップダウン・クリック | クリッカブルドロップダウン要素 | それを試してみてください |
| W3-ドロップダウン・ホバー | Hoverableドロップダウン要素 | それを試してみてください |
| （W3-ナビゲーションバーで使用される）Hoverableドロップダウン要素 | それを試してみてください | |
| （W3-sidenavで使用される）Hoverableドロップダウン要素 | それを試してみてください | |
| （W3-topnavで使用される）Hoverableドロップダウン要素 | それを試してみてください | |
| W3-アコーディオン | 折りたたみ可能なコンテンツを非表示と表示 | それを試してみてください |
| W3-sidenavで使用クリッカブルアコーディオンとドロップダウン | それを試してみてください | |
| W3-ページネーション | ページネーションリンク | それを試してみてください |
ボタンのクラス
| クラス | 定義 | |
|---|---|---|
| W3-BTN | 長方形のHTMLボタン | それを試してみてください |
| 波及効果を持つ長方形HTMLボタン | それを試してみてください | |
| W3-BTN-フローティング | 円形の浮遊ボタン | それを試してみてください |
| 波及効果を持つ円形の浮遊ボタン | それを試してみてください | |
| W3-BTN-グループ | グループ化されたボタン | それを試してみてください |
| W3-BTN-ブロック | フル幅のボタン（100％） | それを試してみてください |
入力クラス
| クラス | 定義 | |
|---|---|---|
| W3-フォーム | W3-パディングと同じ | それを試してみてください |
| カードなどの入力フォーム | それを試してみてください | |
| W3-入力 | 入力要素 | それを試してみてください |
| 入力要素（トップラベル） | それを試してみてください | |
| 入力要素（下のラベル） | それを試してみてください | |
| W3-グループ | HTML要素のグループ | それを試してみてください |
| W3-ラベル | 入力ラベル | それを試してみてください |
| W3-検証 | 入力（変更色無効な入力を）検証 | それを試してみてください |
| W3-チェック | チェックボックスの入力タイプ | それを試してみてください |
| W3-ラジオ | 無線入力タイプ | それを試してみてください |
| W3-選択 | 入力select要素 | それを試してみてください |
| W3-アニメーション入力 | 100％の入力の幅をアニメーション | それを試してみてください |
モーダルクラス
| クラス | 定義 | |
|---|---|---|
| W3-モーダル | モーダルコンテナ | それを試してみてください |
| W3-モーダルコンテンツ | モーダルポップアップ要素 | それを試してみてください |
| W3-ツールチップ | ツールチップの要素 | それを試してみてください |
| W3-テキスト | ツールチップテキスト | それを試してみてください |
| ツールチップインライン | それを試してみてください |
アニメーションクラス
| クラス | 定義 | |
|---|---|---|
| W3-アニメーショントップ | 0PXを最-300pxから要素をアニメーション化 | それを試してみてください |
| W3-アニメーション - 左 | 左-300pxから0PXに要素をアニメーション化 | それを試してみてください |
| W3-アニメーションボトム | 0PXに底-300pxから要素をアニメーション化 | それを試してみてください |
| W3-アニメイト右 | 0PXに右-300pxから要素をアニメーション化 | それを試してみてください |
| W3-アニメーション、不透明度 | 0から1までの要素の不透明度をアニメーション化 | それを試してみてください |
| W3-アニメーションズーム | サイズは0から100％までの要素をアニメーション化 | それを試してみてください |
| W3-アニメーションフェード | （INとフェードアウト）0から1及び1から0に要素の不透明度をアニメーション化 | それを試してみてください |
| W3-スピン | アイコンを360度スピン | それを試してみてください |
| 任意の要素を360度スピン | それを試してみてください | |
| W3-アニメーション入力 | 100％の入力フィールドの幅をアニメーション | それを試してみてください |
ユーティリティクラス
| クラス | 定義 | |
|---|---|---|
| W3-小さな | 10ピクセルのフォントサイズを指定します。 | それを試してみてください |
| W3-小 | 12ピクセルのフォントサイズを指定します。 | それを試してみてください |
| W3-大 | 20ピクセルのフォントサイズを指定します。 | それを試してみてください |
| W3-XLARGE | 24ピクセルのフォントサイズを指定します。 | それを試してみてください |
| W3-xxlarge | 32ピクセルのフォントサイズを指定します。 | それを試してみてください |
| W3-xxxlarge | 48ピクセルのフォントサイズを指定します。 | それを試してみてください |
| W3-ジャンボ | 64ピクセルのフォントサイズを指定します。 | それを試してみてください |
| W3-スリム | スリムなテキストを指定します | それを試してみてください |
| W3-ワイド | 広いテキストを指定します | それを試してみてください |
| W3-垂直 | 縦書きテキストを指定します。 | それを試してみてください |
| W3トップ | ページの上部に固定されたコンテンツ | それを試してみてください |
| W3-センター | 中心のコンテンツ | それを試してみてください |
| W3-円 | 丸で囲まれたコンテンツ | それを試してみてください |
| W3-隠します | 隠された内容（表示：なし） | それを試してみてください |
| W3-ショー | 表示内容（表示：ブロック） | それを試してみてください |
| W3-ショーブロック | W3-ショーのエイリアス（表示：ブロック） | それを試してみてください |
| W3-ショーインラインブロック | インラインブロックとして表示するコンテンツ（表示：インラインブロック） | それを試してみてください |
| W3-隠す小 | 小さな画面上で非表示コンテンツ（以下601px） | それを試してみてください |
| W3非表示媒体 | メディアの画面上のコンテンツを非表示にします | それを試してみてください |
| W3-非表示大 | 大画面で非表示コンテンツ（より大きい992px） | それを試してみてください |
| W3-左 | 左調整後のコンテンツ | それを試してみてください |
| W3-右 | 右調整後のコンテンツ | それを試してみてください |
| W3-左揃え | 左揃えのテキスト | それを試してみてください |
| W3-右揃え | 右揃えテキスト | それを試してみてください |
| W3-正当化 | 左右の整列テキスト | それを試してみてください |
| W3-表示コンテナ | W3-display- クラスのコンテナ（位置：相対） | それを試してみてください |
| W3-表示TOPLEFT | 左上隅の位置コンテンツ | それを試してみてください |
| W3-表示topright | 右上に位置コンテンツ | それを試してみてください |
| W3-表示bottomleft | 左下隅に位置コンテンツ | それを試してみてください |
| W3-表示bottomright | 右下の位置コンテンツ | それを試してみてください |
| W3-表示ミドル | 真ん中に位置コンテンツ（水平方向と垂直方向） | それを試してみてください |
| W3-表示topmiddle | 要素の上部の真ん中に位置コンテンツ | それを試してみてください |
| W3-表示bottommiddle | 要素の底の真ん中に位置コンテンツ | それを試してみてください |
| W3-セリフ | セリフにフォントを変更します | それを試してみてください |
| W3-不透明 | テキストに不透明度を追加します。 | それを試してみてください |
| 任意の要素に不透明度を追加します。 | それを試してみてください | |
| W3-オーバーレイ | オーバーレイ効果を作成します。 | それを試してみてください |
| W3-テキストの影 | テキストに影を追加します。 | それを試してみてください |
カラークラス
| クラス | 定義 | |
|---|---|---|
| W3-赤 | 背景色の赤 | それを試してみてください |
| W3-ピンク | 背景色ピンク | それを試してみてください |
| W3-紫色 | 紫色の背景色 | それを試してみてください |
| W3-ディープパープル | 背景色濃い紫色 | それを試してみてください |
| W3-藍 | 背景色インディゴ | それを試してみてください |
| W3-ブルー | 背景色の青 | それを試してみてください |
| W3-水色 | 背景色ライトブルー | それを試してみてください |
| W3-シアン | 背景色のシアン | それを試してみてください |
| W3-アクア | 背景色のアクア | それを試してみてください |
| W3-ティール | 背景色ティール | それを試してみてください |
| W3-グリーン | 背景色の緑 | それを試してみてください |
| W3-ライトグリーン | 背景色ライトグリーン | それを試してみてください |
| W3ライム | 背景色ライム | それを試してみてください |
| W3-砂 | 背景色の砂 | それを試してみてください |
| W3-カーキ | 背景色カーキ | それを試してみてください |
| W3-黄色 | 黄色の背景色 | それを試してみてください |
| W3-アンバー | 背景色アンバー | それを試してみてください |
| W3-オレンジ | 背景色オレンジ | それを試してみてください |
| W3-ディープオレンジ | 背景色、深いオレンジ | それを試してみてください |
| W3-ブルーグレー | 背景色ブルーグレー | それを試してみてください |
| W3-ブラウン | 背景色茶色 | それを試してみてください |
| W3-ライトグレー | 背景色ライトグレー | それを試してみてください |
| W3-グレー | 背景色グレー | それを試してみてください |
| W3-ダークグレー | 背景色ダークグレイ | それを試してみてください |
| W3-黒 | 背景色を黒 | それを試してみてください |
| W3-淡赤 | 背景色淡い赤 | それを試してみてください |
| W3-淡黄色 | 背景色淡黄色 | それを試してみてください |
| W3-淡緑色 | 背景色薄緑色 | それを試してみてください |
| W3-淡青 | 背景色淡いブルー | それを試してみてください |
| W3-透明 | 透明な背景色 |
ホバークラス
上記のすべての色はホバークラスとしても使用することができます。
| クラス | 定義 | |
|---|---|---|
| W3-ホバーホワイト | ホバー色ホワイト | それを試してみてください |
| W3-ホバー黒 | ホバー色黒 | それを試してみてください |
| W3-ホバー赤 | ホバー色の赤 | それを試してみてください |
| W3-ホバーブルー | ホバー色の青 | それを試してみてください |
| W3-ホバー緑色 | ホバー色緑 | それを試してみてください |
| W3-ホバー - アクア | ホバー色のアクア | それを試してみてください |
| W3-ホバー - オレンジ | ホバーオレンジ色 | それを試してみてください |
| W3-ホバー、グレー | ホバー色グレー | それを試してみてください |
| W3-ホバー-淡緑色 | ホバー色薄緑色 | それを試してみてください |
| W3-ホバーテキスト、赤 | 赤のホバーテキストの色 | それを試してみてください |
| W3-ホバーテキスト、赤 | ホバーテキストの色青 | それを試してみてください |
| W3-ホバーテキスト・グリーン | ホバーテキストの色緑 | それを試してみてください |
| W3-ホバーテキスト紫色 | ホバーテキストの色パープル | それを試してみてください |
| W3-ホバー、ボーダー色 | 境界線の色を合わせます | それを試してみてください |
| W3-ホバー、不透明度 | ホバー上の要素に透明性を追加します（60％不透明度） | それを試してみてください |
| W3-ホバーシャドウ | ホバー上の要素に影を追加します。 | それを試してみてください |
| W3-ホバーなし | 素子からのホバー効果を削除します。 | それを試してみてください |
ラウンドクラス
| クラス | 定義 | |
|---|---|---|
| W3-ラウンド | 要素を丸く（ボーダー半径）4PX | それを試してみてください |
| W3丸小 | 要素を丸く（ボーダー半径）2ピクセル | それを試してみてください |
| W3-ラウンドメディア | 要素を丸く（ボーダー半径）4PX | それを試してみてください |
| W3-ラウンド大 | 要素を丸く（ボーダー半径）8px | それを試してみてください |
| W3-ラウンドXLARGE | 要素丸め（ボーダー半径）に16px | それを試してみてください |
| W3-ラウンドxxlarge | 要素丸め（ボーダー半径）32PX | それを試してみてください |
| W3-ラウンドジャンボ | 要素丸め（ボーダー半径）64px | それを試してみてください |
パディングクラス
| クラス | 定義 | |
|---|---|---|
| W3-パディング-0 | 要素からすべてのパディングを削除します。 | それを試してみてください |
| W3-パディング | パディング8px上下し、16pxに左右。 | それを試してみてください |
| W3-パディング、小さな | パディング2ピクセルの上部と底部と、4PX左右。 | それを試してみてください |
| W3-パディング小 | パディング4PX上下、および8px左右。 | それを試してみてください |
| W3-パディング媒体 | パディング8px上下し、16pxに左右。 | それを試してみてください |
| W3-パディング大 | パディング12ピクセルの上部と底部と、は24px左右。 | それを試してみてください |
| W3-パディングXLARGE | パディングに16pxの上部と底部と、32PX左右。 | それを試してみてください |
| W3-パディングxxlarge | パディングは24pxの上部と底部と、48px左右。 | それを試してみてください |
| W3-パディングジャンボ | パディング32PX上下し、64px左右。 | それを試してみてください |
| W3-パディングトップ | パディングトップ8px | それを試してみてください |
| W3-パディング右 | 右に16pxのパディング | それを試してみてください |
| W3-パディング底 | パディング底8px | それを試してみてください |
| W3-パディング左 | パディング左に16px | それを試してみてください |
| W3-パディング-HOR-4 | パディング4PX上下 | それを試してみてください |
| W3-パディング-HOR-8 | パディング8px上下 | それを試してみてください |
| W3-パディング-HOR-12 | パディング12ピクセルのトップとボトム | それを試してみてください |
| W3-パディング-HOR-16 | パディングに16pxのトップとボトム | それを試してみてください |
| W3-パディング-HOR-24 | パディングは24pxのトップとボトム | それを試してみてください |
| W3-パディング-HOR-32 | パディング32PX上下 | それを試してみてください |
| W3-パディング-HOR-48 | パディング48px上下 | それを試してみてください |
| W3-パディング-HOR-64 | パディング64px上下 | それを試してみてください |
| W3-パディング-HOR-128 | パディング128pxトップとボトム | それを試してみてください |
| W3-パディング-VER-4 | パディング4PX左右しました。 | それを試してみてください |
| W3-パディング-VER-8 | パディング8px左右しました。 | それを試してみてください |
| W3-パディング-VER-16 | パディングに16px左右します。 | それを試してみてください |
| W3-パディング-VER-24 | パディングは24px左右します。 | それを試してみてください |
| W3-パディング-VER-32 | パディング32PX左右します。 | それを試してみてください |
| W3-パディング-VER-48 | パディング48px左右します。 | それを試してみてください |
| W3-パディング-VER-64 | パディング64px左右します。 | それを試してみてください |
マージンクラス
| クラス | 定義 | |
|---|---|---|
| W3-マージン0 | 要素からすべての余白を削除します。 | それを試してみてください |
| W3-マージン | マージンに16px | それを試してみてください |
| W3-マージントップ | マージントップに16px | それを試してみてください |
| W3-マージン右 | マージン右に16px | それを試してみてください |
| W3-マージン底 | マージン底に16px | それを試してみてください |
| W3-のmargin-left | マージン左に16px | それを試してみてください |
ボーダークラス
| クラス | 定義 | |
|---|---|---|
| W3-ボーダー | 罫線（上、右、下、左） | それを試してみてください |
| W3-のborder-top | ボーダートップ | それを試してみてください |
| W3-のborder-right | ボーダー右 | それを試してみてください |
| W3-のborder-bottom | ボーダーボトム | それを試してみてください |
| W3-のborder-left | ボーダー左 | それを試してみてください |
| W3-ボーダー-0 | すべての罫線を削除します | それを試してみてください |
| W3-ボーダー色 | （赤のような、など）指定された色の任意の定義された境界線を表示します | それを試してみてください |
| W3-bottombar | 要素に厚い底部の境界線（バー）を追加します | それを試してみてください |
| W3-leftbar | 要素に厚い左の境界（バー）を追加します | それを試してみてください |
| W3-rightbar | 要素に厚い右境界線（バー）を追加します | それを試してみてください |
| W3-topbar | 要素に厚い上部の境界線（バー）を追加します | それを試してみてください |
| W3-ホバー、ボーダー色 | Hoverable境界線の色 | それを試してみてください |