七鍵＠楽天

第２回に引き続き、第３回もまた文字を変えてみます。
どんな文章を書くにしても、同じ文字の色ばかりではつまらないことないですか？
例えばこのページがいい例ですよね（笑
デザインって言ってしまえばそれまでですが、
文字が一色に統一されているとなんかかたくるしい感じします。
ってなわけで今回は文字の色の変え方を勉強しましょー。

ただ本来なら、ＨＰ作りをはじめるときに真っ先につまずくのが色の指定だと思います。
指定の仕方が文字と数字と記号で確かに難しいものなのですが・・・
心配ご無用です(￣^￣*)
簡単に色の指定が分かる教材を用意しました。

ここをクリック！！

これを使えば多分つまづくこともないでしょう。
適当に遊んでみて下さい。
赤と青と緑のつまみがあって、それを動かしたら背景の色が変わりますよね(〃⌒▽⌒)

背景と一緒に右の方にある四角の枠内の文字も変わってることに気がつきましたか？
「#02f811」のように「#」が頭についている７桁の文字のことなんですが、
なんとこれが色を表す記号となっているのです。
とっても簡単でしょ(〃⌒▽⌒)

メモリを動かして好きな色を作ったら右上の四角の枠を見る！

たったそれだけであなたの好きな色を表す記号が完成するのですから（笑

さて、色を表す記号が完成したところで、実際に文字の色を変えてみましょう。
復習ですが、文字の大きさを変えるときは

<font size="5">ここのサイズが変わる</font>

でしたよね。
実は色も同じ「<font>タグ」を使います。
記述方法は見てのとおり

<font color="#ff0000">ここの色が変わる</font>

となっています。
もちろん「color=""」にさっき作った頭に「#」がついている７桁の文字を指定するのです。
簡単でしょ(〃⌒▽⌒)

更に理解を深めるために、下の例を見て下さい。

例）

<font color="#ff0000">テスト</font>
<font color="#ff00ff">テスト</font>
<font color="#ffff00">テスト</font>
<font color="#0000ff">テスト</font>
<font color="#00ffff">テスト</font>
<font color="#ffffff">テスト</font>
<font color="#000000">テスト</font>

表示結果）

テスト
テスト
テスト
テスト
テスト
テスト
テスト

記述の仕方はぜんぜん難しくないですよね。

さて、ここで終わりではありません。
一つだけ応用サンプルを載せておきましょう！

例）
<font color="#ff0000" size="6">応用例</font>

表示結果）
応用例

もちろん組み合わせることもできるってサンプルでした(〃⌒▽⌒)

今日は少し長かったですが色の指定方法は分かりましたか？
指定する色を表す記号を作るのが少し難しいですが、指定自体は簡単ですよね。
わかりづらいことなどもしありましたら、気軽に相談くださいね。

明日の予定は「文字のスタイルをいろいろ変えてみよう」っぽいのを考えています。
またぜひ来てくださいねー(ﾟ▽^*)ﾉ⌒☆