CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSの色


色は、事前定義された色名、またはRGB、HEX、HSL、RGBA、HSLA値を使用して指定されます。


CSSの色の名前

CSSでは、事前定義された色名を使用して色を指定できます。

トマト
オレンジ
ドジャーブルー
MediumSeaGreen
グレー
SlateBlue
バイオレット
ライトグレー

CSS / HTMLは140の標準色名をサポートしています。


CSSの背景色

HTML要素の背景色を設定できます。

こんにちは世界


痛み自体は愛です だからこそ、私たちの通常の慣行が結果を利用するために耐えるのは、ほんの少しでも来るのです

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>


CSSテキストの色

テキストの色を設定できます。

こんにちは世界

痛み自体は愛です

だからこそ、私たちの通常の慣行が結果を利用するために耐えるのは、ほんの少しでも来るのです

<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>

カラー値の詳細

次の章では、RGBHEX、およびHSLについて詳しく学習します。