簡易カラーピッカー

概要

HTML（イメージマップ/フレームを使用），CSS，JavaScript で制作された簡易カラーピッカーです。

動作環境・推奨環境

1204×768 dot 以上の画面解像度で表示可能な環境。
16bitカラー（32,000色）以上，フルカラー（1677万色）推奨。
Windows版 Internet Explorer5.5以上，ver.6.0以上推奨。
Windows版 Opera Browser7.5以上，ver.8.0以上推奨
Mozilla1.0以上/Fx1.0以上，Mozilla1.8/Fx1.5以上推奨。

そのほかの注意事項

各ウェブブラウザの最新バージョンに近づくにつれて JavaScript の動作が確実になると思います。
各ウェブブラウザの「ステータスバーのテキスト変更を許可する」を有効にすると良いかもしれません。
Opera では［詳細設定］→［コンテンツ］→［フォームにスタイルを適用する］を有効にしてください。

使い方

ColorChart

Web Safeカラーチャート

カラーチャートからの選択で右フレームの背景色/前景色を変更できます。
同時に選択色のRGB値（10・16進数値・割合値）をそれぞれ出力します。
スライダーバーも同時に選択色のRGB値とその明度の位置へ移動します。

色名140種類メニュー

140色メニューからの選択で右フレームの背景色/前景色を変更できます。
同時に選択色の名称，10・16進数値・割合値をそれぞれ出力します。
スライダーバーも同時に選択色のRGB値とその明度の位置へ移動します。
※ Opera8 より前のバージョンではメニュー項目に色が付きません。

背景色/前景色の切り替え

対象を背景色か前景色に切り替えます。

BG⇔COボタン

現在の背景色と前景色を入れ替えます。

色の反転ボタン

現在の背景色か前景色を反転させます。

BgImage

背景画像On/Off チェックボックス

背景画像を表示するかどうかを切り替えます。

背景画像の参照

参照ボタンを押して画像リソースを選択します。
適用ボタンを押すと右フレームに反映されます。

背景画像の繰り返し

r（repeat）：垂直/水平方向ともに返す
n（no-repeat）：繰り返さずに単独
x（repeat-x）：水平方向に繰り返す
y（repeat-y）：垂直方向に繰り返す

（註1：Opera9以降では背景画像を選択できません。面倒ですがパスを直に書込めば適用可能です。）

HEX

16進数値の大文字・小文字の切り替えメニュー

16進数値の a～f を A～F に変換，もしくは A～F を a～f に変換して表示します。

16進数値を可能なときは3桁にする

3桁に省略可能な16進数値を3桁に変換して表示します（例：#FF0033 から #F03）。

BgColor/Color/Slider

140種類の色名入力/色名出力フィールド

現在のRGB値が定義済みの140色である場合にその色名が表示されます。
色名を入力して色変更できます（大文字・小文字の区別はありません）。
アルファベットを入力すると自動的に入力候補をリストボックスに表示します。
（先頭にチルダ「~」を入力すると，部分一致検索で候補を出力します。）
フォーカス状態でEnterキーを押すか，フォーカスを外すと変更されます。
同時にその色のRGB値（10・16進数値・割合値）をそれぞれ出力します。

10・16進数値・割合値の入力/出力フィールド

現在のRGB値（10進数値・16進数値・割合値）をそれぞれ出力します。
数値入力によって右フレームの背景色または前景色を変更できます。
フォーカス状態でEnterキーを押すか，フォーカスを外すと変更されます。
RGB値と割合値のフィールドは↑・-/↓・+ で加算・減算できます。
数値を変更すると自動的に10・16進数値・割合値をそれぞれ出力します。
スライダーバーも現在のRGB値とその明度の位置へそれぞれ移動します。

色変更のスライダ

スライダーバーをマウスでドラッグして，背景色か前景色の明度とRGB値を変更できます。
スライダーのトラック（軌道）上をクリックすることで目的の位置にすばやく移動することもできます。
スライダーにフォーカスされている状態では，カーソルキーの ←/→ で操作することもできます。

Font/Text

Bold/Italic/Underline

Bold（フォントをボールド体か太字にする）
Italic（フォントをイタリック体か斜体にする）
Underline（テキストに下線装飾を付ける）

font-size

キーワード：ブラウザによって計算・保持されているフォントサイズの対照表を参照します。
数値+単位：0以上の整数か小数を入力フィールドに記入して単位を選択してください。
フォーカス状態でEnterキーを押すか，フォーカスを外すとフォントサイズが変更されます。

font-family

フォントファミリ名

コンマ（,）で区切られた複数のフォントファミリ名の優先順リストを指定してください。
フォーカス状態でEnterキーを押すか，フォーカスを外すと右フレームに適用されます。

総称ファミリ

serif（髭や撥ねがあるフォント)
sans-serif（髭や撥ねのないフォント）
cursive（筆記的なフォント）
fantasy（装飾的なフォント）
monospace（等幅のフォント）

Content

内容入力

右フレームの文書に書き込む内容を自由に入力することができます。
右フレームの文書型は，HTML 4.01 Transitional にしてあります。
タグも入力可能ですが，body の中身に成りえるものにしてください。
末尾の Apply ボタンを押すか，フォーカスを外すと変更されます。

権利と謝辞

権利・免責

このパッケージはフリーです。改造，再配布など自由におこなって頂いて構いません。
転載されるときには，ご連絡していただけると幸いです。事前・事後は問いません。
このスクリプトに起因する如何なる事態に対しても制作者は一切責任を持ちません。

謝辞

ウェブセーフカラーのチャート画像をご提供下さった ZSPC の大藤様ありがとうございました。
スライダのスクリプト制作に協力して下さった CLUB とむやん君のJun様ありがとうございました。

概要

使い方