カラーチェッカーアプリを作成した話 -8-
【公開日： 2026年5月27日】
初心者向け： 開発に挑戦 ①webアプリを作成する その8
～文字色変更パーツとプレビューを作成する～
背景色パーツができましたので、続いては文字色変更パーツを追加します。
基本的な動きは同じですので、そこまで時間をかけずに書けるかと思います。
●文字色変更パーツを作成する
現時点で何も書いていませんので、HTML→CSS→JavaScriptの順で進めていきたいと思います。
まず、HTMLでどこに書いていくかというと、color-paletteというクラス名を付けた<div>タグの中に追記します。
html
↑この中です！
背景色パーツと文字色パーツは横並びで表示したいので、ここに文字色の<div>を追加するという事になります。
color-paletteは前回flexにしていますので、ちゃんと横並びになるかもチェックします。
html
color-palette内、かつ背景色用のcolor-innerの</div>の下から書き始めます。
（分かりやすいように34行目に空行を入れています）
バー等、同じものを使いますのでコピペしてしまいます。
大元の<div>クラス名color-innerは、再利用が可能です！同名にすると、cssの設定をそのまま使えるので便利です。
分かりにくいという場合は別名にして、設定を同じにすれば大丈夫です。
h3は背景色説明を文字色説明に修正します。
id名は背景色のものと同じものは使えないので、textと付けることにしました。イベントの関数名も、文字色用に新しく名付けておきます。
webブラウザ表示
画面を確認すると、こんな風になります。
クラス名color-innerを使用しましたので、だいたい同じように表示され、横並びになっていることが確認できました！
一部分で設定が反映されていないところがあります。赤枠で囲んだところです。
ここはCSSで「#colorInput」と記載した部分になります。
id名は1箇所にしか設定できないため、ここだけは新たにCSSに書き込む必要があります。
css
別に難しい話ではありません。1行追記するだけです。
id名が違くても同じ設定を使いたい場合、名前を連名にすることで実現可能です。
名前の後に「,」を付けて区切るだけです。
CSSの#colorInputの記載部分に、#textColorInputを連名にします。
webブラウザ表示
画面を確認します。無事反映されました！
②に関しては、変更した文字色の見本をどこかしらに表示したいと考えました。
そこで、サンプル文字を追加する事にしました。
html
文字色パーツの方の<h3>と<h4>の間に<p>を追加します。
※表示場所はお好みで変えてもok
こちらはJavaScriptで反映させたい箇所なので、classではなくid名を付けます。
この部分が、バーを移動させたときに色が変更されるイメージです。
css
CSSを開き、この部分のデザインも設定します。
※デザインはお好みで
webブラウザ表示
画面はこんな感じになります。
文字色パーツの方が、情報量が増えてスペースが激せまになっています。
気になる場合は、color-innerのheight（高さ）を調整すれば良いのですが、私は面倒くさがりなのでこのまま進めます。
ここからJavaScriptを書いていきます。
同じ仕様の部分は、id名や関数名を変えて再利用可能です。以下、文字パーツJavaScriptの全体画像になります。
JavaScript
コピペする場合も手入力していく場合も、id名や関数名を背景色の方にしていないか確認しましょう。
関数内の変数は、同じ名前を使用できます。
上から順番に書いていき、画面がきちんと反映できているか都度確認した方がスムーズです。
背景色と異なる箇所に、赤線を引いてみました。
背景色はbackgroundColorですが、文字色はcolorになります。
変更したい文字色のid名はsampleTextにしましたので、そのように指定します。
また、背景色の際に記載した16進数計算関数ですが、そのまま文字色の方でも利用可能のため改めて書く必要はありません。
webブラウザ表示
画面を確認し、問題箇所がないかチェックします。
●プレビューを表示させる
パーツが2つ完成しましたので、これらの色を使ってプレビューを表示できるようにします。
color-palette</div>の下に、新しく<div>を設置します。
html
HTMLはこんな感じにしました。
まず、背景色と文字色のコードを上部に表示し、その下に更に<div>を追加し、個々に背景と文字色を同時に表示するように設定します。
イメージとしては・・・背景色のバーが動いてカラーコードが確定した時
1：bgCodeにもそのカラーコードが表示され、2：previewBgColorにその背景色が反映される
文字色の方は
1：textCodeにカラーコードを表示、2：previewTextSampleに文字色が反映 です。
css
CSSはこんな感じにしました。
webブラウザ表示
画面を確認します。カラーパーツ達の下に表示されています。
ブログで紹介しているページはイラストもサンプルで載せています。このようにお好みで調整ができます。
JavaScriptを書いていきます。
まずは背景色の方です。
JavaScript
setRGB()関数内に追加します。
この中に追加する事で、バーを動かしたときに一緒に更新されるように設定できます。
背景色はpreviewBgColor名にし、<div>内全体の色が変化するように指定します。
他の箇所と同じように、変数cを利用すると実装可能です！
背景色のカラーコードも記載します。
JavaScript
また、テキストボックス内にカラーコードを手入力した際も、プレビュー部分が更新されるようにします。
//色を反映する の部分に追加です。
上で書いたのをコピペして、変数をyに変えます。
webブラウザ表示
画面を確認します。
上の背景色パーツで色を変えた時、下のプレビュー欄もちゃんと変化するか確認します。
カラーコードも表示されたので大丈夫そうです！
同じ要領で、文字色の方のJavaScriptも追記します。
JavaScript
webブラウザ表示
画面を確認します。
どちらも問題なく表示されました！
カラーコードも表示されたので大丈夫そうです！これでいちおう完成です！！
まとめ
デザインの修正や、他の便利機能の追加など、コーディングの幅はもっとあるかと思います。
（私が諦めたコントラスト比の計算など）
ちなみにですが、プレビュー追加方法をAI君に相談した時、AI君は新たにfunctionを追加する方法を教えてくれましたが全然うまくいきませんでした！要検証です。
第一の目標、JavaScriptで簡単な1ページアプリの作成ができました。
次回は、もう少しレベルアップしたコーディングに挑戦いたします！
この記事記事を書いた人：
しずく
初心者向け記事の担当者です！
：