W3.CSS

W3.CSSホーム W3.CSSイントロ W3.CSSカラー W3.CSSコンテナ W3.CSSパネル W3.CSSボーダー W3.CSSカード W3.CSSのデフォルト W3.CSSフォント W3.CSS Google W3.CSSテキスト W3.CSSラウンド W3.CSSパディング W3.CSSマージン W3.CSSディスプレイ W3.CSSボタン W3.CSSノート W3.CSSの見積もり W3.CSSアラート W3.CSSテーブル W3.CSSリスト W3.CSS画像 W3.CSS入力 W3.CSSバッジ W3.CSSタグ W3.CSSアイコン W3.CSSレスポンシブ W3.CSSレイアウト W3.CSSアニメーション W3.CSS効果 W3.CSSバー W3.CSSドロップダウン W3.CSSアコーディオン W3.CSSナビゲーション W3.CSSサイドバー W3.CSSタブ W3.CSSページ付け W3.CSSプログレスバー W3.CSSスライドショー W3.CSSモーダル W3.CSSツールチップ W3.CSSグリッド W3.CSSコード W3.CSSフィルター W3.CSSトレンド W3.CSSケース W3.CSSマテリアル W3.CSS検証 W3.CSSバージョン W3.CSSモバイル

W3.CSSカラー

W3.CSSカラークラス W3.CSSカラー素材 W3.CSSカラーフラットUI W3.CSSカラーメトロUI W3.CSSカラーWin8 W3.CSSカラーiOS W3.CSSカラーファッション W3.CSSカラーライブラリ W3.CSSカラースキーム W3.CSSカラーテーマ W3.CSSカラージェネレーター

Web構築

Webイントロ Web HTML Web CSS Web JavaScript Webレイアウト Webバンド Webケータリング Webレストラン Webアーキテクト

W3.CSSの例 W3.CSSデモ W3.CSSテンプレート

参考文献

W3.CSSリファレンス W3.CSSダウンロード

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

Hover Text Classes

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

Other Hover Classes

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

Round Classes

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

Padding Classes

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

Margin Classes

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

Border Classes

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