例 # 01
この記事の最初の例から始めましょう。シンプルな色選択機能を使用して HTML 要素にランダムな色を生成する方法を示します。 このコード例は、HTML の main タグから始まり、その後に空の head タグが続きます。 body タグを使用してこの HTML ページの body 要素を定義し、その後に JavaScript スタイリングを含む script タグを使用して、このページを美的でスタイル化しています。 インライン スタイル タグ内の「text-align」プロパティを使用して、本文テキストが中央に配置されています。 ここでは、サイズ 1 の見出しが 2 つ使用されています。
最初の見出しは、インライン スタイルを使用して、color プロパティを使用して緑色に着色しています。 2 番目の見出しは、ID「pick」とインライン スタイル タグで指定されており、「color」プロパティを介してしばらく赤く色付けされています。 この後、このボタンをタップしたときにどの色を表示する必要があるかを指定するために、「pickColor()」関数から戻り値を取得する onclick 属性とともに button タグが使用されます。 この HTML スクリプトを動的にするための JavaScript コードを次に示します。 これには、「pickColor」メソッドの関数定義の使用が続く script タグが含まれています。 このメソッドは配列「Col」を初期化しており、配列内で異なる色を使用しています。つまり、特定の色番号を使用しています。
別の変数「random_color」は、Math ライブラリの「floor」関数と「random」関数を適用して「Col」配列からランダムな色を取得するために使用されています。 計算された「床」値が何であれ、この配列の特定のインデックスからランダムな色を取得するために使用されます。 この HTML ファイルの見出し 2 の ID「pick」は、ID を取得するために使用され、変数「x」に保存されています。 その後、変数「x」にスタイル属性「color」を適用し、「random_color」変数を使用して見出し 2 をランダムに色付けしました。 このコードについては以上です。 保存して「実行」メニューで実行してみましょう。
次の図は、Chrome ブラウザーでの出力を示しています。 2 つの見出しの後にシンプルなボタンが表示されます。 最初の見出しは静的ですが、2 番目の見出しは、ユーザーがボタンをタップするたびにランダムに色を変更するために使用されています。
ボタンをタップする前は、見出しの色は赤でした。 タップすると、以下のように薄いオレンジ色になります。
もう一度ボタンをタップすると、見出しの色が黄色に変わります。
ボタンをもう一度タップすると、見出しの色が緑色に変わります。
このように、ボタンをタップするたびに、見出しの色が青、緑、黄色などにランダムに変化します。
例 # 02
HTML ファイルの一部の要素の色をランダムに変更する高度な例から始めましょう。 ボタンを使用したり、セクションをタップしたりせずに、1 秒ごとにいくつかの見出しの色をランダムに変更する HTML ファイルを作成しました。 また、ランダムな「div」セクションを作成し、HTML ページの任意の領域をクリックするとランダムな色で塗りつぶします。 最初に「body」タグの説明を読んでから、HTML ページの説明のこのセクションを読むことをお勧めします。 HTML ファイルは、この Web ページのさまざまな HTML 要素に色を付けるための style タグで始まりました。 「#color」ID は、「最小」入力「div」の幅と高さをそれぞれ 10em と 6em に設定するために使用されています。 見出し 1、見出し 4、および段落のフォント ファミリーは、サンセリフに設定されています。 テキストが中央に配置されました。 「box」クラスは、2 番目の「div」セクションの width、height、align-items、および justify-content プロパティをそれぞれ 100%、33vh、center、および center に設定するように指定されています。 スタイリングはここで行われました：
‘
このファイルの JavaScript コード内で、ミリ秒ごとに「setColor」関数を使用してランダムな色を渡すことで、「setInterval」関数を呼び出しています。 関数「setColor」は、「randomeHexaDecimalColorString()」関数を使用してランダムな色を取得し、最初の「div」セクションの ID を取得して、特定の「div」にランダムな色を適用しています。 ここでは、関数「changeColor」を使用して色の配列を作成し、「floor」メソッドによってその配列から 1 つの色をランダムに選択しています。
これは、body の 2 番目の「div」要素の内側の「div」セクションに適用され、「div」ボックスの色をランダムに変更します。 関数「rgbColor」は、前の「randomNumber」関数を使用しながら、赤、緑、および青の色の値を初期化するために使用されています。
目 randomHexaDecimalColorString() 関数は、「toString」関数と「padStart」関数を使用して赤、緑、青の組み合わせの値を取得し、呼び出し元の関数に戻ります。 The changeColorRandomly() 関数は再び randomHexaDecimalColorString() ID「text」で指定された色番号に従って、ボックスの色を変更する関数。 「clickHandler」関数は、セクション内の任意の場所をクリックしたときにボックスの色をランダムに変更するために使用されます。
HTML の「body」タグには、テキストを揃えるためのインライン スタイルが含まれています。 「text-align」プロパティを使用して中心を含めます。 ページを 2 つのセクションに分割する 2 つの主要な「div」要素があります。 1 つ目は識別用の ID「auto」を含み、もう 1 つにはクラス「box」を含みます。 最初の「div」セクションには、サイズ 1 の単一の見出しとその固有の見出しタイトルのみが含まれます。 もう 1 つの「div」セクションには、「p」HTML 要素を使用して 1 行の段落を追加し、「input」タグ要素を使用して色 ID を入力として取得し、この色を変更する別の「div」が含まれています。それによると「div」。
それに伴い、この「div」セクションの h4 見出しは、ID「text」を使用して、HTML ページをクリックするたびに色番号をランダムに変更します。 次のコードを保存して実行しましょう。
最初の見出しは、ミリ秒ごとに色が変わります。 HTML ページの 2 番目の「div」セクションをクリックすると、ボックスの色もランダムに変化します。
結論
これは簡単なテクニックを使って、苦労せずにいくつかの HTML 要素の色をランダムに変更することについてです。 私たちの例では、「pickColor」関数を使用して、配列から 1 つの色をランダムに選択し、それを特定の要素に適用する方法をカバーしようとしました。 HTML画面のどこかをタップすることなく、特定の要素の色を即座に変更する関数 setInterval() を実装しようとしています。つまり、自動色変更です。
The post CSS ランダムカラー appeared first on Gamingsym Japan.