W3.CSS イントロ

❮ 前章へ 次章へ ❯

W3.CSS カラー

w3-color クラスは、マーケティング、道路標識や付箋で使用されている現代的な色からインスパイアされています:

Red

Green

Blue

Black

Pink

Teal

Indigo

Brown

Orange

Cyan

Purple

Grey

Yellow

Lime

Khaki

Light Grey


W3.CSS コンテナ

w3-container クラスは、W3.CSS クラスの中で最も重要です。 そこには、等しく次のような設定が提供されます:

w3-container クラスは、次のような HTML コンテナ要素の 全タイプに使用することができます:

<div>、<header>、<footer>、<article>、<section>、<blockquote>、<form>、等。

This is a Header

This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown.

This is a footer.


W3.CSS パネル、ノートと引用

w3-panel クラスは、全ての種類のノートや引用を表示することができます:

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


"Make it as simple as possible, but not simpler."

Albert Einstein


W3.CSS アラート

w3-panel クラスは、すべての種類のアラートにも使用することができます:

×

Danger!

Red often indicates a dangerous or potentially negative action.

×

Warning!

Yellow and orange often indicates a warning that might need attention.

×

Success!

Green often indicates a successful or positive action.

×

Info!

Blue often indicates a neutral informative change or action.


W3.CSS カード

w3-card クラスは画像やノートの両方に適しています:

Car

w3-card-2

Car

w3-card-4

Car

w3-card-8

Header

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, and to typically have four wheels.

(Wikipedia)


W3.CSS テーブル

w3-table クラスは、すべての種類のテーブルを取扱うことができます:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Anja Bore 100

W3.CSS リスト

w3-ul クラスは、すべての種類のリストを取り扱うことができます:


W3.CSS ボタン

w3-btn クラスは、すべてのサイズと種類のボタンを提供します:


w3-btn-floating ボタンは、円形で重要な関数を意味するものです。

+ + +


W3.CSS タグとバッジ

w3-tag と w3-badge クラスは、すべての種類タグやバッジや標識を表示することが可能です:

2 8 A B

New Warning Danger Info

Falcon Ridge Parkway

S
A
L
E

DO NOT
BREATHE
UNDER WATER

W3.CSS レスポンシブ

responsive grid クラスは、PC、ノート 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

rest

1/4

rest

100px

45px

rest

W3.CSS は、small、medium、large クラスを使用することで、 12 カラム・モバイル・ファースト流動グリッドもサポートしています。


W3.CSS モーダル

w3-modal クラスは、純粋な HTML だけでモーダルダイアログを提供します:

×

Header

Some text. Some text. Some text.

Some text. Some text. Some text.



Modal Image:

Nature
×
Nature

W3.CSS プログレスバー

w3-progressbar クラスは、プログレスバーを作成します:

25%

50%



W3.CSS ドロップダウン

w3-dropdown クラスは、ドロップダウンを提供します:


W3.CSS アコーディオン

w3-accordion クラスは、アコーディオン/コンテンツの伸縮を提供します:

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.

Link 1 Link 2 Link 3

Accordion with Images:

Trolltunga, Norway


W3.CSS タブ

タブ は、単一ページの Web アプリケーションや、 いろいろな題材を表示する Web ページに最適です。

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.



タブ付きイメージギャラリー:

Nature
Fjords
Mountains
Lights

Nature ×
Nature
Fjords ×
Fjords
Mountains ×
Mountains
Lights ×
Northern Lights

W3.CSS ナビゲーション

w3-navbar クラスは、ナビゲーションバーを作成します:





w3-sidenav クラスは、サイド・ナビゲーションを作成します:


W3.CSS ページネーション

w3-pagination クラスは、ページナビゲーションのための簡単な方法を提供します:




スライドショー

W3.CSS は、画像やその他のコンテンツを巡回するためのスライドショーを提供します:

1 / 3
Beautiful Nature
2 / 3
Trolltunga, Norway
3 / 3
Mountains

W3.CSS アニメーション

w3-animate クラスは、要素のスライドやフェードインのための簡単な方法を提供します:


Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!

W3.CSS 画像

W3CSS で、画像をスタイリングするのは簡単です:

Northern Lights
Forest
Mountains
Nature
Nature

W3.CSS 入力フォーム

w3-input クラスは、入力フォームのためのものです:



Input Form


Input Form



W3.CSS フィルタ

リスト、テーブル、ドロップダウンなどの中から指定の要素を検索するために、 W3.CSS Filters を使用します:

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 フォント

W3.CSS を使用すると、Web ページに fonts を追加することは極めて簡単です:

Making the web beautiful!
Making the web!

W3.CSS ツールチップ

w3-tooltip クラスは、すべての種類ツールチップを表示することができます:

Hover over this text! Tooltip content

Hover over this text! Tooltip content

Hover over this text! Tooltip content

Car

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads.


モバイルのカラー・テーマ

事前に定義されたカラー・テーマは、モバイル Web アプリケーションに特に適しています。

Theme Indigo

Movies 2014

  • Frozen

    response to the animations was ridiculous

  • Fault in Our Stars

    Touching, gripping and genuinely well made

  • Avengers

    A huge success for Marvel and Disney

Theme Teal

Movies 2014

  • Frozen

    response to the animations was ridiculous

  • Fault in Our Stars

    Touching, gripping and genuinely well made

  • Avengers

    A huge success for Marvel and Disney


❮ 前章へ 次章へ ❯