DOCTYPEを指定したら、CSS(色指定)が一部効かなくなった
最近私用でとあるWebサイトを作っていて遭遇した出来事。
ネットを検索しても解決法が載ってなかったので、ここに備忘として書いておく。
タイトルの通りなんだけど、最初自分が作ったHTMLにはDOCTYPEを全く指定していなかった。
テキストエディタでいきなり書き始めたからなんだけど、そもそもそんなものの存在を忘れていた。
これで昔はSEとしてWEBアプリケーション作っていたんだから恐ろしい。
まあ、職から離れて全くの別領域へ行って、既に4年以上経つのでご勘弁と思う。
この世界の4年は途方も無い時間だ。きっと。
で、DOCTYPEを指定したら、CSSが一部効かなくなった、の本題。
自分の作ったサイトは、Firefox3.5とIE6(使ってないのもあって最近バージョン上げてない)で動作確認をしていたんだけど、最初の発端は、IEでbodyタグに設定した
が全く効かない事だった。(要するにセンタリング)
margin: 0 auto ;
これに関しては、調べてみると、DOCTYPEを指定していないためにIEが「IE5モード」という独自の挙動を示していることが原因らしかった。
詳細は↓
http://hxxk.jp/2008/09/29/0118#sub-20080929-06
それでFirefox含めて、きちんと標準準拠で動くようなDOCTYPEスイッチとして
*エクスクラメーションマーク全角にしてます。
<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
を指定したところ、
については、IEでもきちんと動作するようになった。この辺はありふれた現象の様で、検索すれば解決策はすぐに見つかった。
margin: 0 auto ;
だが、今度はリンクの色を指定していたCSSが効かなくなった。しかもFirefoxまで。
作っていたCSSはこんなもの。
A {
text-decoration: none; /* リンク文字の下線 */
}A:link {
color: 1e90ff; /* リンクの文字色 */
}A:visited {
color: 1e90ff; /* 既リンク時の文字色 */
}A:hover {
color: #FF0000; /* ポイント時の文字色 */
}A:active {
color: #FF0000; /* ポイント時の文字色 */
}
どうなったかというと、linkとvisitedのところに指定している色が効かず、デフォルトの色(例えば既リンクなら紫)になってしまった。(hoverとactiveは効いている)
要素の指定の順番を間違えて、hoverが効かないとか、そういう類の話はたくさんあるのですが、visitedが効かないなんていう情報がなかなか出てこず(実際そういう問題じゃなかったからなんだけど)、相当な時間を費やしてしまった。
CSSの外部ファイル参照をやめてみたり、色々順番を変えてみたり(正しいと分かっていても)、DOCTYPEを別のものに変えてみたり・・色々やったが全然ダメ。
結局CSSをこのように書き換えて解決した。
A {
text-decoration: none; /* リンク文字の下線 */
}A:link {
color: dodgerblue; /* リンクの文字色 */
}A:visited {
color: dodgerblue; /* 既リンク時の文字色 */
}A:hover {
color: #FF0000; /* ポイント時の文字色 */
}A:active {
color: #FF0000; /* ポイント時の文字色 */
}
違い、わかるでしょうか。要するに色の指定を16進をやめて色名を直接指定したら効いた。
色については↓で調べて、ブラウザに定義されているものと思って使っていたし、
なんとなく色名よりも16進で指定する方が、本流のような気がして(根拠は無い)、昔から結構そうしてた。
そもそも、hoverとactiveに指定している「赤」は16進で指定していてちゃんと効いている。
今回こういう結果になったのは、「DOCTYPE」を指定してからなので、私が指定したDOCTYPEのDTDとかを調べれば、どうしてそうなったのか分かるのだろうけど、もう職業技術者でもない自分はそこまでする理由も気力も無いので、とりあえずこんなことありましたということで記しておく。
自分自身が、ネット上の情報によく助けられているので、同じことに遭遇した人がここを見て解決に役立てば、と思う。
＊4/19追記
↓hxxkさんのコメントにより、色指定が効いていない一番の原因は、「指定の方法が間違っていること」であって、16進だから表示できない、色名指定ならOKという問題ではないようです。
つまり、私が指定したDOCTYPEでも、当然正しく指定すれば16進で表示できます！(当たり前でスミマセン)
今回なぜ、こんな問題になったかといえば、「DOCTYPE未指定だと、#無しの色指定でも通ってしまう。IEだけならまだしも、FireFoxまで。」というところでしょうか。
ということで、やはり最初からきちんとDOCTYPEを指定して書き始めることが大事です！(これまた当たり前でスミマセン)
