カラー・ライブラリは、色値を含んだ小さな CSS ファイルで、安全基準や高速道路の色、ファッションの色、軍の迷彩色、 などで一般的に使用されている色です。
カラー・ライブラリを使用するのは非常に簡単です。単に、web ページへライブラリへのリンクを追加するだけです:
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-colors-highway.css">
そして、着色したい要素にクラス名を HTML 要素に指定します:
<div class="w3-highway-yellow">Highway Yellow
Try It Yourself ❯
名前 |
---|
w3-highway-brown |
w3-highway-red |
w3-highway-orange |
w3-highway-schoolbus |
w3-highway-yellow |
w3-highway-green |
w3-highway-blue |
<div class="w3-highway-green">Falcon Ridge Parkway</div>
<div class="w3-highway-schoolbus">Schoolbus Stop</div>
Try It Yourself ❯
Download the CSS ❯
高速道路の色についての詳細は、連邦規格 595 をご覧ください。
名前 |
---|
w3-safety-red |
w3-safety-orange |
w3-safety-yellow |
w3-safety-green |
w3-safety-blue |
w3-safety-purple |
安全色についての詳細は、連邦規格 595 をご覧ください。
名前 |
---|
w3-camo-brown |
w3-camo-red |
w3-camo-olive |
w3-camo-field |
w3-camo-earth |
w3-camo-sand |
w3-camo-tan |
w3-camo-sandstone |
w3-camo-dark-green |
w3-camo-forest |
w3-camo-light-green |
w3-camo-green |
w3-camo-dark-grey |
w3-camo-grey |
w3-camo-black |
迷彩色についての詳細は、連邦規格 595 をご覧ください。
<div class="w3-camo-earth">Camouflaged Truck</div>
<div class="w3-camo-grey">Camouflaged Ship</div>
Try It Yourself ❯
Download the CSS ❯
色名 | |
---|---|
w3-vivid-pink | |
w3-vivid-red | |
w3-vivid-orange | |
w3-vivid-yellow | |
w3-vivid-green | |
w3-vivid-blue | |
w3-vivid-violet | |
w3-vivid-purple | |
w3-vivid-black | |
w3-vivid-white | |
w3-vivid-yellowish-pink | |
w3-vivid-reddish-orange | |
w3-vivid-orange-yellow | |
w3-vivid-greenish-yellow | |
w3-vivid-yellow-green | |
w3-vivid-yellowish-green | |
w3-vivid-bluish-green | |
w3-vivid-greenish-blue | |
w3-vivid-purplish-blue | |
w3-vivid-reddish-purple | |
ww3-vivid-purplish-red |
鮮やかな色についての詳細は、ISCC-NBS をご覧ください。
<div class="w3-vivid-red">
<p>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.</p>
</div>
Try It Yourself ❯
Download the CSS ❯
色名 |
---|
w3-signal-yellow |
w3-signal-orange |
w3-signal-red |
w3-signal-violet |
w3-signal-blue |
w3-signal-green |
w3-signal-grey |
w3-signal-brown |
w3-signal-white |
w3-signal-black |
ヨーロッパの信号の色についての詳細は、the RAL Color Standard をご覧ください。
<div class="w3-signal-red">Stopp</div>
<div class="w3-signal-yellow">Wait</div>
<div class="w3-signal-green">Go</div>
Try It Yourself ❯
Download the CSS ❯
名前 |
---|
w3-food-apple |
w3-food-aspargus |
w3-food-apricot |
w3-food-aubergine |
w3-food-avocado |
w3-food-banana |
w3-food-butter |
w3-food-blueberry |
w3-food-cherry |
w3-food-chocolate |
w3-food-cranberry |
w3-food-coffee |
w3-food-egg |
w3-food-grape |
w3-food-kiwi |
w3-food-lemon |
w3-food-lime |
w3-food-mango |
w3-food-mushroom |
w3-food-mustard |
w3-food-mint |
w3-food-olive |
w3-food-orange |
w3-food-pea |
w3-food-peach |
w3-food-pear |
w3-food-pistachio |
w3-food-plum |
w3-food-raspberry |
w3-food-saffron |
w3-food-salmon |
w3-food-spearmint |
w3-food-squash |
w3-food-strawberry |
w3-food-tomato |
w3-food-wheat |
w3-food-wine |