[Web関連]CSS3のlinear-gradientでベンダープレフィックスを外すとグラデーションが消える場合の記述ミスCSS3のlinear-gradientを使ってグラデーションを描画しようとしたときに「-moz-」や「-ms-」のような各種ベンダープレフィックスを削除すると、グラデーションが一切表示されなくなってしまう現象に遭遇して数分だけ悩んだので(^_^;)原因と対処法をメモしておきます。簡単に言えば、以下の3点ということなんですが。古い仕様を使ってlinear-gradientの値を記述していた。ベンダープレフィックスを付けていれば、古い仕様の記述方法でも意図通りに解釈してくれていた。ベンダープレフィックスを付けない場合、古い仕様での記述は無視される。......というわけで、ベンダープレフィックスを外すと、グラデーションが消えてしまったのでした。^^;問題は、linear-gradientの値に「グラデーションの開始点」を記述している場合です。開始点を指定するのは古い仕様で、(今のところの)最終仕様では「グラデーションの方向(角度)」を指定しなければならず、記述方法が変わっています。以下に簡単に解説しておきます。CSS3のlinear-gradientで先頭に始点を表すキーワードを書くのは古い仕様linear-gradientに指定する値で、先頭に「グラデーションを開始する位置」の意味で「top」や「left」みたいなキーワードを記述しているなら、それは古い仕様です。right」のように記述する必要があります。)例えば、ベンダープレフィックス「-moz-」や「-ms-」を付けて黄色から緑色へのグラデーションを記述する場合、以下のような感じで書いていました。*/ここでは、先頭に「top」と記述しているので、「上から下へ向かってグラデーションが描かれます。このように「開始点」を指定するのは古いlinear-gradientの書き方です。ここから単純にベンダープレフィックスを外して以下のように記述してしまうと、グラデーションは描かれません。*/上記のようにすると、単に無視されてしまいます。(^_^;)グラデーションの「始点」ではなく「方向(角度)」を指定する仕様になっているlinear-gradientの正しい記述(というか今のところの最終仕様)では、先頭には「始点」ではなく「方向(角度)」を指定します。bottom」か、角度を数値(単位は「deg」)で指定します。bottom」だと「上から下」の意味です。「180deg」でも同様に「上から下」の意味です。bottom」や「180deg」と等しい......ということになります。方向(角度)は省略可能なので、以下のようにグラデーションの色だけを指定する記述でも構いません。)」を指定したことになるので、下から上へ向かってグラデーションが描かれます。諸々のベンダープレフィックスを含めた書き方と、CSS3最終仕様での書き方もはや、linear-gradientにベンダープレフィックスが必要なほど古いブラウザは考慮しなくて良いのではないかと思います。残念ながらIEの場合はIE9以下では非対応ですが、これはベンダープレフィックスを付けても非対応なので(^_^;)気にする意味がありません。(IE用のベンダープレフィックス「-ms-」は、IE10のプレビュー版向けにだけ必要でした。IE10の正式版では不要です。)ただ、ベンダープレフィックスを外しただけの記述が正しい文法だと思ってしまうと、グラデーションが表示されなくなってしまうので注意が必要、という話でした。古い書き方と、最終仕様での書き方とを比べると、以下の通りです。*/上記の記述では、どの場合も、上から下へ向かって、青色から淡い緑色にグラデーションします。bottom」と書く必要がある点に注意です。)表示例は以下の通りです。right」みたいなキーワードよりも、下記のように「180deg」とか「45deg」みたいな数値(角度)を指定する方がわかりやすい上に微調整もしやすくて望ましい気がしています。Aboutで解説していますので、よろしければそちらもご参照下さい。ホームページ作成)また、linear-gradientの仕様の変遷については、MDNのlinear-gradientページが詳しく参考になりました。この日記に対するコメント投稿を歓迎します。※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。1~2日以内には表示されるはずですので、気長にお待ち願います。仕事トラックバックこのエントリーへのトラックバックURLを表示するにはここをクリック※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。INFORMATIONSこのページの製作者は、にしし(西村文宏)です。このページの内容は真実であることが基本ですが、虚構や妄想が混じっていることも多々あります。(^_^;)リンクは歓迎致します。リンク用バナーも用意しています。必要であればご使用下さい。reserved.このサイトについてこのページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット&PC用デザインになります。横幅920px以上での閲覧がお勧めです。古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。