文字の色を変える方法

こんにちは。

 

ぜんです。

 

今日はですね、

文字の色を変える方法について

お伝えします。

 

 

では今日もいってみましょう。

 

 

 

文字の色を変える方法

 

 

文字の色を変えるには

下記の黄色の部分をいろいろ変えてみてください。

 

1 <font color="色番号もしくは色名称">色を変える文字</font>

 

2 <span style="color:色番号もしくは色名称">色を変える文字</span>

 

 

1,2の形式があります。

 

 

色名称で変えてみます。

 

1 赤色 <font color="red">色を変える文字</font>          

 

色を変える文字

 

色番号で変えてみます。

 

2 青色 <span style="color:#0000ff">色を変える文字</span>  

 

色を変える文字

 

 

htmlでは16の基本的な色を次のように定義しています。

 

 

色名称 色番号
white #ffffff white #ffffff
silver #c0c0c0 silver #c0c0c0
gray #808080 gray #808080
black #000000 black #000000
red #ff0000 red #ff0000
maroon #800000 maroon #800000
yellow #ffff00 yellow #ffff00
olive 808000 olive 808000
lime #00ff00 lime #00ff00
green #008000 green #008000
aqua #00ffff aqua #00ffff
teal #008080 teal #008080
blue #0000ff
blue #0000ff
navy #000080 navy #000080
fuchsia #ff00ff fuchsia #ff00ff
purple #800080 purple #800080

 

 

このような代表的な色は英語もしくは#色番号で表すことができます。

他の色はGIMPなどの無料のツールやソフトで色番号を取得できます。

 

 

色の使い方

 

文字の色を変える方法がわかったなら

あとは実際に使ってみて

見栄えが良くなるようにしていきましょう。

 

 

基本的な使い方

 

基本的な使い方としましては

あまりたくさんの色を使いすぎないということです。

いろんな色があり過ぎると訪問者さんの目も疲れますし

どの色を見ていいのかわからなくなります。

 

 

 

一般的に

 

文字は黒

リンクには青

強調したいところは赤

 

がいいと思います。

 

 

緑色の文字も比較的見やすいので

赤文字と違ったニュアンスを表現したいならば

使ってみてもいいかもしれません。

 

 

見やすくする使い方

 

1  赤文字は普通に使うより

   

<b>や<strong>などの強調タグを使うとくっきりして見やすいです。


そのまま普通の赤

 

<b><span style="color:red;">強調した赤色</span></b>

 

強調した赤色


 

 

2  また背景色を黄色にするのも効果的です。

 

背景色を黄色にする

 

文字色のタグの前に 

background-color:色番号を入れると背景色を変えることができます。

 

 

<span style="background-color: #ffff00"><span style="color: #000000">背景色を黄色にする</span></span>

 

 

 

背景色を黄色にする


強調タグは背景色のタグの前につけます。

<strong><span style="background-color: #ffff00"><span style="color: #ff0000">背景色を黄色にする</span></span></strong>

 

 

大事なところは

こんなふうに背景色を黄色にすると目立ちます。

 

 

 

ただ私個人的には

これもあまり使い過ぎたり

あまり大き過ぎたりしない方がいいかと思います。

 

この記事では説明するために

多めに使っていますが

 

やはり黄色は刺激が強いので

大事なところにポイントを絞って使っていきましょう。

 

 

 

デカ過ぎ

 

 

 

このように

 

色だけですでに強調しているのに

大きさでさらに強調すると圧が強くなるので

 

あまり文字サイズは大きくしない方が

良いように私は思います。

 

 

 

こんな感じで実際に使ってみて

訪問者さんが見やすい色の使い方を

いろいろ考えてみてください。

 

 

 

 

本日もご訪問ありがとうございました~。

タグ


2012年2月4日 | コメント/トラックバック(10)|

カテゴリー:html タグ

このページの先頭へ