MENU
  1. ホーム
  2. CSS
  3. colorプロパティ

colorプロパティ

CSS
2023.07.12

colorプロパティは文字の色を指定します。

colorの説明図
color
記法

color : 色指定;

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>colorについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <p id="color_keyword" class="text-keyword">
      これはキーワード指定の色です。
    </p>
    <p id="color_rgb" class="text-rgb">これはRGB指定の色です。</p>
    <p id="color_hex" class="text-hex">これはHEX指定の色です。</p>
    <p id="color_hsl" class="text-hsl">これはHSL指定の色です。</p>
    <p id="color_rgba" class="text-rgba">これはRGBA指定の色です。</p>
    <p id="color_hsla" class="text-hsla">これはHSLA指定の色です。</p>
  </body>
</html>

/* カラーキーワード */
.text-keyword {
  color: teal;
}
/* RGB値 (ホットピンク) */
.text-rgb {
  color: rgb(255, 105, 180);
}
/* HEX値 (ブルーバイオレット) */
.text-hex {
  color: #8a2be2;
}
/* HSL値 (ゴールド) */
.text-hsl {
  color: hsl(45, 100%, 50%);
}
/* RGBA値 (オレンジ、透明度70%) */
.text-rgba {
  color: rgba(255, 165, 0, 0.7);
}
/* HSLA値 (水色、透明度50%) */
.text-hsla {
  color: hsla(210, 100%, 50%, 0.5);
}
出力結果

これはキーワード指定の色です。

これはRGB指定の色です。

これはHEX指定の色です。

これはHSL指定の色です。

これはRGBA指定の色です。

これはHSLA指定の色です。

CSS