W3.CSS カラー・テーマ

❮ 前章へ 次章へ ❯



Created Theme

Theme In Use:

12:30

☰  Movies

+
avatar

Frozen

response to the animations was ridiculous.


Star Wars

People were exited for the new Star Wars movie.


avatar

Avengers

A huge success for Marvel and Disney.

生成済みカラー:

 

W3.CSS テーマの例

Cinque Terre

Cinque Terre (five lands) is a portion of the Italian Riviera. The coastline with five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore is a UNESCO World Heritage Site.

Monterosso

Monterosso al Mare is located at the center of a small natural gulf, protected by a small artificial reef, in the Riviera of La Spezia. It is the northernmost village of the Cinque Terre.

Vernazza

Vernazza is another of the five towns in the Cinque Terre region. Vernazza is the fourth town heading north. It has no car traffic, and is one of the truest "fishing villages" on the Italian Riviera.

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
HTML Reference
CSS Reference
JavaScript Reference
W3.CSS Reference
Browser Statistics
HTML Examples
CSS Examples
JavaScript Examples
W3.CSS Examples
HTML DOM Examples

カラー・テーマ

W3.CSS で、プライベートなカラーテーマを持つアプリケーションをカスタマイズすることは容易です。

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="/lib/w3-theme-indigo.css">

Try It Yourself ❯


定義済みテーマ

HTMLアプリケーションでは、定義済みの色から様々な色相を選択させることで、色の使用を制限することができます:

w3-red Try it
w3-pink Try it
w3-purple Try it
w3-deep-purple Try it
w3-indigo Try it
w3-blue Try it
w3-light-blue Try it
w3-cyan Try it
w3-teal Try it
w3-green Try it
w3-light-green Try it
w3-lime Try it
w3-khaki Try it
w3-yellow Try it
w3-amber Try it
w3-orange Try it
w3-deep-orange Try it
w3-blue-grey Try it
w3-brown Try it
w3-grey Try it
w3-dark-grey Try it
w3-black Try it
w3-w3schools Try it

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



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


プライベートテーマ

W3.CSS で、プライベートなカラーテーマを持つアプリケーションをカスタマイズすることは容易です。

<link> タグでプライベートテーマにリンクすることも、<style> タグ内にプライベートテーマを指定することもできます:

<style>
.w3-theme {
color:#fff !important;background-color:#3f51b5 !important}
.w3-theme-light {
color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-dark {
color:#fff !important;background-color:#1a237e !important}
.w3-theme-l5 {
color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-l4 {
color:#000 !important;background-color:#c5cae9 !important}
.w3-theme-l3 {
color:#000 !important;background-color:#9fa8da !important}
.w3-theme-l2 {
color:#fff !important;background-color:#7986cb !important}
.w3-theme-l1 {
color:#fff !important;background-color:#5c6bc0 !important}
.w3-theme-d1 {
color:#fff !important;background-color:#3949ab !important}
.w3-theme-d2 {
color:#fff !important;background-color:#303f9f !important}
.w3-theme-d3 {
color:#fff !important;background-color:#283593 !important}
.w3-theme-d4 {
color:#fff !important;background-color:#1a237e !important}
.w3-theme-action {
color:#fff !important;background-color:#311b92 !important}
.w3-text-theme {
color:#1a237e !important}
</style>

Try It Yourself ❯


グラデーションの追加

ある読者から、次の提案を戴きました:テーマごとにグラデーションの追加を検討するようお願します。

このグラデーションを作成するために、blue テーマから l2 と l1 の色を使用しました:

.w3-theme-gradient {
  color: #000 !important;
  background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}

Try It Yourself ❯


カラー・テーマ

ここに、Google のマテリアルデザインにインスパイアされた、ダウンロード可能なカラーテーマがあります:

スタイルシート 説明
w3-theme-amber.css Color Theme Amber
w3-theme-black.css Color Theme Black
w3-theme-blue.css Color Theme Blue
w3-theme-blue-grey.css Color Theme Blue Grey
w3-theme-brown.css Color Theme Brown
w3-theme-cyan.css Color Theme Cyan
w3-theme-dark-grey.css Color Theme Dark Grey
w3-theme-deep-orange.css Color Theme Deep Orange
w3-theme-deep-purple.css Color Theme Deep Purple
w3-theme-green.css Color Theme Green
w3-theme-grey.css Color Theme Grey
w3-theme-indigo.css Color Theme Indigo
w3-theme-khaki.css Color Theme Khaki
w3-theme-light-blue.css Color Theme Light Blue
w3-theme-light-green.css Color Theme Light Green
w3-theme-lime.css Color Theme Lime
w3-theme-orange.css Color Theme Orange
w3-theme-pink.css Color Theme Pink
w3-theme-purple.css Color Theme Purple
w3-theme-red.css Color Theme Red
w3-theme-teal.css Color Theme Teal
w3-theme-yellow.css Color Theme Yellow

❮ 前章へ 次章へ ❯