モックン☆彡の部屋

モックン☆彡の部屋

文字に色をつける(高)

文字に色をつける(高)


今回使う タグ
< FONT color="" ></ FONT >


文字に をつけるには < FONT color="" ></ FONT > というタグを使います。

FONT 』は概ね文字について装飾をするという宣言で、

通常どのように装飾するかを半角スペースを置き、『 FONT 』の後ろに書きます。

例えば、大きさを変えるには『 < FONT size="" ></ FONT > 』、

文字の種類を変えるには『 < FONT face="" ></ FONT > 』などと使いますが、

今回は文字に をつけるので『 color="" 』を使います。

では、 を指定するにはどうしたらよいのでしょうか?

実は を指定する主流な方法は2つあります。

1. 英語で を指定する

2. 16進数で を指定する

では、それぞれについて説明していきましょう!


1. 英語で を指定する

color="" 』には直接 を指定して英語で書きます。

簡単な英語を書くと、『 red 』、『 white 』、『 blue 』、『 green 』、『 pink 』、『 yellow 』かな?

ちなみに、黒(black)もありますがこの はここの背景で見えなくなってしまいます。

背景の に同化し、文字が読みづらくならないないように注意をして をつけましょう。


《例題1》
『今日は とても 良い天気だ。』

この文章の様に『とても』を赤い にするのには、赤を使うので『 red 』の英語を使います。

するとタグは『 < FONT color=" red " ></ FONT > 』となるので、

をつけるためには『 < FONT color=" red " > 』と『 </ FONT > 』で『とても』を挟みます。

よって、『今日は < FONT color=" red " > とても </ FONT > 良い天気だ。』と書き、

結果は『今日は とても 良い天気だ。』と表示されます。


どんな英語でどんな がでるの?と思うかも知れませんが 上記のページを参考にして下さい。(それぞれ別ページで開きます)


2. 16進数で を指定する

16進数 って何?と言われそうだけど、 10進数 って知ってる?

数を数える時に、い~ち、にぃ~、すぅわ~ん、・・・、じゅ~、じゅ~いち・・・と

数えると思うけど、この数え方は 10進数 なのです。

コンピューターの世界ではチョット違っていて、0(零)から数えていきます。

0~9までは数が10個あり、次に数えるときに位が1繰り上がるので 10進数 と言います。

16進数 は0~9の後にアルファベットの『A』、『B』、『C』、『D』、『E』、『F』まで

合計16数えて位が1つ上がります。

以上の事から、下の表を見てもらうと分かりやすいと思います。


《例題2》
10進数 0 1 2 3 ・・・ 9 10 11 12 13 14 15 16 17 ・・・
16進数 0 1 2 3 ・・・ 9 A B C D E F 10 11 ・・・
2進数 0 1 10 11 ・・・ 1000 1001 1010 1011 1100 1110 1111 10000 10001 ・・・

参考に 2進数 も入れましたが、1の次に位が上がるためドンドン桁数が大きくなりますね(笑)

実はコンピューターの演算方法は 2進数 で行っていて、

表示する時は、私たちがわかるように 10進数 へ変換しています。

2進数 は0と1しかないから、電気のON・OFFみたいに単純な構造なので、

コンピューターの世界に適した形なのです。

小さい数字だったら数えれば簡単だけど、10000や100000は 16進数 2進数

どうやって表すのか疑問に思うかもしれませんが、話があまりにも脱線し過ぎてしまうため、

興味ある人は調べてみるかメールを下さい。


さて、話を元にもどして 16進数 をつけるには 6桁 の数字で書きます。

前述したとおり、英語でも指定できるために 16進数 で書く場合には

最初に『 # 』をつけてから 6桁 の数字を書きます。

6桁 の数字は『 000000 』(白)から『 FFFFFF 』(黒)まで1600万通り以上あり、

6桁 の中でも意味合い的には 2桁 ずつ分かれています。

左2桁 から順に『 』、『 』、『 』と役割分担をされており、

それぞれの が混ざり合ってできていると考えて下さい。

つまり、青を濃くするには一番 右2桁 の数値を大きくするなど・・・

基本的な色について 』のページで少し詳しく書いていますので、良かったら見て下さい。


《例題3》
『今日は とても 良い天気だ。』

この文章の様に『とても』を赤い にするのには、赤を使うので

FF0000 』の 16進数 を使います。 (他の4桁が0になっている事に注目してください)

すると、『 # 』をつけて『 < FONT color=" #FF0000 " > </ FONT > 』となるので

をつけるためには『 < FONT color=" #FF0000 " > 』と『 </ FONT > 』で『とても』を挟みます。

よって、『今日は < FONT color=" #FF0000 " > とても </ FONT > 良い天気だ。』と書き、

結果は『今日は とても 良い天気だ。』と表示されます。


また、余談ですが文字に をつける方法は他にもあり、

  • # 』に続いて3桁の 16進数 で指定。(#08f は #0088ff と同じ)

  • rgb 関数を用いて 0~255 の10進数を3つ列挙して指定。

    rgb(0,128,0) は#008000と同じ指定になります。

  • rgb 関数を用いて 0%~100% のパーセント値を3つ列挙して指定。

    rgb(0%,50%,0%) は #008000 と同じ指定になります。

などもありますので、興味のある人は色々試してみてはいかがでしょうか。


どんな 16進数 でどんな がでるの?と思うかも知れませんが、
上記のページを参考にしていろいろ数値を変えて遊んでみてください♪











© Rakuten Group, Inc.
X
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: