この記事は最終更新日から8年経過しています。内容が古い可能性があります。
昨日の「CSSで蛍光ペンでラインを引いたように見せる表現をするには？」を書くために色を選んだり太さをあれこれ試したり、その結果をspanやClassにしたりするのが結構面倒くさい作業でした。そのため、蛍光ラインマーカーメーカーのようなものを作ろうと思い立ったのですが、その前に色を選ぶ部品をどうやって作ろうか、というところでだいぶ時間がかかってしまいました。
今回はWebカラー一覧からSELECTで色名を選ぶことのできる部品を作る過程について書きたいと思います。
記事をざっと見る
Webカラー一覧をファイルにしてみました
Webカラー一覧を探したときにたくさんのサイトが見つかり、そのサイトで表として掲載されているものはあるのですがSELECT部分を作るためには手っ取り早くcsvとかExcelとか何らかのテキストデータ形式とかでダウンロードファイルが用意されているサイトがあるといいんだけど～、と思って少しの間探したのですがどうも見つかりませんでした。きっとどこかには、あると思うのですがとりあえず見つからず。
ないなら作るしかないなぁと思いました。まずは後々使えるようにExcelの形にまとめてみるかなと。元にするデータは、
を使わせていただきました。
このようにHTMLで表示されている色一覧を
こんな感じでコピーして
Excelに貼り付けます。
色コードをすべて貼り付けてから編集しました。黄色の列が元々あった列で、青色の列が編集した列です。プログラムやjavascriptで使うときには1行1色、となっていた方が良いと思うので、系統の色はそれぞれの色に持たせました。あとはHTMLでよく使う形式の #ffffff などの形にしたかったので、一番右の列にスペース抜きの値を作って、
こんな感じの関数で色コード指定列を作りました。
ここまでできていればいろいろなことに応用できるはず、です(^^)/
ここにファイルを置いておきます。
最近のExcel版 webcolor.xlsx
webcolor
少し前のExcel版 webcolor_97_2003.xls
webcolor_97_2003
Webカラーが選べるSELECT部品をExcelで作る！
私が作りたいのは、
このように色名を選ぶときのSELECT部品です。色が背景に敷いてあるのでわかりやすいかなぁと思います。
これをHTMLで書くと、
<select name="webcolor" id="webcolor" onChange="selectedColor(this)"> <option id="init" style="background-color:#ffffff" value="">色を選んでください</option> <option id="IndianRed" style="background-color:IndianRed">IndianRed</option> <option id="LightCoral" style="background-color:LightCoral">LightCoral</option> <option id="Salmon" style="background-color:Salmon">Salmon</option> </select>
こんな感じになります。onChangeイベントが指定してありますがそれはまたあとで書きます。
3色ならこのように手書きでもいいんですが、今回は100色以上あるのでとても大変です。そこでExcelの関数でこの option 部分を作ってしまいたいと思います。
空いているG列に
こんな感じの
="<option id=""" & A2 & """ style=""background-color:" & A2 & """>" & A2 & "</option>"
関数を書きます。
リターンキーを押すと、このようにoption部分の記述ができるのであとは
今関数を入力したセルの右下にある ■ をクリックして、
色の最後の行までドラッグします。
これですべての色のoption行ができたので
今作ったG列を選択し右クリックして コピー をクリックしたものを
HTMLに貼り付けます。
クリックするとたくさんの色が
選べるようになりました(^^)/
Webカラーが選べるSELECTが入っているHTMLのソースはこんな感じです
WebカラーのSELECT部品を実現するにはHTMLに
<script type="text/javascript">
function selectedColor(e) {
// 選ばれたリストの背景色を変える
var bgColor = '';
if (document.colorform.webcolor.value == ''){
bgColor = '#ffffff';
} else {
bgColor = document.colorform.webcolor.value;
}
e.style.backgroundColor = bgColor;
}
</script>
このjavascriptを入れておきます。SELECT部品だけだと選ばれたときの背景色が変わらないので、このコードで変わるようにしました。
SELECT部品は
<form name="colorform" id="colorform" method="post"> <div> <select name="webcolor" id="webcolor" onChange="selectedColor(this)"> <option name="init" id="init" style="background-color:#ffffff" value="">色を選んでください</option> <option id="IndianRed" style="background-color:IndianRed">IndianRed</option> <option id="LightCoral" style="background-color:LightCoral">LightCoral</option> <option id="Salmon" style="background-color:Salmon">Salmon</option> <option id="DarkSalmon" style="background-color:DarkSalmon">DarkSalmon</option> <option id="LightSalmon" style="background-color:LightSalmon">LightSalmon</option> <option id="Crimson" style="background-color:Crimson">Crimson</option> <option id="Red" style="background-color:Red">Red</option> <option id="FireBrick" style="background-color:FireBrick">FireBrick</option> <option id="DarkRed" style="background-color:DarkRed">DarkRed</option> <option id="Pink" style="background-color:Pink">Pink</option> <option id="LightPink" style="background-color:LightPink">LightPink</option> <option id="HotPink" style="background-color:HotPink">HotPink</option> <option id="DeepPink" style="background-color:DeepPink">DeepPink</option> <option id="MediumVioletRed" style="background-color:MediumVioletRed">MediumVioletRed</option> <option id="PaleVioletRed" style="background-color:PaleVioletRed">PaleVioletRed</option> <option id="LightSalmon" style="background-color:LightSalmon">LightSalmon</option> <option id="Coral" style="background-color:Coral">Coral</option> <option id="Tomato" style="background-color:Tomato">Tomato</option> <option id="OrangeRed" style="background-color:OrangeRed">OrangeRed</option> <option id="DarkOrange" style="background-color:DarkOrange">DarkOrange</option> <option id="Orange" style="background-color:Orange">Orange</option> <option id="Gold" style="background-color:Gold">Gold</option> <option id="Yellow" style="background-color:Yellow">Yellow</option> <option id="LightYellow" style="background-color:LightYellow">LightYellow</option> <option id="LemonChiffon" style="background-color:LemonChiffon">LemonChiffon</option> <option id="LightGoldenrodYellow" style="background-color:LightGoldenrodYellow">LightGoldenrodYellow</option> <option id="PapayaWhip" style="background-color:PapayaWhip">PapayaWhip</option> <option id="Moccasin" style="background-color:Moccasin">Moccasin</option> <option id="PeachPuff" style="background-color:PeachPuff">PeachPuff</option> <option id="PaleGoldenrod" style="background-color:PaleGoldenrod">PaleGoldenrod</option> <option id="Khaki" style="background-color:Khaki">Khaki</option> <option id="DarkKhaki" style="background-color:DarkKhaki">DarkKhaki</option> <option id="Lavender" style="background-color:Lavender">Lavender</option> <option id="Thistle" style="background-color:Thistle">Thistle</option> <option id="Plum" style="background-color:Plum">Plum</option> <option id="Violet" style="background-color:Violet">Violet</option> <option id="Orchid" style="background-color:Orchid">Orchid</option> <option id="Fuchsia" style="background-color:Fuchsia">Fuchsia</option> <option id="Magenta" style="background-color:Magenta">Magenta</option> <option id="MediumOrchid" style="background-color:MediumOrchid">MediumOrchid</option> <option id="MediumPurple" style="background-color:MediumPurple">MediumPurple</option> <option id="Amethyst" style="background-color:Amethyst">Amethyst</option> <option id="BlueViolet" style="background-color:BlueViolet">BlueViolet</option> <option id="DarkViolet" style="background-color:DarkViolet">DarkViolet</option> <option id="DarkOrchid" style="background-color:DarkOrchid">DarkOrchid</option> <option id="DarkMagenta" style="background-color:DarkMagenta">DarkMagenta</option> <option id="Purple" style="background-color:Purple">Purple</option> <option id="Indigo" style="background-color:Indigo">Indigo</option> <option id="SlateBlue" style="background-color:SlateBlue">SlateBlue</option> <option id="DarkSlateBlue" style="background-color:DarkSlateBlue">DarkSlateBlue</option> <option id="MediumSlateBlue" style="background-color:MediumSlateBlue">MediumSlateBlue</option> <option id="GreenYellow" style="background-color:GreenYellow">GreenYellow</option> <option id="Chartreuse" style="background-color:Chartreuse">Chartreuse</option> <option id="LawnGreen" style="background-color:LawnGreen">LawnGreen</option> <option id="Lime" style="background-color:Lime">Lime</option> <option id="LimeGreen" style="background-color:LimeGreen">LimeGreen</option> <option id="PaleGreen" style="background-color:PaleGreen">PaleGreen</option> <option id="LightGreen" style="background-color:LightGreen">LightGreen</option> <option id="MediumSpringGreen" style="background-color:MediumSpringGreen">MediumSpringGreen</option> <option id="SpringGreen" style="background-color:SpringGreen">SpringGreen</option> <option id="MediumSeaGreen" style="background-color:MediumSeaGreen">MediumSeaGreen</option> <option id="SeaGreen" style="background-color:SeaGreen">SeaGreen</option> <option id="ForestGreen" style="background-color:ForestGreen">ForestGreen</option> <option id="Green" style="background-color:Green">Green</option> <option id="DarkGreen" style="background-color:DarkGreen">DarkGreen</option> <option id="YellowGreen" style="background-color:YellowGreen">YellowGreen</option> <option id="OliveDrab" style="background-color:OliveDrab">OliveDrab</option> <option id="Olive" style="background-color:Olive">Olive</option> <option id="DarkOliveGreen" style="background-color:DarkOliveGreen">DarkOliveGreen</option> <option id="MediumAquamarine" style="background-color:MediumAquamarine">MediumAquamarine</option> <option id="DarkSeaGreen" style="background-color:DarkSeaGreen">DarkSeaGreen</option> <option id="LightSeaGreen" style="background-color:LightSeaGreen">LightSeaGreen</option> <option id="DarkCyan" style="background-color:DarkCyan">DarkCyan</option> <option id="Teal" style="background-color:Teal">Teal</option> <option id="Aqua" style="background-color:Aqua">Aqua</option> <option id="Cyan" style="background-color:Cyan">Cyan</option> <option id="LightCyan" style="background-color:LightCyan">LightCyan</option> <option id="PaleTurquoise" style="background-color:PaleTurquoise">PaleTurquoise</option> <option id="Aquamarine" style="background-color:Aquamarine">Aquamarine</option> <option id="Turquoise" style="background-color:Turquoise">Turquoise</option> <option id="MediumTurquoise" style="background-color:MediumTurquoise">MediumTurquoise</option> <option id="DarkTurquoise" style="background-color:DarkTurquoise">DarkTurquoise</option> <option id="CadetBlue" style="background-color:CadetBlue">CadetBlue</option> <option id="SteelBlue" style="background-color:SteelBlue">SteelBlue</option> <option id="LightSteelBlue" style="background-color:LightSteelBlue">LightSteelBlue</option> <option id="PowderBlue" style="background-color:PowderBlue">PowderBlue</option> <option id="LightBlue" style="background-color:LightBlue">LightBlue</option> <option id="SkyBlue" style="background-color:SkyBlue">SkyBlue</option> <option id="LightSkyBlue" style="background-color:LightSkyBlue">LightSkyBlue</option> <option id="DeepSkyBlue" style="background-color:DeepSkyBlue">DeepSkyBlue</option> <option id="DodgerBlue" style="background-color:DodgerBlue">DodgerBlue</option> <option id="CornflowerBlue" style="background-color:CornflowerBlue">CornflowerBlue</option> <option id="MediumSlateBlue" style="background-color:MediumSlateBlue">MediumSlateBlue</option> <option id="RoyalBlue" style="background-color:RoyalBlue">RoyalBlue</option> <option id="Blue" style="background-color:Blue">Blue</option> <option id="MediumBlue" style="background-color:MediumBlue">MediumBlue</option> <option id="DarkBlue" style="background-color:DarkBlue">DarkBlue</option> <option id="Navy" style="background-color:Navy">Navy</option> <option id="MidnightBlue" style="background-color:MidnightBlue">MidnightBlue</option> <option id="Cornsilk" style="background-color:Cornsilk">Cornsilk</option> <option id="BlanchedAlmond" style="background-color:BlanchedAlmond">BlanchedAlmond</option> <option id="Bisque" style="background-color:Bisque">Bisque</option> <option id="NavajoWhite" style="background-color:NavajoWhite">NavajoWhite</option> <option id="Wheat" style="background-color:Wheat">Wheat</option> <option id="BurlyWood" style="background-color:BurlyWood">BurlyWood</option> <option id="Tan" style="background-color:Tan">Tan</option> <option id="RosyBrown" style="background-color:RosyBrown">RosyBrown</option> <option id="SandyBrown" style="background-color:SandyBrown">SandyBrown</option> <option id="Goldenrod" style="background-color:Goldenrod">Goldenrod</option> <option id="DarkGoldenrod" style="background-color:DarkGoldenrod">DarkGoldenrod</option> <option id="Peru" style="background-color:Peru">Peru</option> <option id="Chocolate" style="background-color:Chocolate">Chocolate</option> <option id="SaddleBrown" style="background-color:SaddleBrown">SaddleBrown</option> <option id="Sienna" style="background-color:Sienna">Sienna</option> <option id="Brown" style="background-color:Brown">Brown</option> <option id="Maroon" style="background-color:Maroon">Maroon</option> <option id="White" style="background-color:White">White</option> <option id="Snow" style="background-color:Snow">Snow</option> <option id="Honeydew" style="background-color:Honeydew">Honeydew</option> <option id="MintCream" style="background-color:MintCream">MintCream</option> <option id="Azure" style="background-color:Azure">Azure</option> <option id="AliceBlue" style="background-color:AliceBlue">AliceBlue</option> <option id="GhostWhite" style="background-color:GhostWhite">GhostWhite</option> <option id="WhiteSmoke" style="background-color:WhiteSmoke">WhiteSmoke</option> <option id="Seashell" style="background-color:Seashell">Seashell</option> <option id="Beige" style="background-color:Beige">Beige</option> <option id="OldLace" style="background-color:OldLace">OldLace</option> <option id="FloralWhite" style="background-color:FloralWhite">FloralWhite</option> <option id="Ivory" style="background-color:Ivory">Ivory</option> <option id="AntiqueWhite" style="background-color:AntiqueWhite">AntiqueWhite</option> <option id="Linen" style="background-color:Linen">Linen</option> <option id="LavenderBlush" style="background-color:LavenderBlush">LavenderBlush</option> <option id="MistyRose" style="background-color:MistyRose">MistyRose</option> <option id="Gainsboro" style="background-color:Gainsboro">Gainsboro</option> <option id="LightGrey" style="background-color:LightGrey">LightGrey</option> <option id="Silver" style="background-color:Silver">Silver</option> <option id="DarkGray" style="background-color:DarkGray">DarkGray</option> <option id="Gray" style="background-color:Gray">Gray</option> <option id="DimGray" style="background-color:DimGray">DimGray</option> <option id="LightSlateGray" style="background-color:LightSlateGray">LightSlateGray</option> <option id="SlateGray" style="background-color:SlateGray">SlateGray</option> <option id="DarkSlateGray" style="background-color:DarkSlateGray">DarkSlateGray</option> <option id="Black" style="background-color:Black">Black</option> </select> </div> </form>
このようなコーディングです。FORMも書いてあるのは、先ほどのjavascriptを動かすときにFORM名が必要なためです。
このコードをHTMLにしたものを こちら に置いておきましたので動作を確認してみてください(^^)/
このソースはこちらになります→ web_color_parts
応用編として、色を選んでその色ですぐになにかアクションをするというサンプル（今回は背景色を選ばれた色にする）も作ってみました。
このサンプルは こちら から見てみてください。
このソースはこちらになります→ web_color
おまけ：蛍光ラインマーカーメーカーを作る過程なのです
前回ショートコードを作ろうかなと思ったのですが、その前に蛍光マーカーの色や太さを決めるのがかなり面倒くさかったので「蛍光ラインマーカーメーカー」を作りたいと思い始めました。
それを考える過程でまずは色を簡単にわかりやすく選びたいと思ったのでこのSELECT部品を作りました。
ということで、少し進みましたので「蛍光ラインマーカーメーカー」をさらに作り込んでいきたいと思います(^^)/
コメント