マテリアライズ-色

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

red
pink
紫の
ディープ・パープル
インジゴ
blue
ライトブルー
cyan
teal
緑
薄緑
lime
黄
アンバー
オレンジ
深いオレンジ色
褐色
grey
青灰色
黒
白
トランスペアレント

使用法

以下は、適用される色を変更するために使用できる明暗クラスのリストです。

明るくする-1
明るくする-2
明るく-3
明るく-4
明るくする-5
darken-1
暗くなる-2
darken-3
暗く-4
アクセント-1
アクセント-2
アクセント-3
アクセント-4

例

次の例は、上記のクラスを使用して背景をレンダリングしたり、テキストの色を変更したりする方法を示しています。背景の場合はクラスを追加し、テキストの場合はカラークラスにサフィックス「-text」を、ライトニングクラスに「text-」をプレフィックスします。

materialize_colors

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Colors Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body>
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "card-panel">
         <div class = "card-panel red lighten-2">
            <h1>Red Colored Theme</h1>
         </div>

         <span class = "red-text text-darken-2">
            <h2>Red Colored Text</h2>
         </span>

         <ul>
            <li class = "red lighten-5"><p>Using red lighten-5</p></li>
            <li class = "red lighten-4"><p>Using red lighten-4</p></li>
            <li class = "red lighten-3"><p>Using red lighten-3</p></li>
            <li class = "red lighten-2"><p>Using red lighten-2</p></li>
            <li class = "red lighten-1"><p>Using red lighten-1</p></li>
            <li class = "red"><p>Using red</p></li>
            <li class = "red darken-1"><p>Using red darken-1</p></li>
            <li class = "red darken-2"><p>Using red darken-2</p></li>
            <li class = "red darken-3"><p>Using red darken-3</p></li>
            <li class = "red darken-4"><p>Using red darken-4</p></li>
            <li class = "red accent-1"><p>Using red accent-1</p></li>
            <li class = "red accent-2"><p>Using red accent-2</p></li>
            <li class = "red accent-3"><p>Using red accent-3</p></li>
            <li class = "red accent-4"><p>Using red accent-4</p></li>
         </ul>
      </div>
   </body>
</html>

結果

結果を確認します。

Materialize-colors

マテリアライズ-色

使用法

例

materialize_colors

結果

目次