アーカイブ

‘色’ タグのついている投稿

jQueryのcssで得られる色情報はブラウザによって違う

2011 年 9 月 2 日 コメントはありません

jQueryでstyleで指定したフォントの色に関する情報は次のようにして得られます。

HTML

<div id="mydiv" style="color:blue">test</div>

jQuery

c=$("#mydiv").css("color");

これで変数cに色情報が文字列で代入されます。
とても簡単なのですが、ブラウザによって違う挙動をします。

IEの場合

HTMLで「style=”color:blue”」とすると「blue」が得られます。
またHTMLで「style=”color:rgb(0,0,255)”」とすると「rgb(0,0,255)」となります。
「rgb(0, 0, 255)」のように半角スペースを入れても「rgb(0,0,255)」のように半角スペースは省かれます。
「style=”color:#0000ff”」とすると「#0000ff」となります。

Firefox、Chromeの場合

まず、HTMLで「style=”color:rgb(0,0,255)”」とすると「rgb(0, 0, 255)」が得られます。
そして奇妙なのは次です。
HTMLで「style=”color:blue”」とすると、やはり「rgb(0, 0, 255)」となります。
入力した文字列と違う文字列で出力されるのです。これは分かりにくいです。
また細かいですが「rgb(0, 0, 255)」のようにカンマの後に半角スペースが入ります。IEはスペースなしです。

HTML IE Firefox、Chrome
blue blue rgb(0, 0, 255)
rgb(0,0,255) rgb(0,0,255) rgb(0, 0, 255)
カテゴリー: デジタル タグ: , ,

Excelの色をHTMLに変換

2010 年 5 月 31 日 コメントはありません

ExcelのVBAにはRGB関数というものがあります。

RGB(red, green, blue)

赤と緑と青にそれぞれ0から255までの整数を当てはめて色を表します。
関数になっていますが、内容は単純で
RGB=red+green*256+blue*256*256
という計算をしているだけです。

一方、HTMLで色を指定するには「#00FFFF」という形式を使います。
赤と緑と青にそれぞれ0から255までの整数を当てはめて、それぞれ16進数で表わし、頭に「#」を付けます。

Excelで表わされる色をHTMLの表現に変換するユーザー定義関数を作ってみました。

Function rgb2html(num)
    ret = ""
    For i = 0 To 2
        temp = num Mod 256
        ret = ret & Format(Hex(temp), "00")
        num = (num - temp) / 256
    Next i
    rgb2html = "#" & ret
End Function

応用としては「Cells(x, y).Interior.Color」と書くとセルの背景色が取得できるので、ここからHTMLにおける表記に変換できます。
次の例は、1列目に背景色が設定されたセルがあり、その右隣にそれぞれのHTMLにおける表記をセットするものです。

Sub test()
    For i = 1 To 5
        Cells(i, 2) = rgb2html(Cells(i, 1).Interior.Color)
    Next i
End Sub
#C5D9F1
#FFC000
#9BBB59
#215867
#F79646
カテゴリー: Excel タグ: , ,

HTML色見本(モノトーン編)

2008 年 10 月 25 日 コメントはありません

モノトーンでカラーネームの付いているものだけピックアップしました。
グレーよりもダークグレーの方が明るい？ 

カラーネーム コード 色
black #000000 The quick brown fox jumps over the lazy dog.
dimgray #696969 The quick brown fox jumps over the lazy dog.
gray #808080 The quick brown fox jumps over the lazy dog.
darkgray #A9A9A9 The quick brown fox jumps over the lazy dog.
silver #C0C0C0 The quick brown fox jumps over the lazy dog.
lightgrey #D3D3D3 The quick brown fox jumps over the lazy dog.
gainsboro #DCDCDC The quick brown fox jumps over the lazy dog.
whitesmoke #F5F5F5 The quick brown fox jumps over the lazy dog.
white #FFFFFF The quick brown fox jumps over the lazy dog.
カテゴリー: デジタル タグ: , ,