W3.CSS-色

W3.CSSは、豊富なカラークラスのセットをサポートしています。これらのカラークラスは、マーケティング、道路標識、および付箋で使用される色を考慮してインスピレーションと開発が行われています。

w3-赤
w3-ピンク
w3-紫
w3深紫
w3-インディゴ
w3-blue
w3-ライトブルー
w3-シアン
w3-ティール
w3-green
w3-ライトグリーン
w3-石灰
w3-カーキ
w3-イエロー
w3-アンバー
w3-オレンジ
w3-濃いオレンジ
w3-blue-grey
w3-ブラウン
w3-ライトグレー
w3-グレー
w3-ダークグレー *w3-black

色のテーマ

W3.CSSは、パブリックドメインテーマcssを使用してWebサイトにテーマを適用するための優れたサポートを提供します。いくつかの例を以下に示します-

Sr. No.

CSS Name & Description

1

w3-theme-indigo.css*

Indigoバリアントカラーを持つCSS

2

w3-theme-red.css

赤のバリアントカラーを持つCSS

テーマを使用するには、https://www.w3schools.com/w3css/w3css_downloads.aspにアクセスして、必要なCSSファイルをダウンロードします。

例

w3css_colors

<html>
   <head>
      <title>The W3.CSS Color Themes</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "css/w3-theme-red.css">
   </head>

   <body class = "w3-container">
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "w3-card-4">
         <div class = "w3-container w3-theme w3-card-2">
            <h1>Red Colored Theme</h1>
         </div>

         <div class = "w3-container w3-text-theme">
            <h2>w3-text-theme - Theme for Text</h2>
         </div>

         <ul class = "w3-ul w3-border-top">
            <li class = "w3-theme-l5" style = "position:relative">
            <a class = "w3-btn-floating-large w3-theme-action w3-right"
            style = "position:absolute;top:-28px;right:16px;">+</a>
            <p>Using w3-theme-l5/w3-theme-light style</p>
            </li>
            <li class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
            <li class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
            <li class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
            <li class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
            <li class = "w3-theme"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d1"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d2"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d3"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d4"><p>Using w3-theme style</p></li>
         </ul>
      </div>
   </body>
</html>

結果

結果を確認します。

W3css-colors

W3.CSS-色

色のテーマ

例

w3css_colors

結果

目次