|
| いまさらHTML,CSS講座トップ > スタイルシート(CSS)講座インデックス > 文字色 ( 前景色 ) |
|
|
 文字色 ( 前景色 )
|
| ■ colorプロパティ |
| colorプロパティで、文字色 ( 前景色 ) を指定する事ができます。 |
値 ( 色の指定方法 )
- 16進数で表すRGB値
- 16進数で表すRGB値の省略型
- カラーネーム
- rgb( )の括弧内に10進数で表すRGB値を記述します。各色の色の段階は 0〜255 の値で表します。
- rgb( )の括弧内に、パーセンテージ( % )で表すRGB値を記述します。各色の色の段階は 0%〜100% の値で表します。
|
|
 ソース head要素内、class指定 |
<style type="text/css">
<!--
.red{ color : #ff0000 ; }
.redred{ color : #f00 ; }
.blue{ color : blue ; }
.green{ color : rgb(0,255,0) ; }
.magenta{ color : rgb(100%,0%,100%) ; }
-->
</style>
|
| ソース body要素内 |
<span class="red">16進数で表すRGB値で赤色を指定しています。</span>
<span class="redred">16進数で表すRGB値の省略型で赤色を指定しています。</span>
<span class="blue">カラーネームで青色を指定しています。</span>
<span class="green">10進数で表すRGB値で緑色を指定しています。</span>
<span class="magenta">パーセンテージで表すRGB値でマゼンタ ( ピンク ) を指定しています。</span>
|
|
 表 示 |
16進数で表すRGB値で赤色を指定しています。
16進数で表すRGB値の省略型で赤色を指定しています。
カラーネームで青色を指定しています。
10進数で表すRGB値で緑色を指定しています。
パーセンテージで表すRGB値でマゼンタ ( ピンク ) を指定しています。
|
| ■ 16進数で表すRGB値 |
|
| ホームページ作成にあたり使用できる色は、赤、緑、青の原色を256階調とし、その組み合わせで256×256×256＝16777216 色が使用できることになっています。 |
| 16進数で表すRGB値とは、赤、緑、青の順に16進数（ 0123456789abcdef ）を各色 2つ 並べ色調を表現する方法です。各色につき16進数が2つありますので、16×16＝256 階調が指定できます。 |
| ■ 16進数で表すRGB値の省略型 |
|
| スタイルシートでは、16進数で表すRGB値は、各色 2桁の値が同じであれば、1桁を省略して表記することができます。 |
例
#ff0000 は、#f00 と同じ 赤色を表示します。 |
|
| ■ カラーネーム |
|
| 16進数で表すRGB値は、パソコンが色を扱う為の表記のため、それを記述する人間にとって英数字の羅列では、色のイメージが困難であったため、各ブラウザが、navy ( RGBでは #000080 )などのように、人間にも色をイメージし易いように カラーネーム ( カラーコードとも言います。 )を独自に実装した機能のひとつです。 |
| カラーネーム一覧 (新規ウィンドウが開きます。) |
| ■ 10進数で表すRGB値 |
|
| R( 赤 )、G( 緑 )、B( 青 )を、各色 0〜255 の範囲の10進数( 0123456789 )で指定し色の段階を表します。また、各色の括弧内の値は、カンマ ( , ) で区切ります。 |
例
color : rgb(255,0,0) は、赤色を表します。 |
| ■ パーセンテージで表すRGB値 |
|
| R( 赤 )、G( 緑 )、B( 青 )を、各色 0%〜100% の範囲のパーセンテージで指定し色の段階を表します。また、各色の括弧内の値は、カンマ ( , ) で区切ります。 |
例
color : rgb(0%,0%,100%) は、青色を表します。 |
|
|
|
|
|
|
|
