フォント・サイズ及びフォント・カラーについて(2)〜
フォント・カラーについて
†
さて、<font color>(フォント・カラー)について。
<font color>(フォント・カラー)は、一般にはテキスト(=文字)の「色」を
指定する際に用いられるタグです。
htmlにおける装飾的なタグの用い方に対してスタイルシートを…という、
最近の動向は「フォント・サイズ」の頁でもチラッと触れた通りですが、
やはりここではあくまでも「htmlタグ」使用の場合のみについて書いてゆきます。
さて、文中に<font color>(フォント・カラー)を用いて文字の色を指定する、或いは
その周囲の文字色に対して部分的に色を変えてみる、そのやり方ですが
やはり基本は簡単です。
色を指定したい文字の前後を<font color="">及び</font>で挟めば良いだけです。
<font color="">の、""の間には「#」の後に6桁の「0」〜「9」までの数字、もしくは
「a」〜「f」までの英字を入れて下さい。
「6桁の」とは、<font color="#rrggbb">という並びになっていて、それぞれ
“r”(1〜2桁目)=“red(赤)”
“g”(3〜4桁目)=“green(緑)”
“b”(5〜6桁目)=“blue(青)”
となっています。即ち、これらはいわゆる「光の三原色」と呼ばれるもので、
(通常、PCの画面上の「色」を我々は「色」と認識していますが、原理的には
機械の仕組によって発される「光」である訳で、画面上の「色」を構成する原色が
「色の三原色」でなく「光の三原色」であるのも道理、なのです)
これらの値(=色指定値)の組合せによって、様々な「色」を作り出す訳です。
また、これらの桁のうち奇数桁(1、3、5桁目)がそれぞれ(r、g、bの)大まかな値を、
偶数桁(2、4、6桁目)は奇数桁で指定した値の微調整の様な働きなので、
例えば「赤」を強調したい時には<font color="#ff0000">〜(テキスト)〜</font>、
<font color="#e00000">〜(テキスト)〜</font>等の様に
1桁目の値を大きく指定して下さい。
奇数桁を例えば「0」「1」等の少ない値に指定してしまうと、偶数桁を
如何に大きな値に指定しても、奇数桁で指定した範囲内でしか微調整出来ないので
御留意下さい。
色の段階は、こんな風になります。
"00"<"01"<"02"<"03"〜…〜"09"<"0a"<"0b"〜…〜"0f"<"10"<"11"〜…〜"9f"<"a0"<"a1"〜…
…〜"af"<"b0"<"b1"〜……〜"ff"
値が大きければ大きい程、その原色が強調されますが、「光の三原色」の法則に従い
<font color="#rrggbb">の最大値<font color="#ffffff">は、「白」になります。
また、その逆に最小値<font color="#000000">は「黒」になります。
中間色の、例えば「紫」を作りたい時には、「赤」と「青」を強調し、「緑」を控え目にしますが
WEB上の特性からか、或いは「色」(光)そのものの本来の性質かはわかりませんが
三原色の中でも「赤」は特に強い様なので、「赤」と「青」を同値にした場合には
赤みが強く出る傾向にあります。
(フォント・カラーで指定する「紫」(purple)は、<font color="#800080">となっていますが
これは実際には日常イメージする「紫」という色よりも赤みの強い、「小豆色」(?)の様な
印象の色味になります)↓
<font color="#800080">「紫」(purple)この色です</font>→「紫」(purple)この色です
文中で使用する文字の「色」というのは、それを書く人の好みで様々なので
無限とは言えないまでも6桁の色指定値の組合せにより千差万別な「色」の見本を
ここに全て挙げる訳には行きませんが、その中でも「標準」と呼ばれる「色」が、
16色あります(注:あくまでもWindowsのVGAパレットに依る)
それらの中には明るい色(例えば「白(#ffffff)」)もあれば、
暗い色(例えば「黒(#000000)」)もあるので、なるべく偏りなく見易い様に
下に白背景及び黒背景で「見本」として載せておきます。
(注:当然ながら、白背景の場合には「白」で指定した文字は見えず、
黒背景の場合には「黒」で指定した文字は見えません。
また、白背景の場合には「白」に近い明るい色は見づらく、
黒背景の場合には「黒」に近い暗い色は見づらくなります。
予め、御諒承下さい。
御自身で文字色を指定される場合には、背景色も考慮して、
明るい背景色なら暗い文字色を、暗い背景色なら明るい文字色を指定するなど
閲覧される方に見易い配慮を心がけることも大切ではあります)
| black(黒):<font color="#000000">この色です</font>→ この色です |
| gray(灰色):<font color="#808080">この色です</font>→ この色です |
| silver(銀色):<font color="#c0c0c0">この色です</font>→ この色です |
| white:<font color="#ffffff">この色です</font>→ この色です |
| blue(青):<font color="#0000ff">この色です</font>→ この色です |
| navy(紺色?):<font color="#000080">この色です</font>→ この色です |
| teal(青緑?):<font color="#008080">この色です</font>→ この色です |
| green(緑):<font color="#008000">この色です</font>→ この色です |
| aqua(水色?):<font color="#00ffff">この色です</font>→ この色です |
| lime(黄緑?):<font color="#00ff00">この色です</font>→ この色です |
| yellow(黄色):<font color="#ffff00">この色です</font>→ この色です |
| fuchsia もしくは magenta(濃いピンク):<font color="#ff00ff">この色です</font>→ この色です |
| olive(オリーブ):<font color="#808000">この色です</font>→ この色です |
| purple(紫):<font color="#800080">この色です</font>→ この色です |
| maroon(栗(茶)色?):<font color="#800000">この色です</font>→ この色です |
| red(赤):<font color="#ff0000">この色です</font>→ この色です |
| black(黒):<font color="#000000">この色です</font>→ この色です |
| gray(灰色):<font color="#808080">この色です</font>→ この色です |
| silver(銀色):<font color="#c0c0c0">この色です</font>→ この色です |
| white:<font color="#ffffff">この色です</font>→ この色です |
| blue(青):<font color="#0000ff">この色です</font>→ この色です |
| navy(紺色?):<font color="#000080">この色です</font>→ この色です |
| teal(青緑?):<font color="#008080">この色です</font>→ この色です |
| green(緑):<font color="#008000">この色です</font>→ この色です |
| aqua(水色?):<font color="#00ffff">この色です</font>→ この色です |
| lime(黄緑?):<font color="#00ff00">この色です</font>→ この色です |
| yellow(黄色):<font color="#ffff00">この色です</font>→ この色です |
| fuchsia もしくは magenta(濃いピンク):<font color="#ff00ff">この色です</font>→ この色です |
| olive(オリーブ):<font color="#808000">この色です</font>→ この色です |
| purple(紫):<font color="#800080">この色です</font>→ この色です |
| maroon(栗(茶)色?):<font color="#800000">この色です</font>→ この色です |
| red(赤):<font color="#ff0000">この色です</font>→ この色です |
「フォント・カラー」で色を指定するやり方に、上記の"#rrggbb"という6桁の色指定値の代りに
「色名」で指定する方法もあります。
但し、その方法では、予めWEBで予約された限られた色名しか使用出来ず、またブラウザ等の
環境によって対応していない場合も考えられますので、余りお奨め出来ません。
例としては、上に挙げた標準の16色は、その欄に記した色名(black、whiteなど)を
6桁の色指定値の代りに入力することでその色を指定することが出来ます。
|
<font color="white">こうなります</font>→こうなります <font color="purple">こうなります</font>→こうなります <font color="lime">こうなります</font>→こうなります |
上記の標準16色以外にも、色名によって指定出来る色(但し環境に左右される)があり、
それらは、例えば翔泳社刊の「HTMLタグ辞典」等にも掲載されています。
決して安いものではありませんが、御興味がおありでしたら、そうした辞典を入手して
御覧になってみるのも良いと思います。
フォント(font)ばかりでなく、その他の様々なタグを学ぶことも出来ます。
フォント・サイズ、及びフォント・カラーについて、2頁にわたり稚拙ながら説明を試みましたが
少しは御覧になった貴方のお役に立てたでしょうか?
フォント・サイズの頁でも触れましたが、こうしたタグを使いこなす最短・最上の道は
何よりも貴方御自身でまずは使ってみて、試行錯誤を繰返すことです。
諺に曰く、「習うより慣れろ」ですね(笑)
文章が読み難いと思われる点も多々あり、お詫び申し上げます。
<font size>(フォント・サイズ)について
「趣味の部屋」メニューに戻る