W3.CSS

W3.CSSホーム W3.CSSイントロ W3.CSSカラー W3.CSSコンテナ W3.CSSパネル W3.CSSボーダー W3.CSSカード W3.CSSのデフォルト W3.CSSフォント W3.CSS Google W3.CSSテキスト W3.CSSラウンド W3.CSSパディング W3.CSSマージン W3.CSSディスプレイ W3.CSSボタン W3.CSSノート W3.CSSの見積もり W3.CSSアラート W3.CSSテーブル W3.CSSリスト W3.CSS画像 W3.CSS入力 W3.CSSバッジ W3.CSSタグ W3.CSSアイコン W3.CSSレスポンシブ W3.CSSレイアウト W3.CSSアニメーション W3.CSS効果 W3.CSSバー W3.CSSドロップダウン W3.CSSアコーディオン W3.CSSナビゲーション W3.CSSサイドバー W3.CSSタブ W3.CSSページ付け W3.CSSプログレスバー W3.CSSスライドショー W3.CSSモーダル W3.CSSツールチップ W3.CSSグリッド W3.CSSコード W3.CSSフィルター W3.CSSトレンド W3.CSSケース W3.CSSマテリアル W3.CSS検証 W3.CSSバージョン W3.CSSモバイル

W3.CSSカラー

W3.CSSカラークラス W3.CSSカラー素材 W3.CSSカラーフラットUI W3.CSSカラーメトロUI W3.CSSカラーWin8 W3.CSSカラーiOS W3.CSSカラーファッション W3.CSSカラーライブラリ W3.CSSカラースキーム W3.CSSカラーテーマ W3.CSSカラージェネレーター

Web構築

Webイントロ Web HTML Web CSS Web JavaScript Webレイアウト Webバンド Webケータリング Webレストラン Webアーキテクト

W3.CSSの例 W3.CSSデモ W3.CSSテンプレート

参考文献

W3.CSSリファレンス W3.CSSダウンロード

W3.CSSカラーライブラリ


カラーライブラリ

カラーライブラリは、安全基準、高速道路の色、ファッションの色、カモフラージュの色など、一般的に使用される色の値を含む小さなCSSファイルです。

スクールバス
ファルコンリッジパークウェイ
止まる

カラーライブラリの使用方法

カラーライブラリは使いやすいです。Webページにカラーライブラリへのリンクを追加するだけです。

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-highway.css">

次に、色付けするHTML要素にクラス名を追加します。

<div class="w3-highway-schoolbus">Schoolbus</div>
<div class="w3-highway-green">Falcon Ridge Parkway</div>
<div class="w3-highway-red">STOP</div>

米国国道の色

w3-高速道路-茶色
w3-高速道路-赤
w3-高速道路-オレンジ
w3-高速道路-スクールバス
w3-高速道路-黄色
w3-ハイウェイグリーン
w3-ハイウェイブルー

<div class="w3-highway-red">STOP</div>
    CSSをダウンロード»

高速道路の色は、連邦規格595で定義されています。


米国の安全色

w3-セーフティレッド
w3-安全性-オレンジ
w3-安全-黄色
w3-セーフティグリーン
w3-セーフティブルー
w3-安全-紫

<div class="w3-safety-red">DANGER</div>
    CSSをダウンロード»

米国の安全色は、 連邦規格595で定義されています。



ヨーロッパの信号色

w3-シグナルイエロー
w3-シグナルオレンジ
w3-信号-赤
w3-シグナルバイオレット
w3-シグナルブルー
w3-シグナルグリーン
w3-シグナルグレー
w3-シグナルブラウン
w3-シグナルホワイト
w3-シグナルブラック

<div class="w3-signal-red">Stop</div>
<div class="w3-signal-yellow">Wait</div>
<div class="w3-signal-green">Go</div>
    CSSをダウンロード»

ヨーロッパの信号色は、 RAL色標準で定義されています。



鮮やかな色

w3-鮮やかなピンク
w3-鮮やかな赤
w3-鮮やかなオレンジ
w3-鮮やかな黄色
w3-鮮やかな緑
w3-鮮やかな青
w3-鮮やかな紫
w3-鮮やかな紫
w3-鮮やかな黒
w3-鮮やかな白
w3-鮮やかな黄色がかったピンク
w3-鮮やかな赤みがかったオレンジ
w3-鮮やかなオレンジ-黄色
w3-鮮やかな緑がかった黄色
w3-鮮やかな黄緑色
w3-鮮やかな黄緑色
w3-鮮やかな青みがかった緑
w3-鮮やかな緑がかった青
w3-鮮やかな紫がかった青
w3-鮮やかな赤みがかった紫
w3-鮮やかな紫がかった赤

<div class="w3-vivid-red">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>
  CSSをダウンロード»

鮮やかな色はISCC-NBSで定義されています。


食用色素

w3-フードアップル
w3-food-aspargus
w3-食品-アプリコット
w3-食品-ナス
w3-食品-アボカド
w3-食品バナナ
w3-フードバター
w3-食品-ブルーベリー
w3-フードチェリー
w3-食品-チョコレート
w3-食品-クランベリー
w3-フードコーヒー
w3-食品-卵
w3-フードグレープ
w3-フードキウイ
w3-フードレモン
w3-フードライム
w3-フードマンゴー
w3-食品-きのこ
w3-フードマスタード
w3-フードミント
w3-フードオリーブ
w3-フードオレンジ
w3-食品-エンドウ豆
w3-フードピーチ
w3-食品梨
w3-食品-ピスタチオ
w3-フードプラム
w3-食品-ラズベリー
w3-食品サフラン
w3-フードサーモン
w3-食品スペアミント
w3-フードスカッシュ
w3-食品-イチゴ
w3-食品-トマト
w3-食品-小麦
w3-フードワイン

<div class="w3-food-apple">Apple</div>
<div class="w3-food-banana">Banana</div>
    CSSをダウンロード»

カモフラージュカラー

w3-カモブラウン
w3-カモレッド
w3-迷彩オリーブ
w3-迷彩フィールド
w3-迷彩地球
w3-迷彩砂
w3-迷彩タン
w3-迷彩砂岩
w3-迷彩-ダークグリーン
w3-迷彩の森
w3-カモライトグリーン
w3-カモグリーン
w3-迷彩ダークグレー
w3-カモグレー
w3-カモブラック

<div class="w3-camo-earth">Camouflaged Truck</div>
<div class="w3-camo-grey">Camouflaged Ship</div>
    CSSをダウンロード»

カモフラージュの色は、 連邦規格595で定義されています。