アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -234ページ目

色 color

色の指定は光の三原色R(赤)、G(緑)、B(青)の3色によって行われます
たまにRGB(RRGGBB)なんて聞くこともあるかと思いますが・・・コレです



色の指定は各色を256段階で指定して3色を指定することにより約1670万色にもなります
この約1670万色をフルカラー(トゥルーカラー)といっています
----16×16×16×16×16×16=16,777,216
----256×256×256=16,777,216


え~・・・・?
1600万色なんて使ったことないよ~
クレヨンだって24色しか使ったことないのに~

それに色の指定は6桁って聞いたけど・・・・???


そうです・・・
各色2桁の3色で6桁・・・なんです
256を2桁であらわすために16進法を使っています


白は #ffffff なんて表しますが・・・
fなんて使っているから記号だと思っていませんか?
ffは16進法で、普段使っている10進法では255 のことです
つまり R(赤)を255、G(緑)を255、B(青)が255 ですよ~ってこと
0 から始まるから255は256番目ってこと

10進法→ 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
16進法→ 0 1 2 3 4 5 6 7 8 9 A B C D E F 11 12



ちなみに絵の具とかで色を全部合わせると黒になりますが・・・・


コンピューターの世界では全部合わせると・・・白です
電気を全部つけると明るくなって一番明るいのが白で
電気を全部消すと真っ暗で黒・・・・

黒は#000000 R(赤)が0、G(緑)も0、B(青)も0 

全部の値が一番小さいのが黒

全部が一番暗いのが黒
わかりやすく説明するとこうです


赤・緑・青それぞれで光の強さを256段階で調節して色を表しているんです


余計なことですが・・・以前・・・
本当は黒は無いって聞いたことがあります
電源を切った時のディスプレイの色・・・これ以上黒くするなんて不可能です
なのでまわりを明るくして相対的に黒く見えるだけなんです
もっともなんですが・・・


※White(#FFFFFF)、Gray(#808080)、 Black(#000000) の、ように色名でも指定できます
※大文字小文字の区別はありません #FFFFFFでも#ffffffでも#FFffFF、 全部白です



また3桁で表現する場合もあります
各色とも2桁ずつの数値が同じ場合は各色1桁の3桁でもかまいません
#ffffff→#fff、#ff00ff→#f0f、#112233→#123
#f0ffff、#f0f0f0 ←これらは3桁には出来ません


そしてこの3桁で表現できる色のうちの216色のことを

OSやコンピュータが違っても色が必ず表示できることが保証された色・・・
その216色のことをWebセーフカラーといいます




Webセーフカラー
#000000 #003300 #006600 #009900 #00cc00 #00ff00
#000033 #003333 #006633 #009933 #00cc33 #00ff33
#000066 #003366 #006666 #009966 #00cc66 #00ff66
#000099 #003399 #006699 #009999 #00cc99 #00ff99
#0000cc #0033cc #0066cc #0099cc #00cccc #00ffcc
#0000ff #0033ff #0066ff #0099ff #00ccff #00ffff
#330000 #333300 #336600 #339900 #33cc00 #33ff00
#330033 #333333 #336633 #339933 #33cc33 #33ff33
#330066 #333366 #336666 #339966 #33cc66 #33ff66
#330099 #333399 #336699 #339999 #33cc99 #33ff99
#3300cc #3333cc #3366cc #3399cc #33cccc #33ffcc
#3300ff #3333ff #3366ff #3399ff #33ccff #33ffff
#660000 #663300 #666600 #669900 #66cc00 #66ff00
#660033 #663333 #666633 #669933 #66cc33 #66ffcc
#660066 #663366 #666666 #669966 #66cc66 #66ff66
#660099 #663399 #666699 #669999 #66cc99 #66ff99
#6600cc #6633cc #6666cc #6699cc #66cccc #66ffcc
#6600ff #6633ff #6666ff #6699ff #66ccff #66ffff
#990000 #993300 #996699 #999900 #99cc00 #99ff00
#990033 #993333 #996633 #999933 #99cc33 #99ff33
#990066 #993366 #996666 #999966 #99cc66 #99ff66
#990099 #993399 #996699 #999999 #99cc99 #99ff99
#9900cc #9933cc #9966cc #9999cc #99cccc #99ffcc
#9900ff #9933ff #9966ff #9999ff #99ccff #99ffff
#cc0000 #cc3300 #cc6600 #cc9900 #cccc00 #ccff00
#cc0033 #cc3333 #cc6633 #cc9933 #cccc33 #ccff33
#cc0066 #cc3366 #cc6666 #cc9966 #cccc66 #ccff66
#cc0099 #cc3399 #cc6699 #cc9999 #cccc99 #ccff99
#cc00cc #cc33cc #cc66cc #cc99cc #cccccc #ccffcc
#cc00ff #cc33ff #cc66ff #cc99ff #ccccff #ccffff
#ff0000 #ff3300 #ff6600 #ff9900 #ffcc00 #ffff00
#ff0033 #ff3333 #ff6633 #ff9933 #ffcc33 #ffff33
#ff0066 #ff3366 #ff6666 #ff9966 #ffcc66 #ffff66
#ff0099 #ff3399 #ff6699 #ff9999 #ffcc99 #ffff99
#ff00cc #ff33cc #ff66cc #ff99cc #ffcccc #ffffcc
#ff00ff #ff33ff #ff66ff #ff99ff #ffccff #ffffff

CSS サイドバーのPR  これはOKかな・・・?

PRのマウスがのったときの文字色を変えたいって質問が・・・・

コメントで答えたのですが・・・・

その後、いろいろ見てみると・・・・

どれも赤じゃないですか・・・・・


ふだんさわりもしないからまったく気がつきませんでした・・・・

たまにはさわってやれよ~ ←天の声

たまにはクリックしてくれよ~ ←アメーバの声



普段の文字色はさすがにスキンには合わせた文字色を使っているようですが

それでも何とかならないの?みたいな文字色も・・・


おまけにマウスがのったときの灰色のバック・・・・

なんとかしてよ~




別に消すわけじゃないからいいですよね・・・・・たぶん



CSSの最後に・・・・・



/*サイドバーPR*/

#defaultAd #attentionBox a{
color:#cccccc;/*文字色*/
}

#defaultAd #attentionBox a:hover{/*マウスがのったとき*/
color:#cccccc;/*文字色*/
background-color: transparent;/*背景を消す*/
}



背景の色と合わない場合・・・ コッチも何とかしちゃぉ~





#defaultAd{
background-color:#555555;/*背景色*/
}





※これはあくまでPRの文字色がスキンに合わない場合の対処法です




クリックしていただけるとうれしいな

CSS ブログの上・・・アイコンをかえま~ス

2009.10.21アメブロにより変更されました

ブログの上が変りました

ブログの上をスキンに合わせます&検索ボタン





リク記事です・・・


以前にチェックリストのアイコンの変え方 はやったんですが

他のも変えたいというリクが・・・






画像を用意してからCSSの最後に


/*オススメ*/
li#barPr a{
background-image:url(画像のURL);
}

/*虫眼鏡*/
li#barSearch {
background-image:url(画像のURL);
}

/*検索ぼたん*/
li#barSearch .barButton{
background-image:url(画像のURL);
}



↓私が作ったんでお持帰りは自由です





左上の Amebaトップへ の変え方は・・・・



クリックしていただけるとうれしいな