htmlタグ 文字の色を変える方法
htmlタグ 文字の色を変える方法について。
こんにちは、ぜんです。
文字の色を変える方法に
ついてお伝えします。
文字の色を変える方法
文字の色を変えるには
大きく分けて２つの方法があります。
下記の黄色の部分をいろいろ変えてみてください。
１ <font color="色番号もしくは色名称">色を変える文字</font>
２ <span style="color:色番号もしくは色名称">色を変える文字</span>
例
色名称で変えてみます。
１ 赤色 <font color="red">色を変える文字</font>
色を変える文字
色番号で変えてみます。
２ 青色 <span style="color:#0000ff">色を変える文字</span>
色を変える文字
htmlでは１６の基本的な色を次のように定義しています。
| 色名称 | 色番号 | 色 |
| 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などの無料のツールやソフトで色番号を取得できます。
色の使い方
文字の色を変える方法がわかったなら
あとは実際に使ってみて
見栄えが良くなるようにしていきましょう。
基本的な色の使い方
基本的な使い方としましては
あまりたくさんの色を使いすぎないということです。
いろんな色があり過ぎると訪問者さんの目も疲れますし
どの色を見ていいのかわからなくなります。
一般的に
文字は黒
リンクには青
強調したいところは赤
がいいと思います。
緑色の文字も比較的見やすいので
赤文字と違ったニュアンスを表現したいならば
使ってみてもいいかもしれません。
他には栗色も赤の変わりに見やすいかと思いますね。
見やすくする使い方
１ 赤文字は普通に使うより
<b>や<strong>などの強調タグを使うとくっきりして見やすいです。
そのまま普通の赤
<b><span style="color:red;">強調した赤色</span></b>
強調した赤色
２ 背景色を黄色にするのも効果的です。
背景色を黄色にする
文字色のタグの前に
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>
大事なところは
こんなふうに背景色を黄色にすると目立ちます。
ただ私、個人的には
これもあまり使い過ぎたり
あまり大き過ぎたりしない方がいいかと思います。
この記事では説明するために
多めに使っていますが
やはり黄色は刺激が強いので
大事なところにポイントを絞って使っていきましょう。
デカ過ぎ
このように
色だけですでに強調しているのに
大きさでさらに強調すると圧が強くなるので
あまり文字サイズは大きくしない方が
良いように私は思います。
こんな感じで実際に使ってみて
訪問者さんが見やすい色の使い方を
いろいろ考えてみてください。
本日もご訪問ありがとうございました～。
