プログ

’14修了無内定理系院卒の活動雑記||プー太郎ログ||プログラミング雑記

<a>タグの文字色の空指定

昨日サーバを借りたので整地しています.デザインはセンスが問われるので悩ましいけど,今後新しいこと(JavaScriptRubyWordpress等)学んだらその都度反映させたくなるから今はとりあえずハリボテみたいな形で公開したほうがいいのかな.
続きはタイトルにも書いた文字色に関する備忘録,html.

ある部分(単語だったり)の文字色を変更したいときは

1. <font color="red">~~~</font>
2. <span style="color:red">~~~</span>
3. <span class="Red">~~~</span>

の3通りで,3については参照するcss内で

  .Red{ color:red; }

と定義しておく(class名は任意).後者2つはやっていることが同じでやり方が違うだけ.redについては1の場合は#FF0000と書いても良く,2,3の場合はそれに加え#F00,rgb(255,0,0),rgb(100%,0%,0%)といった記述も使える.spanは他のタグがないときに仮に呼んでいるだけだから,divなりpなりでもOK.
ではこの3つでどれが良いかというと,HTML/CSSのポリシーから言うとhtml側で例外的な装飾をするのはあまり好ましくないので,css使わない時以外は1の方法は避けた方が良さそう.同じ理由で2も避けた方が良いだろうけど,1回の変更のためにclassを定義するのも微妙.繰り返し出てくる色なら3の方法にしておくと後から変えたいときにまとめて変えられるし,html内に書く量も抑えられる.
ここまでは良いんだけど,今気になってるのがタイトルにも挙げたaタグ.aタグはリンクになるからそれを示すように色変更+下線が勝手にされてしまう.CSS

a:link, a:visited, a:hover, a:active {
  color:red;
}

の様に指定すれば変更することはできるが,これはすべて同じ色にするので,「タイトルは淡色,本文は濃色」の様に部分ごとに文字色を変更している場合にも同じ色になりどちらかが見難くなってしまう.aタグの内側に色指定を挟むのはhtml記述が汚くなるし,hoverやactiveで色を変化させることもできなくなってしまう.「color:none;」あるいは「color:default;」みたいな感じで文字色の空指定して,元々持っている色指定が消せれば良いんだけどそれらしいものが見当たらず結局以下のようにした.

a:link, a:visited { color:black; }
a:hover, a:active { color:magenta; }
a.inv:link, a.inv:visited { color:white; }
a.inv:hover, a.inv:active { color:gold; }

文字色が2種類ならこれで問題無いけれど,空指定できるならそっちの方がスマートにできると思うので,知ってる方居たらコメントいただけると幸いです.
ところで<a>タグってanchorのaみたいだけどもう少しちゃんと付けられなかったのかな.適当に名前つけた奴が残っちゃって今更変えるに変えられないみたいな印象を凄く受ける...