検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLの色 

HTMLの色 

王林
王林オリジナル
2024-09-04 16:33:57607ブラウズ

この記事では、HTML を使用して Web サイトで色を使用する方法を簡単かつ簡単に説明します。色は、見栄えや使い心地の良いウェブサイトを作成する上で重要な役割を果たします。個別のタグが組み込まれた HTML はありません。代わりに、style 属性または color プロパティを使用します。正確には、色はカスケード スタイル シート (CSS) を使用して HTML 要素に埋め込まれます。色はウェブページにエレガントな外観を与えます。 Web ページに色を追加するには、背景色、表、段落などの設定が含まれます。

HTML で背景色を設定するには?

背景色を明るくすると、ウェブサイトがより美しく大胆に見えます。これは、色、16 進数のカラーコードを使用して行われます。 RGB および RGBA カラー値 (アルファ値 0 ～ 1)。

16 進カラーは、HTML の body 要素内の Style 属性を使用して、HTML コードに直接適用されます。 16 進数は数字と文字の両方を組み合わせたものです。以下は、Web ページの背景色を示す例です。

コード:

<!DOCTYPE html>
<title>My Sample</title>
<html>
<head>
<title>HTML BG Color</title>
</head>
<body style="background-color:red;">
<h1> This page is a demo </h1>
</body>
</html>

コード スニペット:

HTMLの色 

背景色を追加するには、bgcolor 属性を使用して < を表示します。ボディ bgcolor=” ”>。 HTML 5 を除くすべてのブラウザと互換性があります。

コード:

<h3 style="color: blue">Color Name</h3>
<h3 style="color: #0000ff">Hexadecimal</h3>
<h3 style="color: rgb (0,0,255)">RGB Value</h3>
</p>
<h3>HTML のテキストに色を適用するには?</h3>
<p>HTML テキストに色を適用するのは非常に簡単です。 16 進数の色、HSL 値、色の名前の 3 つの方法を適用することで、テキストの色を追加/変更できます。以下は、対応する Web ページに色を適用する 3 つの異なるテクニックです。</p>
<h4>1.色の名前</h4>
<p>アプリケーションで直接これらの色名が使用される場合、英語の色名を使用することで、これは非常に簡単になります。色名の指定は直接的な方法であり、W3C は基本色 16 色 (ブラック、イエロー、レッド、マルーン、グレー、ライム、グリーン、オリーブ、シルバー、アクア、ブルー、ネイビー、ホワイト、パープル、フクシア、ティール) を発表しています</p>


<h4>2. HSL</h4>
<p>色相、彩度と明度の色の値。色相は 0 ～ 360 度、彩度と明度は 0 ～ 100 % で定義されます。</p>
<h4>3. 16 進カラー</h4>
<p>正確な結果を得るために、6 桁の 16 進数が適用されます。詳しく説明すると、最初の 2 桁は赤を示し、次の 2 桁は緑を示し、他の 2 桁は青の値を示し、先頭に「#」が付きます。</p>
<p>次の例では、ドキュメントに色を適用するさまざまな方法を説明します。</p>
<p><strong>コード:</strong></p>
<pre class="brush:php;toolbar:false"><head>
<title>EDUCBA</title>
<style type="text/css">
h1{
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
}
h4{
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
}
li{
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h4>List of operating System</h4>
<ul>
<li> Windows</li>
<li>MACINTOSH</li>
<li>LINUX</li>
<li>UBUNTU</li>
</ul>
</body>
</html>

出力:

HTMLの色 

HTML にはカスタマイズ可能なアプリケーションが多数あるため、テキストの色を指定するにはさまざまな方法があります。

  • スタイルの適用セクション
  • 個別の CSS スタイルシートの作成
  • テキストの折り返し

<スタイル> を使用してテキストの色を適用する方法セクション?

HTML カラーを使用するさまざまな方法を見てみましょう:

1. HTML カラーを使用したラッピング

以下のコードは、単純な HTML コードを使用して段落内のテキストの色を変更します。ウェブサイトを彩るための 140 色の名前があります。

以下のコードは、