HTMLチュートリアル

HTMLホーム HTMLの紹介 HTMLエディター HTMLベーシック HTML要素 HTML属性 HTML見出し HTML段落 HTMLスタイル HTMLフォーマット HTMLの引用 HTMLコメント HTMLの色 HTML CSS HTMLリンク HTML画像 HTMLファビコン HTMLテーブル HTMLリスト HTMLブロックとインライン HTMLクラス HTMLID HTMLIframe HTML JavaScript HTMLファイルパス HTMLヘッド HTMLレイアウト HTMLレスポンシブ HTMLコンピューターコード HTMLセマンティクス HTMLスタイルガイド HTMLエンティティ HTMLシンボル HTML絵文字 HTML文字セット HTMLURLエンコード HTMLとXHTML

HTMLフォーム

HTMLフォーム HTMLフォーム属性 HTMLフォーム要素 HTML入力タイプ HTML入力属性 HTML入力フォームの属性

HTMLグラフィックス

HTMLキャンバス HTML SVG

HTMLメディア

HTMLメディア HTMLビデオ HTMLオーディオ HTMLプラグイン HTML YouTube

HTML API

HTMLジオロケーション HTMLドラッグアンドドロップ HTMLWebストレージ HTMLWebワーカー HTML SSE

HTMLの

HTMLの例 HTMLクイズ HTML演習 HTML証明書 HTMLの概要 HTMLアクセシビリティ

HTMLリファレンス

HTMLタグリスト HTML属性 HTMLグローバル属性 HTMLブラウザのサポート HTMLイベント HTMLの色 HTMLキャンバス HTMLオーディオ/ビデオ HTMLDoctypes HTML文字セット HTMLURLエンコード HTML言語コード HTTPメッセージ HTTPメソッド PXからEMへのコンバーター キーボードショートカット

HTMLの色


HTMLの色は、事前定義された色名、またはRGB、HEX、HSL、RGBA、またはHSLA値で指定されます。


色の名前

HTMLでは、色名を使用して色を指定できます。

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

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


背景色

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

こんにちは世界


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

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

テキストの色

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

こんにちは世界

痛み自体は愛です

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

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

ボーダの色

境界線の色を設定できます。

こんにちは世界

こんにちは世界

こんにちは世界

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

色の値

HTMLでは、RGB値、HEX値、HSL値、RGBA値、およびHSLA値を使用して色を指定することもできます。

次の3つの<div>要素の背景色は、RGB、HEX、およびHSL値で設定されています。

rgb(255、99、71)
#ff6347
hsl(9、100%、64%)

次の2つの<div>要素の背景色はRGBA値とHSLA値で設定されており、色にアルファチャネルが追加されます(ここでは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について詳しく学習します。