CSS3で透過グラデーションを作る方法｜linear-gradientとRGBAの使い方を解説
CSS3では、linear-gradient()関数を使うことで、上から下、左から右といった直線方向に複数の色を滑らかにつなげた「線形グラデーション」を簡単に作成できます。さらに、色の指定にRGBA()関数を使用すれば、各カラーストップ（色の変化点）に透明度を持たせることが可能です。
この記事では、CSS3を使って透明度のある線形グラデーションを実装する方法を、実際のコード例とともに解説します。
透過グラデーションの基本
linear-gradient()は、背景画像（background-imageプロパティ）として指定する関数です。第1引数にグラデーションの方向（例：to left＝右から左へ）、続けてカラーストップをカンマ区切りで並べます。
通常のrgb()は赤・緑・青の3つの値で色を表しますが、rgba()は4つ目の値としてアルファ値（不透明度）を追加できます。アルファ値は0（完全に透明）〜1（完全に不透明）の範囲で指定し、0.5なら半透明になります。
コード例：透明度のある線形グラデーション
以下は、CSS3で透過する線形グラデーションを設定するサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-image: linear-gradient(
to left,
rgb(111, 0, 255),
rgba(111, 0, 255, 0.616),
rgba(111, 0, 255, 0.384),
rgba(111, 0, 255, 0)
);
}
</style>
</head>
<body>
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<h2>The above linear gradient goes from white to dark blue purple</h2>
</body>
</html>
コードのポイント
- グラデーションの方向：
to leftを指定しているため、右側から左側へ向かって色が変化します。 - 開始色：
rgb(111, 0, 255)（濃い青紫）からスタートし、完全に不透明な状態です。 - 中間のカラーストップ： アルファ値が
0.616→0.384と段階的に下がり、徐々に透明になっていきます。 - 終了色： アルファ値が
0のため、左端では完全に透明になり、背後の白い背景がそのまま見える状態になります。
表示結果
上記のコードをブラウザで表示すると、次のような出力が得られます。右端の濃い青紫色が左に向かうにつれて薄くなり、最終的に白色へと自然にフェードアウトしていくグラデーションが描画されます。
まとめ
rgba()のアルファ値を活用することで、単色でも美しいフェード効果を持つグラデーションを作れます。ボタンの背景、バナー、オーバーレイなど、デザインの幅を広げるテクニックなので、ぜひ活用してみてください。
-
Macの透明効果を無効化してパフォーマンスを向上させる方法
初めてMacを購入したときに多くの人が感じるのは、スペックが最高峰ではなくても操作感が非常に滑らかだという点です。しかし、やや古いMacをお使いで、少しでもパフォーマンスを引き出したいのであれば、透明効果を無効にするのがおすすめです。 もちろん、単純にすりガラス風の透明デザインが好きではない、という理由でも問題ありません。以下の手順でこの機能をオフにできます。 透明効果を無効にする手順 Spotlight（スポットライト）を開き、システム環境設定を起動します。 アクセシビリティを選択します。 左側のメニューからディスプレイを選びます。 右側に表示される「透明度を下げる」オプションを有効にしま
-
Pythonで学ぶ相関と回帰分析の基礎｜Seabornを使ったデータ分析入門
相関（Correlation）とは、2つのデータセット間に存在する依存関係を含む統計的な関係性を指します。一方、線形回帰（Linear Regression）は、従属変数と1つ以上の独立変数の間の関係を直線的なアプローチで捉える手法です。独立変数が1つの場合は「単回帰」、複数ある場合は「重回帰」と呼ばれます。相関とは何か依存現象の身近な例としては、親と子の身体的特徴（外見）の類似性や、商品の価格と供給量の関係などが挙げられます。価格が上がれば供給量が増える、といった具合に、変数同士が互いに影響し合う様子を統計的に表したものが相関です。本記事では、Pythonの可視化ライブラリ「Seaborn」