CSSのcolorプロパティを使って要素の文字色を設定する方法
CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。
構文
CSSの color プロパティの基本構文は以下のとおりです。
Selector {
color: /*値*/
}
それでは、実際のコード例を見ていきましょう。
コード例1：複数の色指定方法を使う
次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
width: 50px;
float: right;
color: white;
background-color: #2f5587;
}
p {
color: rgba(225,5,135,0.7);
border: 2px solid #16c618;
box-shadow: 0 7px 0 5px hsl(90, 60%, 70%);
}
</style>
</head>
<body>
<h2>サンプル見出し</h2>
<div>This is it</div>
<p>ここにデモ用テキストが表示されています。</p>
</body>
</html>
出力結果
上記のコードを実行すると、次のような出力が得られます。
この例では、div 要素の文字色に白（white）、段落の文字色には半透明のピンク系カラーである rgba(225,5,135,0.7) を指定しています。最後の値「0.7」は不透明度（アルファ値）を表し、0〜1の範囲で指定します。
コード例2：nth-of-typeセレクターとの組み合わせ
次の例では、:nth-of-type(even) 疑似クラスを使用して、偶数番目のリスト項目のみに文字色を適用しています。
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-of-type(even) {
color: dodgerblue;
border: 6px groove #16c618;
padding: 4px;
box-shadow: inset -100px 0 5px red;
}
</style>
</head>
<body>
<h2>サーブレットを学ぼう</h2>
<ul>
<li>Javaサーブレットは、Webサーバーまたはアプリケーションサーバー上で動作するプログラムです。</li>
<li>Javaサーブレットは、CGIを使って実装されたプログラムと同様の目的でよく使われます。</li>
<li>サーブレットはJavaで書かれているため、プラットフォームに依存しません。
</li>
</ul>
</body>
</html>
出力結果
上記のコードを実行すると、次のような出力が得られます。
このように、CSSの color プロパティは単体でも使えますが、疑似クラスや他のプロパティと組み合わせることで、より柔軟で視覚的に魅力的なデザインを実現できます。
-
CSSで放射状グラデーションのサイズを指定する方法
CSSで放射状グラデーションのサイズを制御するには、radial-gradient() 関数を使用します。この関数は、背景画像として放射状グラデーションを定義するもので、第1引数にサイズ（形状と大きさ）を、その後に位置やカラーストップを指定します。基本的な書き方以下の例のように、関数の最初のパラメータとして希望するサイズを設定します。background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));サイズに指定できる値グラデーションのサイズには、以下
-
CSSでグラデーションのカラーストップ位置を設定する方法
CSSのグラデーションでは、各色が切り替わる位置(カラーストップ)をパーセンテージまたは絶対的な長さで指定できます。これにより、色の遷移を均等ではなく自由にコントロールすることが可能です。カラーストップの基本例えば、linear-gradient()関数でカラーストップの位置を指定する場合、以下のように記述します。background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );このように位置を明示的に指定すると、各色がその地点で完全に