※回答一覧

 出題者   カテゴリ   作成日

赤間　公太郎		 ウェブ制作担当 2014-02-28 15:37:59
 問題   ヒント   回答数 
■CSSを変えたのにデザインが変わらない!

ウェブ制作を行っていると「CSSを変えたのにデザインが反映されない」ことがよくあります。
あなたはその時どういう手順で対処していきますか?
下の質問に回答しながら対処手順を教えてください。

1.　CSS検証にどのブラウザを使っていますか?
2.　そのブラウザのどの機能を使っていますか?
3.　その機能を使って、どうやってチェックして検証を行っていますか?
4.　がんばって対処しても全然反映されなかった場合あなたはどうしていますか?		 6

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
2 kamino
1.　CSS検証にどのブラウザを使っていますか?
Firefox

2.　そのブラウザのどの機能を使っていますか?
Firebug

3.　その機能を使って、どうやってチェックして検証を行っていますか?
Firebug自体使いこなせているかわかりませんが、スタイルを足したりひいたり変えたりして変化をみます。

4.　がんばって対処しても全然反映されなかった場合あなたはどうしていますか?
反映させたいスタイルよりも他のスタイルが優先されていないか?
綴りは間違っていないか?
をまずは確認すると思います。
それでも変化がなければ、誰かにみてもらうと思います。
自分では気がつかない単純ミスがあると思いますので、第三者にみてもらいます。		 銀 (赤間　公太郎)
Firefox標準の開発ツールで検証するのも良いですが、昔からWeb制作の現場で使われているアドオン「Firebug」がとても優秀ですね。 操作性の良いDOMで、愛用している方も多いのではないかと思います。該当の要素部分のスタイルをオフにしてみたり、数値を変えてみるのは正攻法的な手段です。ここで不具合や不備を見つけられるケースも多いものです。 自分だけで解決できないものは、第三者の目を借りるのは良い選択ですね。目線や着眼点が違うだけで、解決に繋がるケースもありますから。
1 naichi
1.chrome
2.要素を検証
3.エラーが出ていないか、cssのどの部分が反映されているのか?を確認し、「要素の検証」上でチェックをつけたりはずしたりなど。
4.何度かやってみてできなければあきらめます。。。		 なし (赤間　公太郎)
手軽でCSSの再現性サポートの良いWebブラウザであるGoogle Chromeを第1チョイスとするのは、とても効率の良いことです。 デベロッパーツールの「要素の検証」は、現在適用されているCSSの効果を、一時的にオフにしたり、数値を調整したりできますので、このあたりから手を入れてみると良いですね。 もしどうしても反映されない場合は、代替の手段を考える、別な表現手法とする、まっさらなCSSを書いてみるなど、試行錯誤をしてみましょう。
0 gabber1090
1.　CSS検証にどのブラウザを使っていますか?
通常はGoogleChrome、Firefox、Safari、IEの順でチェックに使っています。

2.　そのブラウザのどの機能を使っていますか?
Chrome、Safariならデベロッパーツール、FirefoxはFirebugで、IEはF12キーで。

3.　その機能を使って、どうやってチェックして検証を行っていますか?
基本はDOMツリーの要素を選択⇒CSSの確認です。htmlに指定したidやclassと実際に表示されるcssについて相違がないか確認します。またデベロッパーツールだとidやclassに取り消し線が入っていないか(idやclassが無効になっていないか)チェックします。

4.　がんばって対処しても全然反映されなかった場合あなたはどうしていますか?
先ずはファイルパスを疑います。CSSファイルをアップしているサーバのパスや、外部CSSの場合にはその参照パスが間違っていないかの確認を、それでもダメな場合にはキャッシュを疑い、ブラウザキャッシュの削除を各ブラウザで行い再読み込みを行います。		 金 (赤間　公太郎)
CSSを検証するツールはたくさんありますが、やはり手軽なのは手元のWebブラウザの機能です。 Google Chromeは「デベロッパーツール」、Firefoxは「開発ツール」が標準です。 そのほか、アドオンと呼ばれる後付けの拡張機能がありますので、それを導入するのもひとつの手ですね。 こういったツールを利用すると、HTMLの要素にピンポイントでアクセスできるため、効率の良い解析が行えます。 ファイルパスの疑い、これは非常に良い着眼点です。いくら正しいコードを書いても、ファイルそもそも繋がっていないとまったく意味がありません。（コンセントが抜けていた、的なオチですね） もしかしたら間違っているかも？　と、いつもは当たり前の事を疑ってみるのも十分有効な策です。
0 丸田
制作はまったくやっていないので、今回は、パスさせてください。
0 りきまる
1.　CSS検証にどのブラウザを使っていますか?
→Firefox。Chromeのディベロッパーツールも使用する場合もありますが、個人的にChromeのキャッシュが強く、リロードしても変わらないこともあったためメインはFirefoxを使用してます。
2.　そのブラウザのどの機能を使っていますか?
→ファイヤーバグ(アドオン)
3.　その機能を使って、どうやってチェックして検証を行っていますか?
→実際にブラウザで表示画面を確認しながら数値を替えたり、記述を追記してcheckを行ってます。
4.　がんばって対処しても全然反映されなかった場合あなたはどうしていますか?
→CSSが上手く効いていない場合は、細かく入れ子まで記述して対応してます。汎用性は失いますが、、、。
または1つ、2つ外側のボックスの作りなおしをします。		 金 (赤間　公太郎)
CSSがうまく動作しない原因で、記述ミスの他に“キャッシュ”も考えられます。キャッシュとはWebサイトを閲覧した際にパソコンに取り込まれる一時ファイルのことで、次回の読み込み時にこのファイルを利用することにより、高速に表示することができるものです。 しかしながら、このキャッシュの影響で、“更新したものが反映されない”という現象も引き起こすので、表示が変わらない場合はキャッシュも疑うべく、その存在は頭の中に入れておくべきですね。 うまくいかない場合、ボックスを作り直すというのは良い手段だと思います。急がば回れの通り、最初から取り組んだ方が、余計な不具合に振り回されず、結果きれいなコードになる場合も多いものです。
0 いずみ
※普段CSSを触る事が無いのでこのような回答で大変恐れ入ります。。

1.　CSS検証にどのブラウザを使っていますか?
→　クロム、IE、FF
2.　そのブラウザのどの機能を使っていますか?
→　使っていません、、
3.　その機能を使って、どうやってチェックして検証を行っていますか?
→　なし
4.　がんばって対処しても全然反映されなかった場合あなたはどうしていますか?
→　社内の制作チームに相談しに行く。