ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML カラーピッカー
HTML カラーピッカー
- PHPzオリジナル
- 2024-09-04 16:35:02923ブラウズ
誰もが知っているように、HTML はハイパーテキスト マークアップ言語と呼ばれ、ブラウザ上にテキストを表示するために使用され、JavaScript や CSS などの特別な補助スクリプトの助けを借りて、コンテンツを美しく見ることができます。カラーコーディングは、HTML Web ページを美しくする一環です。
HTML のカラー コードは、Web 上でその色を識別して表す識別子として機能します。一般的に使用されるカラーコーディングは、その色の「16 進数」コードを表す HEX です。同様に、「赤、緑、青」の略である RGB のような他のカラーコードもあります。 HSL と呼ばれる別のカラーコードは、「色相、彩度、明度」の略です。 HSL は、好みの色を選択する際にさらに利点があります。
一般に 16 進コードの使用が好まれるため、私たちは 16 進コードについて最善を尽くして説明しました。 16 進数のカラー コードには、記号、ハッシュ ( # )、および 6 つの数字または数字のセットが含まれます。これらは 16 進数体系で表現されているため、「FF」は最高の数字であり、16 進数体系の 「255」を表します。
これらの 6 桁には、RB カラー コードを表す 3 つのペアが含まれています。これら 6 桁のうち、最初の 2 桁のペアは、「赤」の色の強さを表します。したがって、最初のペアの場所の「FF」は、最大強度の赤色を表します。 「00」は強度が最も低い場合に使用され、「FF」は強度が最も高い場合に使用されます。 「緑色」を取得する場合、中央のペアは強度を表します。
同様に、「Blue」の場合、最後のペアは強度を表します。
- したがって、#FF0000 のような 16 進数は
となります。
-
#00FF00 のような 16 進数は、
となります。
-
#0000FF のような 16 進数は、
となります。
- 「赤」と「緑」を組み合わせた黄色を取得するには、#FFFF00 などの同様の 16 進数が作成されます。
HTML カラーピッカー
カラーピッカーを作成すると、ユーザーは自分で選択した色を「選択」できます。最も標準的なカラー ピッカーは、MS Word やペイントなどの Windows アプリケーションで使用されます。皆さんはカラーピッカーをよく知っています。下の写真を見て記憶を呼び起こしてください:
「color」 としての入力タイプは、色を含む入力フィールドの作成に使用されます。ただし、Internet Explorer 11 以前のバージョンなどの一部のブラウザーは、この入力タイプをサポートしていません。したがって、ブラウザによっては、入力タイプを使用するとカラー ピッカーがポップアップ表示されます。一部のブラウザは、この入力フィールドを単に以下のようなテキスト ボックスに変換します:
したがって、サポートされているブラウザを使用すると、同じコードによって次のカラー ピッカー パレットが生成されます。
そのカラーボックスをクリックすると、カラーパレットがポップアップします。ここでは、input type color 属性をサポートする Google Chrome バージョン「78.0.3904.97」を使用しています。
このようなカラーピッカーを作成するコードについては、次のセクションで説明します。
カラーピッカーを作成するためのソースコード
以下は、HTML で最も単純なカラーピッカーを作成する方法の説明です。以下のコードを参照してください:
コード
<body> <form action="HTMLColorPicker.html"> Select your favorite color: <input type="color" name="favcolor" id="color" > </form> </body>
上記の HTML コードには、「color」という入力タイプを使用する FORM 要素が含まれています。このカラー入力タイプは、最も単純なカラー ピッカー (Windows 標準のカラー ピッカー) を作成して表示します。ユーザーは好みの色を選択できます。
色としての入力タイプは、デフォルトの背景色が「黒」であるテキスト ボックスまたは複数のボタンを作成します。それをクリックすると、ユーザーに色の選択肢が表示されます。
以下に示すこのカラーピッカーの動作を観察してください:
ステップ 1: デフォルトの背景色が「黒」のボタンをクリックします。
上記のコードは、上に示したようにボタンを作成するだけです。
ステップ 2: をクリックして新しい色を選択します。
ステップ 3: デモ用に明るい緑色を選択しました。 「OK」ボタンをクリックします。
In the above screen-shots, you can easily see the selected color is shown in the last screen-shot.
The input type ‘color’ provides this simple functionality of a color picker in HTML5. After picking your color, it is your choice of what the selected color can be used for.
In the following example, I incremented the above example and modified it with some inclusions.
The following example is a combination of HTML and Javascript. This example has a FORM element that uses the input type ‘color’ tag. This FORM, when submitted, our JAVASCRIPT is triggered.
Observe the source code for the FORM element below:
Code:
<body> <form action="HTMLColorPicker.html"> Select your favorite color: <input type="color" name="favcolor" id="color" > <input type="submit" onclick = "ReturnColor()" id="submit" /> </form> </body>
We added a new line to our previous program. A submit button. This submit button is when clicked; our Java script is triggered, which is given below:
function ReturnColor(c)
{
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code.
document.write(str+c);
}
When the ‘Submit’ button is clicked, our function in javascript is triggered. The above function, ReturnColor (), returns the HEX code, that is, Hexadecimal code for the selected color by our color picker. When the code is executed, the following is our output.
The above output is in the HEX code. The 6 numbers represent the inclusion of Red, Green and Blue colors resulting in the selected color. This HEX code can also be converted easily into RGB code.
Similarly, we can save the above code and set it as a background color or a font color for the user. To do so, we added a few more lines of code into our already existing source code.
Following is the complete code, with the HTML body remaining the same:
<script>
function ReturnColor(c)
{
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code
document.write(str+c);
document.write("<br/>");
//A HEX color code can be converted into RGB code
var R=c.slice(1,3);
var G=c.slice(3,5);
var B=c.slice(5);
//Displaying the corresponding RGB code
document.write("In RGB format, RGB("
+ parseInt(R,16) + ","
+ parseInt(G,16) + ","
+ parseInt(B,16) + ")");
document.write("<br/>");
//Setting our selected color as Font color
var color = c;
var str1 = "Your color will appear as this font color";
var str2 = str1.fontcolor(c);
document.write(str2);
//Setting our selected color as Background color
document.write("<div style='border: solid; height: 90px; width: 90px; background-color:"+color+"'/>");
}
</script>
This is our complete script. When the code is executed, and a color is selected, the following is the output that is displayed.
Conclusion
There are many ways and many combinations that can help you to create a color picker, that too smart one. For example, with the combination of HTML5 and CSS and JavaScript, you can use yet another element called ‘canvas’ that has its own libraries that helps create a lightweight, small and cross-browser color picker. But that’s for another time.
以上がHTML カラーピッカーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。