ホームページ > ウェブフロントエンド > jsチュートリアル > ランダムカラージェネレーターを作ってみましょう!

ランダムカラージェネレーターを作ってみましょう!

Barbara Streisand
リリース: 2025-01-14 09:54:42
オリジナル
388 人が閲覧しました

Let’s Create a Random-Color Generator!

JavaScript を初めて使用する場合は、データ型、ロジック、関数などがどのように機能するかについて多くのことを学んでいることでしょう。これは良いことです。いつかもっと複雑なプロジェクトで JS を使用するには、基礎から始める必要があります。ただし、注意力の持続時間によっては、JS スキルを実際の Web サイトで活用したいという強い欲求をすぐに感じ始めるかもしれません。これを行うのは少し複雑になる可能性があります (ただし、正規表現ほど複雑ではありません、アミライト)。しかし、始めることができる簡単なものの 1 つは、ご想像のとおり、ランダム カラー ジェネレーターです。この記事では、私が自分で構築するために使用した手順を説明します。

1.定型HTMLを追加する

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA=Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random-Color Generator</title>

  <!--Link stylesheets-->
  <link rel="stylesheet" href="./styling.css">
  <link rel="stylesheet" href="./responsive.css">
</head>
ログイン後にコピー
ログイン後にコピー

VS Code を使用している場合は、「!」と入力できます。空の HTML ドキュメントに入力し、まだ知らなかった場合は、「Enter」を押してこの部分を追加します (他のテキスト エディターについてはわかりません)。定型文の下に、このプロジェクトに使用した CSS ドキュメントへのリンクを追加しました。 HTML ファイルが大きくなりすぎて複雑になりすぎないように、CSS を別のファイルに保存することをお勧めします。これから作成する JavaScript はそれほど長くないため、

著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート