CSS言語の指定方法を間違えていた。。

普段chromeを使っているのですが、先日たまたまFirefoxでブログの確認をしたら、変えたはずのフォントの色が変わっていなかった。
結論からいうと、スタイルシートの使用を明示するためのコードを間違えていたので適用されなかったようです。
code
 <meta http-equiv="Content-Style-Type" content="text/css"> 
とするべきところを
code
 <meta http-equiv="Content-Style-Type" content="style/css"> 

となっていました。

かなり前から間違えていたと思われます。ほんと恥ずかしい限りです。

けど、自分で書いたものではなく、どこかからコピペしたと思うので、同じような事態に陥っているサイトもあるかもしれませんね。

で、せっかくですのでちょっと掘り下げて考えてみます。

CSSには3種類の方法がある

今回CSSが適用されていないを気付くきっかけになったのがこの部分です。
code 1
<span style="color:#FF0000">テキスト</span>
CSSを使用するにはこのほかに以下の2つの方法があります。
code 2
<style type="text/css">
span {
  color: #FF0000;
}
</style>
code 3
<link rel="stylesheet" type="text/css" href="example.css">
タグ内に直接書き込まず別にCSSを指定する場合や、それを外部ファイルとして読み込む方法などです。

すべてのCSSが適用されないというわけではない

CSSの指定方法は3つありますが、CSS使用を明示していないと適用されないのは、1番最初の直接htmlタグ内に書き込む場合のみです。

最初のものはタグに直接書き込むためスタイルの種類を明示できず、最初に宣言しておく必要があるのでしょう。

他のものはそれ自体に宣言を表すコードが含まれていので最初に必要ないのでしょう。

Firefoxのみで起きる

で、これが起きるのはFirefoxの場合となります。

他のブラウザでは最初に明示しなくても判断してくれるので、多分Firefoxもやろうと思えばできると思う。けど、ウェブ標準に則っていないサイトに合わす必要はないということでしょうかね。

お恥ずかしい話でしたが、勉強にもなりました。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加