TOP ＞ スタイルシート基本知識 ＞ スタイルシートで色の指定をする。
スタイルシートで色の指定をする。
スタイルシートを使ってデザインをコントロールする時、文字色や背景色を指定することもよくあります。HTMLで指定する時と同様、 色の表し方は、キーワードを使う方法とRGBの濃度を数値で指定する方法があります。
キーワードが定義されているのは基本的な16色です。詳しくは以下の表で書かれています。
| 色 | キーワード | 例 |
| 黒 | black | |
| 銀色 | silver | |
| 灰色 | gray | |
| 白 | white | |
| 栗色 | maroon | |
| 赤 | red | |
| 紫 | purple | |
| 明るい紫 | fuchsia | |
| 緑 | green | |
| ライム | lime | |
| オリーブ | olive | |
| 黄色 | yellow | |
| 紺色 | navy | |
| 青 | blue | |
| 青緑 | teal | |
| 水色 | aqua |
キーワードでは16色しか使えませんが、RGBの濃度を指定するやり方であれば、もっと多くの色を使用できます。
このRGBの指定方法も4種類あります。詳しくは以下の表でご覧ください。
| 書き方 | 詳細 |
| #rgb | 赤/緑/青の濃度を0～9とa～fの16進数で指定する |
| #rrggbb | 赤/緑/青の濃度を「00」～「ff」の256段階で指定する。 |
| rgb(r,g,b) | 赤/緑/青の濃度を0～255の256段階で指定する。 |
| rgb(r%,g%,b%) | 赤/緑/青の濃度を0%～100%のパーセントで指定する。 |
"スタイルシートで色の指定をする"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>スタイルシートで色の指定をするサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- .c1{color: black; background-color: silver;} .c2{color: #00f; background: #f00;} .c3{color: #00ff00; background-color: #000080;} .c4{color: rgb(255,0,0); background-color: rgb(255,255,0);} .c5{color: rgb(50%,0%,50%); background-color: rgb(100%,50%,100%);} --> </style> </head> <body> <h1>スタイルシートで色の指定をするには、キーワードで指定する方法とRGBの濃度を指定する方法があります。</h1> <br><br> <div class="c1">文字色をblack、背景色をsilverで指定</div><br> <div class="c2">文字色を#00f、背景色を#f00で指定</div><br> <div class="c3">文字色を#00ff00、背景色を#000080で指定</div><br> <div class="c4">文字色をrgb(128,255,0)、背景色をrgb(0,0,256)で指定</div><br> <div class="c5">文字色をrgb(128,255,0)、背景色をrgb(0,0,256)で指定</div><br> </body> </html> |
[
スタイルシート基本知識 ]
