質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1964閲覧

CSSの透過に関して

color

総合スコア90

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/03/13 06:57

透過を実現する為にnetを見ながらcssを作成しました。

イメージ説明

visualstudioで確認すると、波線でエラーが出てしまいます。
エラー文言は下記。

イメージ説明

どうする事が一番ベターかご存知の方いらしたら伺えれば幸いで御座います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

-moz-opacityの行は削除して下さい。

-moz-の接頭辞は「Mozilla Firefox」に適用されますが、Firefoxは、バージョン0.9で接頭辞なしのopacityに対応しています。もはや、全く不要です(MDN)。

投稿2017/03/13 07:06

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

color

2017/03/13 08:17

ありがとう御座います。意味合いが理解出来ました。
guest

0

CSS3.0 の文法チェックの警告なので、単純に出ないようにするというのであれば、
CSS3.0の文法上正しい opacity: のみの記載でOKです。

ではなぜ、WEBで見つけたソースに他の2つが必要だと書いてあったかですが

filter:alpha(opacity) は、InternetExplorer8以下に適用させるため
-moz-opacity: は、Firefox3.4以下に適用させるため

です。

コレを記載するかどうかは、古いブラウザをどこまで対応させるかというウェブサイトの設計ポリシーに依存します。

###ブラウザシェアで考える
ちなみに2017年時点のブラウザシェアは、IE8以下は約1.2%Firefox3.4以下は 0.2% となっており、合わせても1.4%程です。(セルフ調べ)

※実情は、このような古いブラウザバージョンのシェア数は、大部分が自治体や大学などソフトウェアの更新に許可・手続きが必要な団体が保有するPCがこの数%を保持する要因になっており(日本独特の理由)、一般的なユーザを考えた時に、実は無視して良いレベルの%だったりします。

それでも、ウェブサイトが公共性のあるターゲット層を持つならば、実情まだこの2つは維持しても問題ないかと思います。

Visualstudioのエラーだけを嫌うならば0.2%(1000人に2人)を切り捨て、-moz-opacity: だけを削除するのも良いでしょう。

###もう一つの方法も
ちなみに透過処理にはもう1つ方法があり
background-color:rgba(255,255,255,0.85);のように、RGBA()を使う事で箇所を指定して透過することができます。16進数のRGB数値と透過値(Alpha)で指定します。

opacityは、要素の中身全てを透過するために「その中にある文字も透過されて見づらい!」なんて事もよくありますが、RGBA()を使う場合、背景色だけ、枠線色だけというような指定が出来るので、使い勝手が良かったりします。

投稿2017/03/13 09:02

編集2017/03/13 09:06
iss

総合スコア506

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

頭についている-mozとは、ベンダープレフィックスと呼ばれるものです。これは「本来CSSの標準には存在しないけど、うちのブラウザでは対応する」というものです。opacity、つまり不透明度ですが、mozはFireFox(Mozilla)系を表しており、昔は-moz-opacityという名前で指定することで、opacityが標準にない頃からFireFox上で透明度を扱うことができるというものでした。VisualStudioはMicrosoft系列、つまりIEやEdgeなので、-mozというベンダープレフィックスはデフォルトでは受け付けていないのでしょう。

それで、警告の消し方ですが、私の手元にはすぐ試せるVisualStudioがないので検索して出てきた結果を参考に貼り付けておきます。
http://ja.stackoverflow.com/questions/2675/web-essentials-%E3%81%AEcss%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E5%86%85%E5%AE%B9%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

投稿2017/03/13 07:13

masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2017/03/13 07:21

Firefox自体すら、Ver. 3.5で-moz-opacityの対応を打ち切ったとのことなので、「もはや適用される環境が存在しない」プロパティということで警告されているのかもしれないです。
masaya_ohashi

2017/03/13 07:57

なるほどー!それは盲点でした…
color

2017/03/13 08:17

ありがとう御座います。意味合いが理解出来ました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問