上手く動かない場合は？
CSS3は比較的新しい技術です。そのため,トラブルも多くあります。
このページではCSS3を記入したのに反映されない時に考えられる大きな原因を３つあげています。
①ブラウザが古く,CSS3自体対応していない
使用ブラウザをアップデートしていない場合に考えられます。このサイトで使用しているスライドはHTMLとCSS3で作成しています。上のようにスライドの一部が表示されない場合はブラウザが古いと思われます。ブラウザを最新のものに更新してください。
②ブラウザが古く,古い記述のみ対応している
使用ブラウザをアップデートしていない場合に考えられます。CSS3は機能の草案時から各ブラウザごとに独自の拡張機能として実装していた時がありました。そのため,独自の拡張機能と明示するためにベンダープレフィックスというものをつけていました。
例えば,グラデーションの記述「linear-gradient()」はFirefox15以前,Google Chrome25以前では上記のようなベンダープレフィックス（ピンクのマーカー部分）が必要となります。
ベンダープレフィックスは将来的には外すことになりますので,このサイトではベンダープレフィックスなしで記述しています。ブラウザを最新のものに更新してください。
③誤字脱字等の記入ミス
上記以外の原因としてはやはり記入ミスがある可能性が非常に高いです。
下記の手順で記入ミスを探しましょう。
- プロパティのスペルを間違っていませんか？
- 「,（カンマ）」や「；（セミコロン）」が抜けていたり,余計なところに打っていませんか？
- 値の書き方を間違っていませんか？
「background:」等,「：（コロン）」の左側が間違っているかチェックしましょう。Design Codeのエディタではプロパティ名が間違っていると図のように明るい赤になります。明るい赤になっている部分がないか探してみてください。
「,」や「；」などが抜けるだけで結果が表示されません。また,必要のないところに「,」などを打ち込んでも結果が表示されません。スライドとよく比較してみてください。なお,コピーアンドペーストを繰り返している「；」の記入漏れや2つ記入していることもあるので注意してください。
「：linear-gradient（）」等,「：」の右側が間違っていないがチェックしましょう。「,」や「）」は忘れていないか,「linear-gradient」等のスペルが間違っていないか,記述の順番が間違っていないかチェックしましょう。プロパティとは違い,間違っていても明るい赤にならないため,発見しづらいですが落ち着いてチェックしましょう。