MISTY-NET JavaScript講座 HOME / ご利用について / リンクに関して / 推奨環境 / 免責・規約 / お問合せ / リンク集 / Q&A

JavaScript 入門編

JavaScript 活用編

ラブラブメールでツーショット

人気サイトランキング


   HOME >> JavaScript 入門編 >> 色の指定について
■ 色の指定について

JavaScript での色の指定は、HTMLやスタイルシートと同じ方式となっています。
ユーザーの操作に合わせてページの背景色や、リンクの色、フォントの色などに、 元の色とは違う色を指定することで、変化のあるページの作成が可能です。



様々な色の指定方法


[ 色の指定方法 ]
  • #RRGGBB 方式
  • #RGB 方式
  • rgb(%指定) 方式
  • rgb(10進数指定) 方式
  • カラーネーム 方式



  • [ #RRGGBB 方式 ]
    色の指定には、光の3原色である赤(red)・緑(green)・青(blue) を使用します。
    #RRGGBB 方式では、この3原色である赤緑青を2桁の16進数(00〜ff)・256段階で指定します。

    (使用例) document.bgColor = "#ff0000"; ・・・ 背景色を赤色に指定


    [ #RGB 方式 ]
    #RGB 方式は、赤緑青を1桁の16進数(0〜f) ・16段階で指定します。

    (使用例) document.bgColor = "#f00"; ・・・ 背景色を赤色に指定


    [ rgb(%指定) 方式 ]
    rgb(%指定) 方式では、赤青緑をそれぞれ0〜100%で指定します

    (使用例) document.bgColor = rgb(100%,0%,0%); ・・・ 背景色を赤色に指定


    [ rgb(10進数指定) 方式 ]

    (使用例) document.bgColor = rgb(255,0,0); ・・・ 背景色を赤色に指定


    [ カラーネーム 方式 ]
    (使用例) document.bgColor = "red"; ・・・ 背景色を赤色に指定






    カラーグラデーションを表示してみよう!
    #RRGGBB 方式でカラーテーブルを表示します。
    3色のうち1色の値を基準値として決めて「表示する」 ボタンをクリックすると、残りの2色でグラデーションテーブルが表示されます。

    テーマ別のカラーテーブル表示もあるのでクリックしてみてください。


    赤(R)の値が の時の緑(G)青(B) のグラデーションを
    緑(G)の値が の時の赤(R)青(B) のグラデーションを
    青(B)の値が の時の赤(R)緑(G) のグラデーションを


    テーマ別カラーテーブル


    / 00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
    00                
    11                
    22                
    33                
    44                
    55                
    66                
    77                
    88                
    99                
    aa                
    bb                
    cc                
    dd                
    ee                
    ff                



    Copyright (C) since 2004 有限会社ミスティーネット All Rights Reserved .