Webカラー一覧から、色を見ながら選べるSELECT部品を作ってみました!

昨日の「CSSで蛍光ペンでラインを引いたように見せる表現をするには?」を書くために色を選んだり太さをあれこれ試したり、その結果をspanやClassにしたりするのが結構面倒くさい作業でした。そのため、蛍光ラインマーカーメーカーのようなものを作ろうと思い立ったのですが、その前に色を選ぶ部品をどうやって作ろうか、というところでだいぶ時間がかかってしまいました。
今回はWebカラー一覧からSELECTで色名を選ぶことのできる部品を作る過程について書きたいと思います。

Webカラー一覧をファイルにしてみました

Webカラー一覧を探したときにたくさんのサイトが見つかり、そのサイトで表として掲載されているものはあるのですがSELECT部分を作るためには手っ取り早くcsvとかExcelとか何らかのテキストデータ形式とかでダウンロードファイルが用意されているサイトがあるといいんだけど~、と思って少しの間探したのですがどうも見つかりませんでした。きっとどこかには、あると思うのですがとりあえず見つからず。

ないなら作るしかないなぁと思いました。まずは後々使えるようにExcelの形にまとめてみるかなと。元にするデータは、

WikiPedia ウェブカラー x11の色名称

を使わせていただきました。

このようにHTMLで表示されている色一覧

こんな感じでコピーして

Excelに貼り付けます。

色コードをすべて貼り付けてから編集しました。黄色の列が元々あった列で、青色の列が編集した列です。プログラムやjavascriptで使うときには1行1色、となっていた方が良いと思うので、系統の色はそれぞれの色に持たせました。あとはHTMLでよく使う形式の #ffffff などの形にしたかったので、一番右の列にスペース抜きの値を作って、

こんな感じの関数で色コード指定列を作りました。

ここまでできていればいろいろなことに応用できるはず、です(^^)/

ここにファイルを置いておきます。

最近のExcel版 webcolor.xlsx

webcolor

少し前のExcel版 webcolor_97_2003.xls
webcolor_97_2003

Webカラーが選べるSELECT部品をExcelで作る!

私が作りたいのは、

このように色名を選ぶときのSELECT部品です。色が背景に敷いてあるのでわかりやすいかなぁと思います。

これをHTMLで書くと、

こんな感じになります。onChangeイベントが指定してありますがそれはまたあとで書きます。

3色ならこのように手書きでもいいんですが、今回は100色以上あるのでとても大変です。そこでExcelの関数でこの option 部分を作ってしまいたいと思います。

空いているG列

こんな感じの

関数を書きます。

リターンキーを押すと、このようにoption部分の記述ができるのであとは

今関数を入力したセルの右下にある ■ をクリックして、

色の最後の行までドラッグします。

これですべての色のoption行ができたので

今作ったG列を選択し右クリックして コピー をクリックしたものを

HTMLに貼り付けます。

クリックするとたくさんの色が

選べるようになりました(^^)/

Webカラーが選べるSELECTが入っているHTMLのソースはこんな感じです

WebカラーのSELECT部品を実現するにはHTMLに

このjavascriptを入れておきます。SELECT部品だけだと選ばれたときの背景色が変わらないので、このコードで変わるようにしました。

SELECT部品

このようなコーディングです。FORMも書いてあるのは、先ほどのjavascriptを動かすときにFORM名が必要なためです。

このコードをHTMLにしたものを こちら に置いておきましたので動作を確認してみてください(^^)/

このソースはこちらになります→ web_color_parts 

応用編として、色を選んでその色ですぐになにかアクションをするというサンプル(今回は背景色を選ばれた色にする)も作ってみました。

このサンプルは こちら から見てみてください。

このソースはこちらになります→ web_color

おまけ:蛍光ラインマーカーメーカーを作る過程なのです

前回ショートコードを作ろうかなと思ったのですが、その前に蛍光マーカーの色や太さを決めるのがかなり面倒くさかったので「蛍光ラインマーカーメーカー」を作りたいと思い始めました。

それを考える過程でまずは色を簡単にわかりやすく選びたいと思ったのでこのSELECT部品を作りました。

ということで、少し進みましたので「蛍光ラインマーカーメーカー」をさらに作り込んでいきたいと思います(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る