CSSでの色の指定方法を解説｜様々なカラーコード
色は、定義済みの色名、または RGB、HEX、HSL、RGBA、HSLA値を使用して指定されます。
CSSの色名
CSSでは、定義済みの色名を使用して色を指定できます。
トマト
オレンジ
ドジャーブルー
ミディアムシーグリーン
グレー
スレートブルー
バイオレット
ライトグレー
CSS/HTMLは140の標準色名をサポートします。
CSS 背景色
HTML 要素の背景色を設定できます。
こんにちは世界
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolor magna aliquam erat volutpat.
例
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
CSSテキストの色
テキストの色を設定できます
こんにちは世界
Lorem ipsum pain sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat.
これまで見てきたように、体罰から何らかの利益を得るために体罰の行使に参加する人は最小限に抑えられます。
例
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
CSS ボーダーカラー
境界線の色を設定できます
こんにちは世界
こんにちは世界
こんにちは世界
例
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
CSS カラー値
CSSでは、RGB値、HEX値、HSL値、RGBA値、およびHSLA値を使用して色を指定することもできます。
色名「トマト」と同じ
RGB(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
色名「トマト」と同じですが、50%透明
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
例
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。