【文字の色・サイズ変更】

色を変えてみよう

簡単な基本のタグだけでもページは作ることが出来ましたね。
しかし、白い背景に黒い文字。と、これだけではさみしいので、今度は文字の色を変えてみましょう。

ここで登場するのが色を指定するためのタグと、カラーコードです。
色を指定するタグは、以下のようになります。

・文字色を指定するタグ
    text=”カラーコード

 

 

 

 

 

 

 

 

カラーコードとは

「カラーコード」と書いてある部分にカラーコードというものを書きます。

カラーコードとは、先頭に#のついた6桁の数字です。

この6桁は左から2桁ずつ、赤、緑、青の色の強さのことで、
それぞれ00~ffの16進数で表します。

色の強さは、00がいちばん弱く、16がいちばん強くなります。
つまり、 #000000  が真っ黒、 #ffffff  が真っ白になります。

ほかにも、例えば、
#FF0000   が 赤
#0000FF が 青
#00FF00  が ライムグリーン

こんな感じです。数字ばかりでややこしさ満載ですが、大丈夫です。

色の見本を載せておきます。

基本の16色

#000000Black#FFFFFFwhite
#800000maroon#00FFFFaqua
#800080purple#FFFF00yellow
#808000olive#FF00FFfuchsia
#008000green#FF0000red
#008080teal#00FF00lime
#000080navy#0000FFblue
#808080gray#C0C0C0silver

これはHTMLで定義されている基本の16色で、古いブラウザでも解釈してくれる色です。

HTMLソースを書こう

それではいよいよ、タグとカラーコードをHTMLソースの中に組み込んでみましょう。

どこへ、入れるかというと、

<html>

<head>
<title>タイトル</title>
</head>

<body  text=”#000000″>
ページの内容
</body>

</html>

太字の箇所 <body の後に、入れます。

実際にメモ帳に書いて.html拡張子で保存してブラウザで表示させてみましょう。
うまくできましたか。

これで、このページの基本色が指定されました!


この<body></body>間に書いた文字は、

特別な指定がない限り text=”で指定した色になります。

つまり、ここで文字色を 赤 #FF0000 に指定していると、
その<body>内であれば、どこに書いても赤になります。

特別な指定というのは、例えば

「このページの中の、この文章の一部分だけ色を変えたい!」

というときです。↑のような感じです。よくあると思います。

実際に多様することになります。

それでは、やってみましょう。

一部のテキストのみ色を変える

そういった、一部分のみの文字色の変更には
<font >タグを使用します。

これは、文字の色とサイズを指定するタグです。
これを覚えれば、同時に文字サイズの指定も出来るようになります!

このような形で使用します。

 <font  color=”カラーコード” size=”数字”>

使い方はこう

<body></body>間の文章のなかで、色を変えたい文字を

以下のように、<font></font>タグで挟みます。

<font color=”    ” size=”    “>色を変えたい文字</font>

例えば、こんな感じに。

この文の<font color=”#FF0000″ size=”3″>【ここをsize3の赤字に】</font>します

表示させると↓

この文の【ここをsize3の赤字に】します

この文の<font color=”#0000FF” size=”6″>【ここをsize6の青字に】</font>します

表示させると↓

この文の【size6の青字に】します

カラーとサイズだけでもいろんな文字ができます☆

<font color=”#0033CC” size=”6″>あ</font>
<font color=”#00FF33″ size=”2″>い</font>
<font color=”#3333FF” size=”4″>う</font>
<font color=”#44FFFF” size=”7″>え</font>
<font color=”#6688FF” size=”3″>お</font>

表示させると↓





面白いですね!





カラーネーム

実は、これら色の指定はカラーコードではなく、
red、green、whiteといったカラーネームでも出来るのです。

基本の16色のカラーコードの横に書いていた「black」などの
英語がカラーネームです。

タイトルとURLをコピーしました