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使えなくて、もやもやしてる人たちの希望になれましたかね。

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

関連記事

スマートフォンサイトを作るときによく使うhead内のタグ... スマートフォンサイトを作るにあたってよく使うmetaタグなどheadで使う要素をまとめてみました。 スマホサイトを作り慣れていない人の参考になれば嬉しいです。 目次 viewport ...
Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ... 最近「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 」という本が出版されてSassがさらに注目されていますね。 個人的にはいよいよSass一択になってLESSが淘汰されていっちゃうのかなと心配しています。 そもそもLESSって何?って方もいるでし...
このフレームワークに惚れたらレスポンシブデザインについて色々考えちゃいました... 先日フレームワークのResponsive Grid Systemが大幅に変更されたと知って興味があって調べてみました。 Responsive Grid Systemとはグリッドシステムを使うためのフレームワークで、レスポンシブデザインでも使用できるような設計をされているものです。 確認し...
gulpで作るスタイルガイドをFrontNoteにした... みなさん、スタイルガイドは使ってますか。 私は今年になって使い始めました。 これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。 乗り換えたスタイルガイドジェネレーターは「fron...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...