|
★ フォントカラー
font要素＋color属性 （カラー16進数 or セーフカラー）
但し、HTML定義「HTML4.01 Transitional」では、フォント要素・属性は、非推奨。
ブロックレベル要素の中に、FONT要素とその属性値を書き加えると、初期設定のフォントスタイルを変更することができます。
要素（タグ）に追加した属性の値は、二重引用符（ダブルクォーテーションマーク" "）で括ります。
▼
例えばフォントカラーを変更する
[初期設定値のカラーコード #3F3F3F を #00CC00 へ変更]
▼
未知の苦HTML解道 ・・・ >>
未知の苦HTML解道
□ソース表示
<p>未知の苦html解道</p>
▼
<p><font size="4" color="#00CC00">
未知の苦HTML解道
</font></p>
テキストの書体は、FONT要素に「フォントの名前（種類）、サイズ、色」の属性値を書き加え、記述します。
（フォントの太さ指定は、別項の"フォントスタイル"参照）
■font face・・・fase属性 >> フォントの名前（種類）
■font size・・・size属性 >> フォントサイズ
■font color・・・color属性 >> フォントの色
■font weight・・・weight属性 >> フォントの太さ指定
▼
HTML定義「HTML4.01 Transitional」では、font要素（face、size、color）の記述は、非推奨要素・属性のため、スタイルシートの設定を推奨しています。
▼
◆スタイルシートの呼び出し
サイトページが増えたときなどには、余程のことがない限り、フォントの指定は、常に同じ記述を繰り返すことになります。
反復する基幹部を一度スタイルシートに設定しておけば、その設定を呼び出すことで、新規HTML文書の"BODY"全体に反映させることができます。
また、部分的にフォントカラーを変えたいときなども同様に、スタイルシートに設定し、そのclass属性やid属性を呼び出すことにより、記述の手間が軽減できます。
◆タグ要素に、スタイルシートを直接記述 （例：フォントカラー）
スタイルシートを認識させる[syle属性]に[color属性]と値をインラインスタイルで直接記述します。
フォントカラーに関するスタイルシ−トの代替記述は、次のようになります。
※注：要素名と属性の間に半角スペース必須
|←←←←←←←←←← 要 素 →→→→→→→→→→→|
↓親要素 ・・・例えばspan ↓要素内容
<span style="color : フォントカラー名 ;">未知の苦</span>
|←←←←←←属 性→→→→→→|
|←←←←← 値 →→→→→|
▼
本章冒頭の作例（ブロックレベル要素のp要素を使用）は、代替記述により、次のようになります。
未知の苦HTML解道
◇代替記述前のソース表示
<p><font size="4" color="#00CC00">
未知の苦HTML解道
</font></p>
▼
未知の苦HTML解道
◇代替記述後のソース表示
<p><span style="font-size : 19px ; color : #00CC00 ;">
未知の苦html解道</span></p>
参考 >> ブロックレベル要素 p要素
▼
◆フォントの色を指定する方法 例："赤"の場合
★RGB256階調10進数表記 rgb（RRR GGG BBB形式）
>> rgb(255,000,000)
★RGB256階調16進数表記 （#RRGGBB形式） >> #FF0000
★カラーネーム指定 red >> red
▼
◇フォントの10進数、16進数について
例えば赤のカラーコード"#FF0000"の場合、"256階調16進数"では、"#FF0000"のゾロ目を一つずつにし、"#F00"にすると、16階調（16の三乗）で4096色の指定になるそうですが結果は同じです。
当サイトは、"RGB256階調16進数表記（"# ＋ カラー16進数6桁" ）の[RGB値カラーコード]を使用しております。
カラーコードの先頭には必ず「＃」を付けます。
| |←←←←←←←←カラーコード→→→→→→→→| |
| ↓必須 |
↓RR（赤） |
|
↓GG（緑） |
|
↓BB（青） |
|
#
#
#
#
#
# |
RR=00
RR=33
RR=66
RR=99
RR=CC
RR=FF |
× |
GG=00
GG=33
GG=66
GG=99
GG=CC
GG=FF |
× |
BB=00
BB=33
BB=66
BB=99
BB=CC
BB=FF |
＝216色 |
▼
◆ WEB SAFEカラー☆216色☆）
・・・Windows Mac どちらでもほぼ同じ表示
■WEB SAFEカラー（216色）一覧 #000000（黒）〜#FFFFFF（白） |
| RR=00のカラーチャート（36色） |
| #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 |
| RR=33のカラーチャート（36色） |
| #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 |
| RR=66のカラーチャート（36色） |
| #660000 |
#663300 |
#666600 |
#669900 |
#66CC00 |
#66FF00 |
| #660033 |
#663333 |
#666633 |
#669933 |
#66CC33 |
#66FF33 |
| #660066 |
#663366 |
#666666 |
#669966 |
#66CC66 |
#66FF66 |
| #660099 |
#663399 |
#666699 |
#669999 |
#66CC99 |
#66FF99 |
| #6600CC |
#6633CC |
#6666CC |
#6699CC |
#66CCCC |
#66FFCC |
| #6600FF |
#6633FF |
#6666FF |
#6699FF |
#66CCFF |
#66FFFF |
| RR=99のカラーチャート（36色） |
| #990000 |
#993300 |
#996600 |
#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 |
| RR=CCのカラーチャート（36色） |
| #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 |
| RR=FFのカラーチャート（36色） |
| #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 |
|
■カラーネーム指定が可能な16色
（16色中、WEB SAFEカラーと重複が*8色） |
*black
#000000 |
*blue
#0000FF |
*aqua
#00FFFF |
*lime
#00FF00 |
*red
#FF0000 |
*fuchsia
#FF00FF |
*yellow
#FFFF00 |
*white
#FFFFFF |
gray
#808080 |
olive
#808000 |
purple
#800080 |
maroon
#800000 |
silver
#C0C0C0 |
teal
#008080 |
green
#008000 |
navy
#000080 |
|
▼
基準とされる色指定の色数は、WEB SAFEカラー'216色'とカラーネーム（16色−8色＝8色）です。
カラーネームの基準は、16色とされていますが、16色以外にも
gold
pink
ivory
cyan
violet
orange
brown
beige
skyblue
それから light系云々 dark系云々・・・。
等々のカラーネームが思い浮かびます。
他にも沢山のカラーネームが存在し、ブラウザも対応しているようですが例えば・・・
goldを指定 金色 に見えますか？
#ffd700を指定 金色 に見えますか？
思い通りの色再現が得られないこともあり、利用に際しての最終判断は、ご自身でと言ったところでしょうか。
|
