W3.CSS では、全ての HTML 要素で使用可能なカラー・クラスを使用しています。
color クラスは、マーケティングや道路標識、付箋で使用している色にインスパイアされています。
背景色は、クラス w3-色名を使用して設定します:
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.
<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom.</p>
</div>
Try It Yourself ❯
テキスト色は、クラス w3-text-色名を使用して設定します:
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.
<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom.</p>
</div>
Try It Yourself ❯
w3-red Theme
w3-pink Theme
w3-purple Theme
w3-deep-purple Theme
w3-indigo Theme
w3-blue Theme
w3-light-blue Theme
w3-cyan Theme
w3-aqua Theme
w3-teal Theme
w3-green Theme
w3-light-green Theme
w3-lime Theme
w3-sand
w3-khaki Theme
w3-yellow Theme
w3-amber Theme
w3-orange Theme
w3-deep-orange Theme
w3-blue-grey Theme
w3-brown Theme
w3-light-grey
w3-grey Theme
w3-dark-grey Theme
w3-black Theme
w3-pale-red
w3-pale-yellow
w3-pale-green
w3-pale-blue
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.
Red Purple Blue Green Orange
Red Green Blue Black Orange
w3-hover-color および w3-hover-text-color クラスは、ホバー指定要素の背景色や文字色として、すべての色の使用を可能にします:
Red Purple Blue Green Orange
Name | Points |
---|---|
Jill Smith | 50 |
Eve Jackson | 94 |
Adam Johnson | 67 |
Bo Nilson | 35 |
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, to typically have for one to eight people, to typically have four wheels. (Wikipedia)
w3-text-red
w3-text-pink
w3-text-purple
w3-text-deep-purple
w3-text-indigo
w3-text-blue
w3-text-light-blue
w3-text-cyan
w3-text-aqua
w3-text-teal
w3-text-green
w3-text-light-green
w3-text-lime
w3-text-sand
w3-text-khaki
w3-text-yellow
w3-text-amber
w3-text-orange
w3-text-deep-orange
w3-text-blue-grey
w3-text-brown
w3-text-light-grey
w3-text-grey
w3-text-dark-grey
w3-text-black
w3-text-white
w3-text-red
w3-text-pink
w3-text-purple
w3-text-deep-purple
w3-text-indigo
w3-text-blue
w3-text-light-blue
w3-text-cyan
w3-text-aqua
w3-text-teal
w3-text-green
w3-text-light-green
w3-text-lime
w3-text-sand
w3-text-khaki
w3-text-yellow
w3-text-amber
w3-text-orange
w3-text-deep-orange
w3-text-blue-grey
w3-text-brown
w3-text-light-grey
w3-text-grey
w3-text-dark-grey
w3-text-black
w3-text-white
w3-text-red
w3-text-pink
w3-text-purple
w3-text-deep-purple
w3-text-indigo
w3-text-blue
w3-text-light-blue
w3-text-cyan
w3-text-aqua
w3-text-teal
w3-text-green
w3-text-light-green
w3-text-lime
w3-text-sand
w3-text-khaki
w3-text-yellow
w3-text-amber
w3-text-orange
w3-text-deep-orange
w3-text-blue-grey
w3-text-brown
w3-text-light-grey
w3-text-grey
w3-text-dark-grey
w3-text-black
w3-text-white