色は、情報を非言語的に伝える上で重要な役割を果たします。インタラクティブな色を使用した Web サイトは、魅力的で視覚的に魅力的であると見なされます。 HTML 要素に色を適用するには、RGB、RGBA、HEX コード、HSLA、および HSL のさまざまな方法があります。ただし、ページを調べたり、カラー ピッカーから色を選択したり、開発者ツール パネルのスポイト機能を使用したりすることで、カラー コードを見つけることができます。
この研究では、HTML でカラー コードを見つける方法について説明します。
方法 1: Web ページを調べて HTML のカラー コードを見つける
ページを調べてカラーコードを見つける手順は次のとおりです。
Step1: ウェブページを開く
まず、必要な Web ページを開きます。
ステップ 2: 検査オプションの選択
ページを右クリックし、「 検査する 」へのアクセスを提供するメニューからのオプション 開発者ツール 」パネル：
その結果、「 要素 」タブがブラウザの下部に表示されます。
ステップ 3: 開発者ツール パネルの場所を調整する
隅から3つの点をクリックすると、パネルの配置を選択できます。たとえば、緑色で強調表示されたアイコンを選択しました。さらに、検査ウィンドウは隅をドラッグしてサイズを変更できます。
ステップ 4: 検査する要素を選択
次に、強調表示されたアイコンをクリックして、検査する要素を選択します。
ステップ 5: 要素を選択する
カラーコードを見つける必要がある要素にカーソルを合わせてクリックします。その結果、「 スタイル 」タブが開き、選択した要素のスタイル プロパティが表示されます。ここから、緑色の強調表示されたボックスで示されているように、色を選択する必要があります。
ステップ 6: カラーピッカーから色を選択
開いているカラー ピッカー ウィンドウからカラー コードをコピーします。
下の画像は、赤色で強調表示された小さなカラー ボックスをクリックして色を選択できることを示しています。一方、黄色のボックスは、選択した要素の色を確認するために徐々に変化するポインターを表します。
ステップ 7: 色の不透明度を調整する
下の GIF に示すように、色の不透明度を調整することもできます。
方法 2: スポイト機能を使用して HTML のカラー コードを検索する
スポイト機能を使用して、Web ページから任意の色を選択することもできます。この機能は、表示されたウィンドウのどこからでも色を選択できるため、非常に便利です。
ノート： スポイト機能は、下の画像の赤くハイライトされたボックスで表されます。
以下は、スポイト ツールの動作のデモンストレーションです。
要素の色を選択したら、カラー コードをコピーして、プロジェクトの CSS に貼り付けます。
結論
HTML 要素に色を適用するには、RGB、RGBA、HEX コード、HSLA、および HSL のさまざまな方法があります。 「」でカラーコードを見つけることができます 検査中 」 任意の Web ページ、または「 カラーピッカー 」と「 点眼器 ' 特徴。この記事では、詳細な例を使用して、HTML でカラー コードを検索する手順を説明しました。