フォーラム | 最新のWeb開発のチュートリアル
 

W3.CSSリファレンスマニュアル


コンテナクラス

クラス 定義
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境界線の色 それを試してみてください

Hi Traveller Fashion Tomorrow Startups Daily News Fit Science Amazing Baby Yup This is Japan Take Film Art In Life