カテゴリー:
CSS
閲覧数:1006 配信日:2013-03-23 13:08
要約
まず、問題を2つに分けて考える
1.該当CSSの読込可否(ブラウザから設定CSS該当箇所が表示されるかどうか)
2.該当CSSの反映可否(設定CSS内容が、ブラウザに正常反映されるかどうか)
※同じように見えるが、この2つを切り離して考え、順を追って原因を探していく方が、最終的には効率的な解決に繋がる
1.読込可否
設定CSS該当箇所が読み込まれない(表示されない)時の対処バリエーション
1.CSS自体の読込を確認 … CSSファイル名、パスを間違えていないか
2.設定CSS該当箇所の読込確認 … 「ID」もしくは「クラス名」を間違えていないか
3.CSSファイル(特に、該当箇所より前部分)に、余計なコード残骸がないか確認 … 「｛」「｝」の「入れ子」や「2重掲載」はないか、など
2.反映可否
(設定CSS該当箇所は読み込まれているのに)設定したCSS内容が反映されない時の対処バリエーション
1.「invalid property value css」エラー … その属性に存在しないプロパティ名を指定など
2.重複 … 同じプロパティが存在する場合、後で書いた内容の方が反映される
3.重要度 … 但し「!important;」が付与されている場合は、そのプロパティ内容が優先される
4.内部外部 … 外部CSSより、HTML直書しているプロパティ内容が優先される(多分)
5.その他個別対応 … 「relative」絡みの「z-index」や、「ブラウザ(及びバージョン)間差異」など
3.コメントアウト
1.コメントアウトする際、誤って「//」を利用していないか
4.その他
疲れていると、普段なら絶対にしない間違いをおかす
・しかもそういうあり得ないミスほど、間違うはずないと思っているので、発見に時間がかかる
・以下、実際に遭遇した例
・頼むよ、オレ！
1.""の片方が足りない
<div class="container>
2.余計な"を付与
・別の個所で「content: "\f10d";」があったので、恐らくコピペミスだと思われる
.imgyearspot{
left:1.3rem;"
}
3.タグ名が異なる
・ulなのにui
<ui class="container>
4.{}記述漏れ
.nav>li>a:hover
5.{}記述ミス
section table{margin-top:-1rem;]6.クラス記述ミス
・「.」と書くべき所を「..」と記述
<?php
$h3Img = file_get_contents("/var/www/xxxx/xxxx/views/common/lib/sceditor/minified/themes/headers-button.png");
?>
<style>
..sceditor-button-headers div{
background-image:url(data:image/jpg;base64,<?php echo base64_encode($h3Img); ?>);
}
</style>