コニファ・ロゴ

ツール集:webページ作成作業用に、自分用のカラーテーブルを作成(2)

webページ作成作業用に、自分用のカラーテーブルを作成の(2)です。自分の使い勝手に合わせて、jQueryのプラグインなどを追加し少し機能を増やしました。古いプラグインが混っているため、対応するブラウザに偏りがあるかもしれません。

使い方: このページを表示すると、「jquery.csvToTable.js」で、サンプルのcsvファイルを読み込みtableを作成します。各セルには3桁、または6桁の16進色コード、もしくは「#」のみがテキストで入っています。「色を反映」ボタンをクリックすると、16進色コードが入っているセルの背景にそのコードの色を反映させます。文字色が黒なので背景色が暗く見づらいときは、「文字色を調整」ボタンをクリックすると、背景色の明度を判定して、暗い背景色の文字色を白にします。文字色を白に変えた後、再度色コードを書き換え背景色を明るくした際もこのボタンクリックで文字色調整が可能です。

前回と同様、セルをクリックして、3桁、または6桁の16進色コードを入力すると、テキストと背景色に反映します。作業を終えるときに、「CSV保存」ボタンをクリックすると、変更した内容を「table.csv」という名称で保存します。ブラウザにより保存できない場合もあるので、同時に下側「CSV書き出し」にcsvを書き出します。これをコピー&ペーストするなどして「table.csv」という名称で保存します。スクリプトの読み込み用のcsvファイルのパスを確認して「table.csv」を置き換えれば、次回のカラーテーブル表示時に反映します。

また、表示色数を増やしたいときは、エディタなどで「table.csv」を開き、行を追加します。列数を増やす場合は、すべての行で個数を同じにします。列数を多く増やす場合は、cssの調整が必要になります。
カラーサンプル(淡い色)
#ffbcbc
#ffbcdd
#ffbcff
#ddbcff
#bcbcff
#bcddff
#bcffff
#bcffdd
#bcffbc
#ddffbc
#ffffbc
#ffddbc

カラーテーブル

CSV書き出し

 

 

 

戻るボタン