W3.CSSリファレンス
W3.CSSクラス
クラス |
定義 |
|
w3-コンテナ |
左右に16pxのパディングがあるHTMLコンテナ |
|
|
ヘッダーとして使用 |
|
|
フッターとして使用 |
|
w3-パネル |
左右に16ピクセルのパディングと上下に16ピクセルの余白があるHTMLコンテナ |
|
|
メモを表示するために使用されます |
|
|
見積もりを表示するために使用されます |
|
w3-バッジ |
円形バッジ |
|
w3日 |
長方形のタグ |
|
w3-ul |
順不同リスト |
|
w3-display-container |
w3-display- classesのコンテナ(コンテナ内の要素の配置を可能にします) |
|
w3-ブロック |
任意の要素の全幅を定義するために使用できるクラス |
|
w3-コード |
コードコンテナ |
|
w3-コードスパン |
インラインコードコンテナ(コードスニペット用) |
|
w3-コンテンツ |
固定サイズ中心のコンテンツ用のコンテナ |
|
w3車 |
レスポンシブサイズ中心のコンテンツ用のコンテナ |
|
w3-ストレッチ |
左右の余白を削除するクラス(特に、パディングされた行のストレッチ(w3-row-padding)に役立ちます) |
|
クラス |
定義 |
|
w3-テーブル |
HTMLテーブルのコンテナ |
|
w3-ストライプ |
縞模様のテーブル |
|
w3-ボーダー |
縁取りテーブル |
|
w3-ボーダー |
境界線 |
|
w3中心 |
中央のテーブル |
|
w3-ホバリング可能 |
ホバリング可能なテーブル |
|
w3-テーブル-すべて |
すべてのプロパティセット |
|
|
w3-striped、w3-border、およびw3-borderedを使用 |
|
|
色付きの頭で |
|
|
w3レスポンシブ |
|
|
w3-tinyで |
|
|
w3-small付き |
|
|
w3-ラージ付き |
|
|
w3-xlargeを使用 |
|
|
w3-xxlargeを使用 |
|
|
w3-xxxlargeで |
|
|
カラー付き |
|
|
w3-ジャンボ付き |
|
w3レスポンシブ |
レスポンシブテーブルを作成します |
|
クラス |
定義 |
|
w3-カード |
w3-card-2と同じ |
|
w3-カード-2 |
HTMLコンテンツのコンテナ(2pxの境界線付きシャドウ) |
|
w3-カード-4 |
HTMLコンテンツのコンテナ(4pxの境界線付きシャドウ) |
|
クラス |
定義 |
|
w3-行 |
流体レスポンシブコンテンツの1行のコンテナ |
|
w3-行パディング |
すべての列にデフォルトのパディングがある行 |
|
w3車 |
レスポンシブサイズ中心のコンテンツ用のコンテナ |
|
w3-ストレッチ |
左右の余白を取り除くクラス |
|
w3-半分 |
ハーフ(1/2)スクリーンカラムコンテナ |
|
w3-3番目 |
3番目(1/3)の画面列コンテナー |
|
w3-2 / 3 |
2/3(2/3)画面列コンテナー |
|
w3-クォーター |
クォーター(1/4)スクリーンカラムコンテナー |
|
w3-スリークォーター |
4分の3(3/4)スクリーンカラムコンテナ |
|
w3-col |
HTMLコンテンツの列コンテナ |
|
w3-rest |
列幅の残りを占有します |
|
|
|
|
l1-l12 |
大画面のレスポンシブサイズ |
|
m1-m12 |
中画面のレスポンシブサイズ |
|
s1-s12 |
小さな画面のレスポンシブサイズ |
|
|
|
|
w3-hide-small |
小さな画面(601px未満)でコンテンツを非表示にする |
|
w3-hide-medium |
中画面のコンテンツを非表示にする |
|
w3-非表示-大 |
大画面(992pxより大きい)のコンテンツを非表示にする |
|
|
|
|
w3-画像 |
レスポンシブ画像 |
|
|
|
|
w3-モバイル |
任意の要素にモバイルファーストの応答性を追加します。 モバイルデバイスで要素をブロック要素として表示します。 |
|
クラス |
定義 |
|
w3-セル行 |
レイアウト列(セル)のコンテナー。 |
|
w3セル |
レイアウト列(セル)。 |
|
w3-セルトップ |
コンテンツを列(セル)の上部に揃えます。 |
|
w3-セル-ミドル |
コンテンツを列(セル)の垂直方向の中央に揃えます。 |
|
w3-セルボトム |
コンテンツを列(セル)の下部に揃えます。 |
|
クラス |
定義 |
|
w3-bar |
水平バー |
|
w3-バーブロック |
垂直バー |
|
w3-bar-item |
バーアイテムに共通のスタイルを提供します |
|
w3-サイドバー |
サイドバー |
|
|
サイドバーには、すべての種類のコンテンツを含めることができます |
|
|
メインコンテンツをオーバーレイするサイドバー |
|
|
すべてのメインコンテンツをオーバーレイするサイドバー |
|
|
メインコンテンツを右にシフトするサイドバー |
|
|
背景がオーバーレイされたサイドバー |
|
|
右側のサイドバー |
|
w3-崩壊 |
w3-サイドバーと一緒に使用して、完全に自動化されたレスポンシブサイドナビゲーションを作成します。このクラスが機能するには、ページのコンテンツが「w3-main」クラス内にある必要があります |
|
w3-メイン |
レスポンシブサイドナビゲーションにw3-collapseクラスを使用する場合のページコンテンツのコンテナ |
|
|
全自動右側レスポンシブサイドナビゲーション |
|
w3-ドロップダウン-クリック |
クリック可能なドロップダウン要素 |
|
w3-ドロップダウン-ホバー |
ホバー可能なドロップダウン要素 |
|
|
ホバー可能なドロップダウン要素(w3バーで使用) |
|
|
ホバー可能なドロップダウン要素(w3-bar-blockで使用) |
|
|
ホバー可能なドロップダウン要素(w3-サイドバーで使用) |
|
クラス |
定義 |
|
w3ボタン |
ホバーに灰色の背景色の長方形のボタン |
|
w3-btn |
ホバーに影のある長方形のボタン |
|
w3-サークル |
円形のボタンを作成するために使用できます |
|
w3-リップル |
波及効果のある長方形のボタン |
|
|
波及効果のある円形フローティングボタン |
|
w3-bar |
水平バーの要素(ボタンなど)をグループ化するために使用できます |
|
w3-ブロック |
全幅w3ボタンを定義するために使用できるクラス |
|
|
全幅w3-btn |
|
|
全幅円形ボタン |
|
クラス |
定義 |
|
w3-入力 |
入力要素 |
|
|
カードとしての入力フォーム |
|
|
入力要素(トップラベル) |
|
|
入力要素(下のラベル) |
|
w3-チェック |
チェックボックス入力タイプ |
|
w3ラジオ |
ラジオ入力タイプ |
|
w3-選択 |
選択要素を入力します |
|
w3-アニメーション入力 |
入力の幅を100%にアニメーション化します |
|
クラス |
定義 |
|
w3-モーダル |
モーダルコンテナ |
|
w3-モーダルコンテンツ |
モーダルポップアップ要素 |
|
w3-ツールチップ |
ツールチップ要素 |
|
w3-テキスト |
ツールチップテキスト |
|
クラス |
定義 |
|
w3-animate-top |
上から-300pxから0pxまで要素をアニメーション化します |
|
w3-animate-左 |
要素を左から-300pxから0pxまでアニメーション化します |
|
w3-animate-bottom |
下から-300pxから0pxまで要素をアニメーション化します |
|
w3-アニメーション-右 |
要素を右-300pxから0pxまでアニメーション化します |
|
w3-アニメーション-不透明度 |
要素の不透明度を0から1までアニメーション化します |
|
w3-animate-zoom |
サイズが0〜100%の要素をアニメーション化します |
|
w3-アニメーションフェード |
要素の不透明度を0から1および1から0にアニメーション化します(フェードインおよびフェードアウト) |
|
w3-スピン |
アイコンを360度回転させます |
|
|
任意の要素を360度回転させます |
|
w3-アニメーション入力 |
入力フィールドの幅を100%にアニメーション化します |
|
クラス |
定義 |
|
w3-小さな |
10ピクセルのフォントサイズを指定します |
|
w3-小さい |
12ピクセルのフォントサイズを指定します |
|
w3-大 |
18ピクセルのフォントサイズを指定します |
|
w3-xlarge |
24ピクセルのフォントサイズを指定します |
|
w3-xxlarge |
32ピクセルのフォントサイズを指定します |
|
w3-xxxlarge |
48ピクセルのフォントサイズを指定します |
|
w3-ジャンボ |
64ピクセルのフォントサイズを指定します |
|
w3-ワイド |
より広いテキストを指定します |
|
w3-セリフ |
フォントをセリフに変更します |
|
w3-サンセリフ |
フォントをsans-serifに変更します |
|
w3-筆記体 |
フォントを筆記体に変更します |
|
w3-モノスペース |
フォントをモノスペースに変更します |
|
クラス |
定義 |
|
w3-center |
中心のコンテンツ |
|
w3-左 |
要素を左にフロートします(フロート:左) |
|
w3-右 |
要素を右にフロートします(フロート:右) |
|
w3-左揃え |
左揃えのテキスト |
|
w3-右揃え |
右揃えのテキスト |
|
w3-正当化 |
右揃えと左揃えのテキスト |
|
w3-ブロック |
任意の要素の全幅を定義するために使用できるクラス |
|
w3-サークル |
丸で囲んだコンテンツ |
|
w3-非表示 |
非表示のコンテンツ(display:none) |
|
w3-表示 |
コンテンツを表示(display:block) |
|
w3-show-block |
w3-showのエイリアス(display:block) |
|
w3-show-inline-block |
コンテンツをインラインブロックとして表示する(display:inline-block) |
|
w3-top |
ページ上部のコンテンツを修正 |
|
w3-下 |
ページ下部のコンテンツを修正 |
|
w3-display-container |
w3-display-クラスのコンテナ(位置:相対) |
|
w3-display-左上 |
w3-display-containerの左上隅にコンテンツを表示します |
|
w3-display-topright |
w3-display-containerの右上隅にコンテンツを表示します |
|
w3-display-左下 |
w3-display-containerの左下隅にコンテンツを表示します |
|
w3-display-右下 |
w3-display-containerの右下隅にコンテンツを表示します |
|
w3-display-left |
w3-display-containerの左側(中央左)にコンテンツを表示します |
|
w3-display-right |
w3-display-containerの右側(中央右)にコンテンツを表示します |
|
w3-display-middle |
w3-display-containerの中央(中央)にコンテンツを表示します |
|
w3-display-topmiddle |
w3-display-containerの上部中央にコンテンツを表示します |
|
w3-display-bottommiddle |
w3-display-containerの中央下にコンテンツを表示します |
|
w3-表示位置 |
w3-display-containerの指定された位置にコンテンツを表示します |
|
w3-display-hover |
w3-display-container内のホバーにコンテンツを表示します |
|
クラス |
定義 |
|
w3-不透明度 |
要素に不透明度/透明度を追加します(不透明度:0.6) |
|
|
テキストに不透明度/透明度を追加する |
|
w3-不透明度-オフ |
不透明度/透明度をオフにします(不透明度:1) |
|
w3-不透明度-分 |
要素に不透明度/透明度を追加します(不透明度:0.75) |
|
w3-不透明度-最大 |
要素に不透明度/透明度を追加します(不透明度:0.25) |
|
w3-グレースケール-分 |
要素にグレースケール効果を追加します(グレースケール:50%) |
|
w3-グレースケール |
要素にグレースケール効果を追加します(グレースケール:75%) |
|
w3-グレースケール-最大 |
要素にグレースケール効果を追加します(グレースケール:100%) |
|
w3-セピア-分 |
要素にセピア効果を追加します(セピア:50%) |
|
w3-セピア |
要素にセピア効果を追加します(セピア:75%) |
|
w3-セピア-最大 |
要素にセピア効果を追加します(セピア:100%) |
|
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-テキスト-ライトグレー |
Text color light-grey |
|
w3-text-grey |
Text color grey |
|
w3-text-dark-grey |
Text color dark grey |
|
w3-text-black |
Text color black |
|
w3-text-white |
Text color white |
|
w3-text-pink |
Text color pink |
|
w3-text-purple |
Text color purple |
|
w3-text-teal |
Text color teal |
|
w3-text-light-green |
Text color light green |
|
w3-text-lime |
Text color lime |
|
w3-text-deep-purple |
Text color deep purple |
|
w3-text-indigo |
Text color indigo |
|
w3-text-light-blue |
Text color light blue |
|
w3-text-blue-grey |
Text color blue grey |
|
w3-text-cyan |
Text color cyan |
|
w3-text-aqua |
Text color aqua |
|
w3-text-amber |
Text color amber |
|
w3-text-orange |
Text color orange |
|
w3-text-deep-orange |
Text color deep orange |
|
w3-text-sand |
Text color sand |
|
w3-text-khaki |
Text color khaki |
|
w3-text-brown |
Text color brown |
|
The text classes above can also be used as hover classes:
Class |
Defines |
|
w3-hover-text-red |
Hover text color red |
|
w3-hover-text-green |
Hover text color green |
|
w3-hover-text-blue |
Hover text color blue |
|
w3-hover-text-yellow |
Hover text color yellow |
|
Class |
Defines |
|
w3-hover-border-color |
Hover border color |
|
w3-hover-opacity |
Adds transparency to an element on hover (opacity: 0.6) |
|
w3-hover-opacity-off |
Removes transparency from an element on hover (100% opacity) |
|
w3-hover-shadow |
Adds shadow to an element on hover |
|
w3-hover-grayscale |
Adds a black and white (100% grayscale) effect to an element |
|
w3-hover-sepia |
Adds a sepia effect to an element on hover |
|
w3-hover-none |
Removes hover effects from an element |
|
Class |
Defines |
|
w3-round |
Element rounded (border-radius) 4px |
|
w3-round-small |
Element rounded (border-radius) 2px |
|
w3-round-medium |
Element rounded (border-radius) 4px |
|
w3-round-large |
Element rounded (border-radius) 8px |
|
w3-round-xlarge |
Element rounded (border-radius) 16px |
|
w3-round-xxlarge |
Element rounded (border-radius) 32px |
|
Class |
Defines |
|
w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
|
w3-padding |
Padding 8px top and bottom, and 16px left and right. |
|
w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
|
w3-padding-16 |
Padding 16px top and bottom |
|
w3-padding-24 |
Padding 24px top and bottom |
|
w3-padding-32 |
Padding 32px top and bottom |
|
w3-padding-48 |
Padding 48px top and bottom |
|
w3-padding-64 |
Padding 64px top and bottom |
|
w3-padding-top-64 |
Padding 64px on top |
|
w3-padding-top-48 |
Padding 48px on top |
|
w3-padding-top-32 |
Padding 32px on top |
|
w3-padding-top-24 |
Padding 24px on top |
|
Class |
Defines |
|
w3-margin |
Adds an 16px margin to an element |
|
w3-margin-top |
Adds an 16px top margin to an element |
|
w3-margin-right |
Adds an 16px right margin to an element |
|
w3-margin-bottom |
Adds an 16px bottom margin to an element |
|
w3-margin-left |
Adds an 16px left margin to an element |
|
w3-section |
Adds an 16px top and bottom margin to an element |
|
Class |
Defines |
|
w3-border |
Borders (top, right, bottom, left) |
|
w3-border-top |
Border top |
|
w3-border-right |
Border right |
|
w3-border-bottom |
Border bottom |
|
w3-border-left |
Border left |
|
w3-border-0 |
Removes all borders |
|
w3-border-color |
Displays any defined borders in a specified color (like red, etc) |
|
w3-bottombar |
Adds a thick bottom border (bar) to an element |
|
w3-leftbar |
Adds a thick left border (bar) to an element |
|
w3-rightbar |
Adds a thick right border (bar) to an element |
|
w3-topbar |
Adds a thick top border (bar) to an element |
|
w3-hover-border-color |
Hoverable border color |
|