>IE8対応!opacityの書き方について2014年11月1日IE8対応!opacityの書き方についてFacebookTwitterhatenaLINEオンマウス時などに透明度を変更できる「opacity」。便利なのですが、IE8に対応させようとした時にうまくいかない時があったので、その時の対処法を掲載します。HTML画像+リンクという動作で、HTMLはこのように記述していました。CSS「.opacity」は下記のように記述します。0.6;}【参考画像】この書き方でほとんどのブラウザでは「画像にオンマウスした状態で画像が半透明になる」という動作になるかと思いますが、IE8はこの書き方だと半透明になりません。そこで、下記のように記述を変更します。0.6;}【参考画像】この書き方ならIE8でもオンマウス時に画像が半透明になります。最新ブラウザの挙動だとopacityは子要素まで含めて効くのですが、IE8だけは指定した要素にのみ効くようで、「img」のhoverに対してopacityを指定する事で解決しました。以上、IE8に対応したopacityの書き方でした。画像の下に数ピクセルの謎の余白が出来てしまう時に解決できるCSSサイトに画像を表示するならimgタグ、divなどで囲ってレイアウトを調整、よくある日常の作業なのですが、たまに悩まされる時があります。今や当然のように記述するようになったHTML5で追加されたタグ。<header>や<footer>、<nav>など、これまで...便利なcalc()関数でwidthやfont-sizeの値を計算式で指定レイアウトを組む時、特に横幅可変やレスポンシブ対応の際に横幅や余白の計算は不可欠ですね。横幅いっぱいに伸ばしたいけど50pxだけ余白を残したい時。偶数や奇数ごと、3つごとや5つごと、といった指定や、n番目のみ、という指定。CSSを指定した要素にだけ適用したい場面はよくありますが、そんな時に便利な疑似クラス...スマホ用サイト、縦向きと横向きでCSSの指定を切り替える記述方法2014年現在、あるのが当たり前になりつつあるスマートフォン用サイト。コメントをキャンセルメールアドレスが公開されることはありません。