W3.CSSイントロ（キッチンシンク）
W3.CSSカラー
w3色のクラス は、マーケティング、道路標識、付箋紙で使用されているモダンな色に触発されています。
W3.CSSコンテナ
w3-containerクラスは、W3.CSSクラスの中で最も重要です。それは次のような平等を提供します：
- 共通マージン
- 一般的なパディング
- 一般的な垂直方向の配置
- 一般的な水平方向の配置
- 一般的なフォント
- 一般的な色
w3-containerクラスは通常、次のようなHTMLコンテナ要素で使用されます。
<div>、<header>、<footer>、<article>、<section>、<blockquote>、<form>など。
これはヘッダーです
この記事は薄い灰色で、テキストは茶色です。この記事は薄い灰色で、テキストは茶色です。この記事は薄い灰色で、テキストは茶色です。この記事は薄い灰色で、テキストは茶色です。この記事は薄い灰色で、テキストは茶色です。
これはフッターです。
W3.CSSパネル、メモ、および引用
w3-panelクラスは、 あらゆる種類のメモと引用を表示できます。
ロンドンはイギリスで最も人口の多い都市であり、900万人以上の人口を抱える大都市圏があります。
ロンドンはイギリスで最も人口の多い都市であり、900万人以上の人口を抱える大都市圏があります。
W3.CSSアラート
w3-panel クラスは、あらゆる種類のアラートにも使用できます。
危険！
赤はしばしば危険または否定的な状況を示します。
警告！
黄色は、注意が必要な可能性のある警告を示すことがよくあります。
成功！
緑は、成功またはポジティブなことを示すことがよくあります。
情報！
青は、中立的な有益な変更またはアクションを示すことがよくあります。
例
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
W3.CSSカード
w3カードクラスは、 画像とメモの両方に適しています。
車
車は、輸送に使用される車輪付きの自家動力自動車です。この用語のほとんどの定義は、車が主に道路を走行し、1〜8人が座れるように設計されており、通常は4つの車輪が付いていることを示しています。
（ウィキペディア）
すばらしい
フランスアルプス
例
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
W3.CSSテーブル
w3-table クラスは、すべての種類のテーブルを処理できます。
| ファーストネーム | 苗字 | ポイント |
|---|---|---|
| ジル | スミス | 50 |
| イブ | ジャクソン | 94 |
| アダム | ジョンソン | 67 |
| アンジャ | 退屈させる | 100 |
例
<table class="w3-table w3-striped w3-border">
W3.CSSリスト
w3-ulクラスは、 すべての種類のリストを処理できます。
-
マイク
ウェブデザイナー -
ジル
サポート -
ジェーン
会計士 -
ジャック
アドバイザー
例
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
W3.CSSボタン
w3-buttonおよびw3-btn クラスは、すべてのサイズとタイプのボタンを提供します。
幅の広いボタン：
円形または正方形のボタン：
W3.CSSタグ、ラベル、バッジ、およびサイン
w3-tagクラスと w3-badgeクラスは、 あらゆる種類のタグ、ラベル、バッジ、および標識を表示できます。
2 8 A B
新しい 警告 危険 情報
の下で呼吸しないでください
W3.CSSレスポンシブ
レスポンシブグリッドクラスは 、PC、ラップトップ、タブレット、モバイルのすべてのデバイスタイプに応答性を提供します。
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
休み
1/4
休み
100px
45px
休み
W3.CSSは、 小、中、大のクラスの12列のモバイルファースト流体グリッドもサポートしています。
W3.CSSディスプレイ
w3-displayクラスを使用すると、HTML要素を特定の位置に表示できます。
W3.CSSモーダル
w3-modalクラスは、 純粋なHTMLでモーダルダイアログを提供します。
モーダルイメージ：
W3.CSSプログレスバー
詳細については、W3.CSSプログレスバーをご覧ください。
W3.CSSドロップダウン
w3-dropdown クラスは、ドロップダウンを提供します。
W3.CSSアコーディオン
Read more at W3.CSS Accordions
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
W3.CSS Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tabbed Image Gallery (Click on one of the pictures):
W3.CSS Navigation
The w3-bar class can be used to create a navigation bar:
Navigation bar with input:>
Navigation bar with dropdown:
The w3-sidebar class creates a side navigation:
W3.CSS Pagination
W3.CSS provides simple ways for page pagination.
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
Nature and sunrise
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
W3.CSS Images
Styling images in W3CSS is easy:
W3.CSS Effects
Add special effects to any element:
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:
Input Form
Input Form
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:
| Name | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Color Themes
Color themes can easily be added to any web application:
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Color themes are a perfect match for mobile applications.