上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 色指定。スタイルシートを使う上で、必ず必要な知識です。
 今回は一番スタンダードな「RGBカラー」の研究です。
 指定するときは必ず、

#012345


 と言うふうに、「#」+「6桁の数字」で書きます。

「数字」は、0~9の10種類ではなく、「0~9」+「a,b,c,d,e,f」の16種類があります。

0 1 2 3 4 5 6 7 8 9 a b c d e f
小さい値 ⇔ 大きい値


 色味の内訳は…
000000
  ↓
赤の強度 緑の強度 青の強度

 となっています。
 これらの色を、2桁の数値を3こ組み合わせた、6桁の数値で表現します。
 赤、緑、青の強度を組み合わせることにより、様々な色味を出すことができます。

 以下に基本色を示してみましょう。

#ffffff#cccccc#999999#666666#333333#000000
#ffcccc#ff9999#ff6666#ff3333#ff0000
#ffffcc#ffff99#ffff66#ffff33#ffff00
#ccffcc#99ff99#66ff66#33ff33#00ff00
#ccffff#99ffff#66ffff#33ffff#00ffff
#ccccff#9999ff#6666ff#3333ff#0000ff
#ffccff#ff99ff#ff66ff#ff33ff#ff00ff

#ffcccc#cccccc#99cccc#66cccc#33cccc#00cccc
#ff9999#cc9999#999999#669999#339999#009999
#ff6666#cc6666#996666#666666#336666#006666
#ff3333#cc3333#993333#663333#333333#003333
#ff0000#cc0000#990000#660000#330000#000000
#ff3300#cc3300#993300#663300#333300#003300
#ff6633#cc6633#996633#666633#336633#006633
#ff9966#cc9966#999966#669966#339966#009966
#ffcc99#cccc99#99cc99#66cc99#33cc99#00cc99
*まだまだ他にも、たくさん色は出ます。

*「#f98」など、三桁で表されている場合があります。この場合は「#ff9988」の略です。


実際に表示確認してみる(編集可)



■カラーピッカーを使ってみる。





■次のステップに進むには、コチラから。
次のステップの前に(スタイルシートってなに?)

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Thu.03.18.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。