Cntlog > スキルアップ・ノウハウ > コーディング > RGBAをIE8でも使う簡単な方法

RGBAをIE8でも使う簡単な方法

CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。
PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。
私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成するやり方でIE8もサポートしています
そのやり方をちょっとご紹介。

デモを用意していますので、まずはそちらをご確認ください。
(※IEのでデバッグモードでIE8にしたりしてご確認ください)

デモはこちら

用意するもの

RGBAで色指定したものを画像生成する便利なライブラリがすでにあるのでそれを使います。

rgba.php

使い方

使い方はいたって簡単で先ほど紹介した「rgba.php」にRGBAの値を渡せば良いだけです。

.alpha_bg{
/*相対パスで設定しているので、ご自分がrgba.phpを配置した場所に合わせてパスは変更してくださいね。*/
background:url('rgba/rgba.php/rgba(255,255,255,0.5)');
}
ディレクトリの構成例
index.html
/css
└rgba/rgba.php
└style.css
└/color/

通常のRGBAと同じ書き方で値を渡せるので、違和感なく使えますね。
IE8はあくまで補助なので通常はこんな感じで書いておけば良いです。
※一応IE7でも使えます。

.alpha_bg{
/*相対パスで設定しているので、ご自分がrgba.phpを配置した場所に合わせてパスは変更してください。*/
background:url('○○○/rgba.php/rgba(255,255,255,0.5)');/*IE8用*/
background: rgba(255, 255, 255, 0.5);
}

CSSは上から下に読まれて行くので、CSS3のRGBAに対応しているものは上書きされる感じです。
毎度書くのが面倒な場合はLESSやSASSのMIXINとかにしておくと意識しなくても勝手に設定してくれるので良いですね。

まとめ

PHPが使える環境じゃないとダメって制限はありますが、なかなかPHP使えないサーバーはないと思うので汎用的にこのやり方でIE8をサポートできると思います。
RGBA使えなくて、もやもやしてる人たちの希望になれましたかね。

他に私はこうやってるよーとかありましたらこっそり教えてもらえると嬉しいです(*ゝω・*)

関連記事

コーディング規約(HTML・CSS)を作ってみた(公開済)... WEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。 作って見た規約はこちら。 WEB制作ガイドライン コーディング規約を作った理由 オレオレフレームワークやWordPres...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...
今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...