CSS/色と透明度関連

色と透明度関連

この章では、CSSを使用して要素の色や透明度を設定・制御する方法を解説します。背景色や文字色の指定、透明度の制御など、デザインに欠かせないプロパティを学びます。

色の指定

CSSでは、さまざまな方法で色を指定できます。色の指定は主に背景色、文字色、ボーダーの色などで使用されます。

色の指定方法

CSSでは以下のような形式で色を指定できます：

• キーワード：名前で色を指定します。

  color: red;
  

  使用例: "red", "blue", "green"など。

• 16進数表記：RGB値を16進数で指定します。

  color: #ff5733;
  

  ショートハンドも可能: #f53は#ff5533と同等です。

• RGB/RGBA：RGB値を関数形式で指定します。

  color: rgb(255, 87, 51);
  color: rgba(255, 87, 51, 0.5);
  

  rgbaでは透明度（アルファ値）を指定できます。

• HSL/HSLA：色相・彩度・明度を用いて指定します。

color: hsl(30, 100%, 60%);
color: hsla(30, 100%, 60%, 0.5);

カスタムプロパティで色を管理

カスタムプロパティを使用して色を管理すると、コードの再利用性が向上します。

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}
button {
  background-color: var(--primary-color);
  border-color: var(--secondary-color);
}

透明度の制御

CSSでは、透明度を制御するために以下のプロパティを使用します。

opacity

要素全体の透明度を制御します。値は0（完全に透明）から1（完全に不透明）までです。

div {
  opacity: 0.5;
}

background-colorの透明度

背景色だけに透明度を指定する場合、rgbaやhslaを使用します。

div {
  background-color: rgba(0, 0, 0, 0.5);
}

透明度と子要素

opacityプロパティを使用すると、子要素も透明になります。背景のみ透明にしたい場合は、rgbaやhslaを使用してください。

グラデーション

CSSでは、単一の色だけでなく、グラデーションを背景として設定することも可能です。

線形グラデーション

線形グラデーションは、指定した方向に色を滑らかに変化させます。

div {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

• to right：左から右にグラデーションを適用。
• 色の割合を指定することも可能:

  background: linear-gradient(to bottom, #ff7e5f 30%, #feb47b 70%);

放射状グラデーション

中心から外側に向かってグラデーションを適用します。

div {
  background: radial-gradient(circle, #ff7e5f, #feb47b);
}

色のアクセシビリティ

色を使用する際には、アクセシビリティにも配慮する必要があります。

• 十分なコントラスト比を確保しましょう。

  例

    color: #000; /* テキスト色 */
    background-color: #fff; /* 背景色 */
  

• WebAIM Contrast Checkerを使用して確認することを推奨します。

まとめ

色と透明度は、Webページの視覚的な印象を決定する重要な要素です。適切な色選びと透明度の設定により、ユーザー体験を向上させることができます。基本的なプロパティを学びながら、実際に試してデザインスキルを磨きましょう。