JavaScript

【JavaScript】input type="range"を使った RGB → HEX カラーコード変換ツールの作り方

 

今回は JavaScript を使って RGB から HEX にカラーコードを変換するツールの作り方を紹介します。

 

RGB は (202, 243, 255) のように10進法で数値を表し、HEX は #caf3ff のように16進法で色を表記するものです。

ここでは input type="range" を使って RGB の値を取得して HEX に変換します。

input タイプの range は細かい数値の設定をするときに便利です。

使う頻度はあまり多くないかもしれませんが、知っておくと役に立つと思いますので、ぜひお試しください🙂

 


 

動画

準備中

 
 

解説

HTML

まずは HTML を用意します。

HTML ファイルを作成して、以下のコードを追加します。ここでは index.html という名前でファイルを作成しました。

 

6行目

Google Fonts から「Inconsolata」というフォントを読み込んでいます。

Google Fonts には 900 種類以上のフォントが用意されていて、好きなフォントを簡単に使うことができます。

Google Fonts の詳しい使い方はこちらの記事をお読みください。

【2019年版】Google Fonts の使い方(日本語フォントにも対応) ここでは日本語フォントも使える「Google Fonts の使い方」を紹介しています。 使い方はとても簡単で フォン...

 

25~27行目

<input type="range" min="0" max="255" value="255" id="r" onchange="changeRange()">

 

min は range の最小値、max は最大値です。

value には初期値を設定しています。

onchange には「この range の値が変更されたら changeRange 関数を呼ぶ」という設定をしています。

 

35行目

RGB の初期値(value)を白色 (255, 255, 255) にしているので、HEX で白を表す #ffffff にしています。

 
 

CSS

HTML だけだと使いづらいので、CSS でレイアウトを調整します。

9~25行目を追加します。

 

このようになれば準備完了です。

 
 

JavaScript

JavaScript 部分では range が変更されたときに changeRange 関数を呼び出します。

changeRange 関数では

  1. input の値を取得して、int 型に変換
  2. 16進数に変換
  3. HEX 型の色を作成
  4. 背景色とテキストを更新
  5. 文字色の切り替え

を行います。
 

13~42行目を追加します。

 

39行目

toString() を使って、数値を10進法から16進法に変更しています。
 

40行目

if (num < 16) hex = "0" + hex;

HEXでの色の表示は #03060b のようになるので、num が16より小さい場合は、頭に0をつけて桁を揃えています。


 

30~34行目

ここではテキストの色を変更して文字を見やすくしています。

作成された色が暗い場合は文字色を白に、明るい場合は黒にしています。
 
 

完成

 
 

うまく動かない場合は、以下のサンプルコードを確認してみてください🙂

 
 

サンプルコード

 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません!)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です