| クラス | 定義 | |
|---|---|---|
| w3-container | HTML コンテンツのコンテナ (左右に 16px のパディングが追加される) | Try it |
| color クラスと一緒に使用する | Try it | |
| ヘッダーとして使用する | Try it | |
| フッターとして使用する | Try it | |
| w3-section | HTML コンテンツのコンテナ (左右に 16px のパディングが追加される) | Try it |
| w3-panel | w3-container + w3-section に同じ | Try it |
| ノート（注意書き）の表示に使用する | Try it | |
| 引用の表示に使用する | Try it | |
| w3-badge | 円形のバッジ 8 | Try it |
| w3-tag | 矩形のタグ More Later ! | Try it |
| w3-ul | 順序なしリスト | Try it |
| w3-display-container | w3-display-classes のコンテナ (要素を左上隅、右上隅、左下隅、右下隅かコンテナの中間に配置する) | Try it |
| w3-blockquote | 2.0 で削除 (代わりに w3-leftbar を使用する) | Try it |
| w3-example | 例のコンテナ | Try it |
| w3-code | コードのコンテナ | Try it |
w3-codespan |
インラインコ-ドのコンテナ (コード・スニップレット用) | Try it |
| w3-progress-container | プログレスバーのコンテナ | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-table | HTML テーブルのコンテナ | Try it |
| w3-striped | ストライプ付きテーブル | Try it |
| w3-border | ボーダー付きテーブル | Try it |
| w3-bordered | ボーダーの線 | Try it |
| w3-centered | 中央揃えテーブル | Try it |
| w3-hoverable | ホバー効果付きテーブル | Try it |
| w3-table-all | 全プロパティの設定 | Try it |
| w3-striped、w3-border、w3-bordered 付き | Try it | |
| 色付き見出し | Try it | |
| w3-responsible 付き | Try it | |
| w3-tiny 付き | Try it | |
| w3-small 付き | Try it | |
| w3-large 付き | Try it | |
| w3-xlarge 付き | Try it | |
| w3-xxlarge 付き | Try it | |
| w3-xxxlarge 付き | Try it | |
| color 付き | Try it | |
| w3-jumbo 付き | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-card | HTML コンテンツのコンテナ (ボーダー付き) | Try it |
| w3-card-2 | HTML コンテンツのコンテナ (2px の影付きボーダー) | Try it |
| w3-card-4 | HTML コンテンツのコンテナ (4px の影付きボーダー) | Try it |
| w3-card-8 | HTML コンテンツのコンテナ (8px の影付きボーダー) | Try it |
| w3-card-12 | HTML コンテンツのコンテナ (12px の影付きボーダー) | Try it |
| w3-card-16 | HTML コンテンツのコンテナ (16px の影付きボーダー) | Try it |
| w3-card-24 | HTML コンテンツのコンテナ (24px の影付きボーダー) | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-row | 流動レスポンシブ・クラスの 1 行のコンテナ | Try it |
| w3-row-padding | 全てのカラムがデフォルトのパディングを持つ行 | Try it |
| w3-content | 固定サイズの中央揃えコンテンツのコンテナ | Try it |
| w3-half | カラムが画面 1/2 のコンテナ | Try it |
| w3-third | カラムが画面 1/3 のコンテナ | Try it |
| w3-twothird | カラムが画面 2/3 のコンテナ | Try it |
| w3-quarter | カラムが画面 1/4 のコンテナ | Try it |
| w3-threequarter | カラムが画面 3/4 のコンテナ | Try it |
| w3-col | HTML コンテンツのカラム・コンテナ | Try it |
| l1 - l12 | 大型画面用のレスポンシブ・サイズ | Try it |
| m1 - m12 | 中型画面用のレスポンシブ・サイズ | Try it |
| s1 - s12 | 小型画面用のレスポンシブ・サイズ | Try it |
| w3-hide-small | 小型画面（601px 未満）では表示しないコンテンツ | Try it |
| w3-hide-medium | 中型画面では表示しないコンテンツ | Try it |
| w3-hide-large | 大型画面（992px 超）では表示しないコンテンツ | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-navbar | ナビゲーション・バー | Try it |
| 折畳み可能なナビゲーション・バー | Try it | |
| w3-dropnav | 幅全体を占めるドロップダウン・ナビゲーション | Try it |
| w3-topnav | ページ上部のナビゲーション・バー | Try it |
| w3-sidenav | サイド・ナビゲーション・バー | Try it |
| メインコンテンツの一部をオーバレイするサイド・ナビゲーション・バー | Try it | |
| メインコンテンツ全部をオーバレイするサイド・ナビゲーション・バー | Try it | |
| メインコンテンツを右にシフトするサイド・ナビゲーション・バー | Try it | |
| 背景にオーバレイを使用するサイド・ナビゲーション・バー | Try it | |
| 右側のサイド・ナビゲーション | Try it | |
| w3-collapse | 完全自動のレスポンシブ・サイド・ナビゲーション | Try it |
| 完全自動のレスポンシブ・右サイド・ナビゲーション | Try it | |
| w3-dropdown-click | クリック可能なドロップダウン要素 | Try it |
| w3-dropdown-hover | ホバー効果付きドロップダウン要素 | Try it |
| ホバー効果付きドロップダウン要素 (w3-navbar で使用) | Try it | |
| ホバー効果付きドロップダウン要素 (w3-sidenav で使用) | Try it | |
| ホバー効果付きドロップダウン要素 (w3-topnav で使用) | Try it | |
| w3-accordion | 非表示と表示で折畳み可能なコンテンツ | Try it |
| w3-sidenav で使用するクリック可能なアコーディオンとドロップダウン | Try it | |
| w3-pagination | ページネーション・リンク | Try it |
| w3-navitem | ナビゲーションバー内のテキスト・スタイル（リンクを使用したくない場合） | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-btn | 矩形の HTML ボタン | Try it |
| 波及効果付き矩形の HTML ボタン | Try it | |
| w3-btn-floating | 円形のフローティング・ボタン | Try it |
| 波及効果付き円形のフローティング・ボタン | Try it | |
| w3-btn-group | グループ化したボタン | Try it |
| w3-btn-bar | ボタン・バー (背景色とホバー効果の違いを除き w3-btn-group に同じ) | Try it |
| w3-btn-block | 幅全体（100%）を占めるボタン | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-form | w3-padding に同じ | Try it |
| カードのような入力フォーム | Try it | |
| w3-input | 入力要素 | Try it |
| 入力要素 (上ラベル) | Try it | |
| 入力要素 (下ラベル) | Try it | |
| w3-group | HTML 要素のグループ | Try it |
| w3-label | 入力ラベル | Try it |
| w3-validate | 検証入力 (入力が無効なときに色が変る) | Try it |
| w3-check | チェックボックス入力タイプ | Try it |
| w3-radio | ラジオ入力タイプ | Try it |
| w3-select | 入力 select 要素 | Try it |
| w3-animate-input | 入力の幅を 100% にアニメーション | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-modal | モーダル・コンテナ | Try it |
| w3-modal-content | モーダル・ポップアップ要素 | Try it |
| w3-tooltip | ツールチップ要素 | Try it |
| w3-text | ツールチップ・テキスト | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-animate-top | 画面の上 0px から 300px まで要素をアニメーション | Try it |
| w3-animate-left | 画面の左 -300px から 0px まで要素をアニメーション | Try it |
| w3-animate-bottom | 画面の下 -300px から 0px まで要素をアニメーション | Try it |
| w3-animate-right | 画面の右 -300px から 0px まで要素をアニメーション | Try it |
| w3-animate-opacity | 要素の不透明度を 0 から 1 へアニメーション | Try it |
| w3-animate-zoom | 要素のサイズを 0 から 100% へアニメーション | Try it |
| w3-animate-fading | 要素の不透明度を 0 から 1 へ、次に 1 から 0 へアニメーション (フェードインとフェードアウト) | Try it |
| w3-spin | アイコンを 360 度回転する | Try it |
| 要素を 360 度回転する | Try it | |
| w3-animate-input | 入力フィールドの幅を 100% にアニメーション | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-tiny | 10 ピクセルのフォント・サイズを指定 | Try it |
| w3-small | 12 ピクセルのフォント・サイズを指定 | Try it |
| w3-large | 20 ピクセルのフォント・サイズを指定 | Try it |
| w3-xlarge | 24 ピクセルのフォント・サイズを指定 | Try it |
| w3-xxlarge | 32 ピクセルのフォント・サイズを指定 | Try it |
| w3-xxxlarge | 48 ピクセルのフォント・サイズを指定 | Try it |
| w3-jumbo | 64 ピクセルのフォント・サイズを指定 | Try it |
| w3-slim | 幅の狭いテキストを指定 | Try it |
| w3-wide | 幅の広いテキストを指定 | Try it |
| w3-serif | フォントを serif に変更 | Try it |
| w3-vertical | 縦向きのテキストを指定 | Try it |
| w3-text-shadow | テキストに影を追加 | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-center | 中央揃えのコンテンツ | Try it |
| w3-left | 左に調整したコンテンツ（Left adjusted content） | Try it |
| w3-right | 右に調整したコンテンツ（Right adjusted content） | Try it |
| w3-left-align | 左揃えテキスト（Left aligned text） | Try it |
| w3-right-align | 右揃えテキスト（Right aligned text） | Try it |
| w3-justify | 左右揃え（両端揃え）テキスト | Try it |
| w3-circle | 円形のコンテンツ | Try it |
| w3-hide | 非表示コンテンツ (display:none) | Try it |
| w3-show | 表示コンテンツ (display:block) | Try it |
| w3-show-block | w3-show の別名 (display:block) | Try it |
| w3-show-inline-block | インラインブロックでコンテンツを表示 (display:inline-block) | Try it |
| w3-top | ページの上部にコンテンツを固定 | Try it |
| w3-bottom | ページの下部にコンテンツを固定 | Try it |
| w3-display-container | w3-display-classes のコンテナ (position: relative) | Try it |
| w3-display-topleft | 左上隅にコンテンツを配置 | Try it |
| w3-display-topright | 右上隅にコンテンツを配置 | Try it |
| w3-display-bottomleft | 左下隅にコンテンツを配置 | Try it |
| w3-display-bottomright | 右下隅にコンテンツを配置 | Try it |
| w3-display-middle | 中間にコンテンツを配置 (横と縦の) | Try it |
| w3-display-topmiddle | 要素の上部中間にコンテンツを配置 | Try it |
| w3-display-bottommiddle | 要素の下部中間にコンテンツを配置 | Try it |
| w3-opacity | 要素に不透明度/透明度を追加 (不透明度：0.6) | Try it |
| テキストにに不透明度/透明度を追加 | Try it | |
| w3-opacity-off | 不透明度/透明度をオフにする (不透明度：1) | Try it |
| w3-overlay | オーバーレイ効果を作る | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-red | 背景色を赤にする/td> | Try it |
| w3-pink | 背景色をピンクにする/td> | Try it |
| w3-purple | 背景色を紫にする/td> | Try it |
| w3-deep-purple | 背景色を濃紫色にする/td> | Try it |
| w3-indigo | 背景色をインディゴにする/td> | Try it |
| w3-blue | 背景色を青にする/td> | Try it |
| w3-light-blue | 背景色をライトブルーにする/td> | Try it |
| w3-cyan | 背景色をシアンにする/td> | Try it |
| w3-aqua | 背景色をアクアにする/td> | Try it |
| w3-teal | 背景色をティールにする/td> | Try it |
| w3-green | 背景色を緑にする/td> | Try it |
| w3-light-green | 背景色をライトグリーンにする/td> | Try it |
| w3-lime | 背景色をライムにする/td> | Try it |
| w3-sand | 背景色をサンドにする/td> | Try it |
| w3-khaki | 背景色をカーキにする/td> | Try it |
| w3-yellow | 背景色を黄色にする/td> | Try it |
| w3-amber | 背景色を琥珀にする/td> | Try it |
| w3-orange | 背景色をオレンジにする/td> | Try it |
| w3-deep-orange | 背景色を濃いオレンジにする/td> | Try it |
| w3-blue-grey | 背景色をブルーグレーにする/td> | Try it |
| w3-brown | 背景色を茶色にする/td> | Try it |
| w3-light-grey | 背景色をライトグレーにする/td> | Try it |
| w3-grey | 背景色を灰色にする/td> | Try it |
| w3-dark-grey | 背景色を暗いグレーにする/td> | Try it |
| w3-black | 背景色を黒にする/td> | Try it |
| w3-pale-red | 背景色を淡い赤にする/td> | Try it |
| w3-pale-yellow | 背景色を淡い黄色にする/td> | Try it |
| w3-pale-green | 背景色を淡い緑にする/td> | Try it |
| w3-pale-blue | 背景色を淡い青にする/td> | Try it |
| w3-transparent | 透明な背景色 |
上のすべての色は、ホバー・クラスとして使用することもできます：
| クラス | 定義 | |
|---|---|---|
| w3-hover-white | ホバー色が白 | Try it |
| w3-hover-black | ホバー色が黒 | Try it |
| w3-hover-red | ホバー色が赤 | Try it |
| w3-hover-blue | ホバー色が青 | Try it |
| w3-hover-green | ホバー色が緑 | Try it |
| w3-hover-aqua | ホバー色がアクア | Try it |
| w3-hover-orange | ホバー色がオレンジ | Try it |
| w3-hover-grey | ホバー色が灰色 | Try it |
| w3-hover-pale-green | ホバー色が淡い緑 | Try it |
| w3-hover-text-red | ホバーテキスト色が赤 | Try it |
| w3-hover-text-blue | ホバーテキスト色が青 | Try it |
| w3-hover-text-green | ホバーテキスト色が緑 | Try it |
| w3-hover-text-purple | ホバーテキスト色が紫 | Try it |
| w3-hover-border-color | ホバー・ボーダーの色 | Try it |
| w3-hover-opacity | ホバー時の要素に不透明度を追加 (不透明度 60%) | Try it |
| w3-hover-opacity-off | ホバー時の要素から不透明度を削除 (不透明度 100%) | Try it |
| w3-hover-shadow | ホバー時の要素へ影を追加 | Try it |
| w3-hover-none | 要素からのホバー効果を削除 | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-round | 要素の角丸（ボーダー半径）4PX | Try it |
| w3-round-small | 要素の角丸（ボーダー半径）2PX | Try it |
| w3-round-medium | 要素の角丸（ボーダー半径）4PX | Try it |
| w3-round-large | 要素の角丸（ボーダー半径）8PX | Try it |
| w3-round-xlarge | 要素の角丸（ボーダー半径）16PX | Try it |
| w3-round-xxlarge | 要素の角丸（ボーダー半径）32PX | Try it |
| w3-round-jumbo | 要素の角丸（ボーダー半径）64PX | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-padding-0 | 要素から全パディングを削除 | Try it |
| w3-padding | 上下に 8px、左右に 16px のパディング | Try it |
| w3-padding-tiny | 上下に 2px、左右に 4px のパディング | Try it |
| w3-padding-small | 上下に 4px、左右に 8px のパディング | Try it |
| w3-padding-medium | 上下に 8px、左右に 16px のパディング | Try it |
| w3-padding-large | 上下に 12px、左右に 24px のパディング | Try it |
| w3-padding-xlarge | 上下に 16px、左右に 32px のパディング | Try it |
| w3-padding-xxlarge | 上下に 24px、左右に 48px のパディング | Try it |
| w3-padding-jumbo | 上下に 32px、左右に 64px のパディング | Try it |
| w3-padding-top | 上に 8px のパディング | Try it |
| w3-padding-right | 右に 16px のパディング | Try it |
| w3-padding-bottom | 下に 8px のパディング | Try it |
| w3-padding-left | 左に 16px のパディング | Try it |
| w3-padding-4 | 上下に 4px のパディング | Try it |
| w3-padding-8 | 上下に 8px のパディング | Try it |
| w3-padding-12 | 上下に 12px のパディング | Try it |
| w3-padding-16 | 上下に 16px のパディング | Try it |
| w3-padding-24 | 上下に 24px のパディング | Try it |
| w3-padding-32 | 上下に 32px のパディング | Try it |
| w3-padding-48 | 上下に 48px のパディング | Try it |
| w3-padding-64 | 上下に 64px のパディング | Try it |
| w3-padding-128 | 上下に 128px のパディング | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-margin-0 | 要素から全マージンを削除 | Try it |
| w3-margin | 16px のマージン | Try it |
| w3-margin-top | 16px の上マージン | Try it |
| w3-margin-right | 16px の右マージン | Try it |
| w3-margin-bottom | 16px の下マージン | Try it |
| w3-margin-left | 16px の左マージン | Try it |
| クラス | 定義 | |
|---|---|---|
| w3-border | ボーダー (上、右、下、左) | Try it |
| w3-border-top | 上ボーダー | Try it |
| w3-border-right | 右ボーダー | Try it |
| w3-border-bottom | 下ボーダー | Try it |
| w3-border-left | 左ボーダー | Try it |
| w3-border-0 | 全ボーダーの削除 | Try it |
| w3-border-color | あらゆる定義済みのボーダーを指定の色（赤など）で表示 | Try it |
| w3-bottombar | 要素に太い下ボーダーを追加 | Try it |
| w3-leftbar | 要素に太い左ボーダーを追加 | Try it |
| w3-rightbar | 要素に太い右ボーダーを追加 | Try it |
| w3-topbar | 要素に太い上ボーダーを追加 | Try it |
| w3-hover-border-color | ホバー効果付きボーダーの色 | Try it |