透過PNGを利用する方法
透過PNGをIE6以下でも利用する方法が紹介されてました。今までは透過PNGを利用をするのは少なかったですが中々使えそうです。
結論を言っちゃうと、javascriptを利用してIEの該当バージョンであった場合に、IE特有のDXImageTransform.Microsoft.AlphaImageLoaderのプロパティーの設定されているspan等で囲った状態に入れ替えてあげると言うものです。参照先で紹介されているjavascriptは「ここ」にあります。
通常IEだと以下のように表示されます。分かりやすいように外側の要素に水色を背景色として入れてみました。
んで、javascriptを利用するとこんな感じになる。
ソースみてみましたが、ちょっと自分的な物に(mootoolsの機能をチョロっと使ってる)更新してみました。よければどうぞ。普通は上記のjavascriptの方が良いと思われます。
- var transpng = {
- init: function() {
- var browser = navigator.appVersion.split(“MSIE“);
- var version = parseFloat(browser[1]);
- if ((version >= 5.5) && (document.body.filters)) {
- var lists = $S(‘img‘);
- var num = lists.length;
- for(var i=0; i<num; i++) {
- var img = lists[i];
- var imgName = img.src.toUpperCase();
- if (imgName && imgName.substring(imgName.length-3, imgName.length) == “PNG“ && img.src) {
- var imgID = (img.id) ? “id=’“ + img.id + “‘ “ : “”;
- var imgClass = (img.className) ? “class=’“ + img.className + “‘ “ : “”;
- var imgTitle = (img.title) ? “title=’“ + img.title + “‘ “ : “title=’“ + img.alt + “‘ “;
- var imgStyle = “display:inline-block;“ + img.style.cssText;
- if (img.align == “left“) imgStyle = “float:left;“ + imgStyle;
- if (img.align == “right“) imgStyle = “float:right;“ + imgStyle;
- if (img.parentElement.href) imgStyle = “cursor:hand;“ + imgStyle;
- var strNewHTML = ““ + imgID + imgClass + imgTitle
- + “ style=\”“ + “width:“ + img.width + “px; height:“ + img.height + “px;“ + imgStyle + “;“
- + “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader“
- + “(src=\’“ + img.src + “\’, sizingMethod=’scale’);\”>“;
- img.outerHTML = strNewHTML;
- }
- }
- }
- }
- }
window.onloadなどでinitメソッドを呼んであげないと駄目なので逆に使いにくいか・・・失礼。まぁ。書いちゃったしいいや。たぶん参照先のJSの方が良いと思います(何がしたいんだオレは)。
HTML/CSSでの角丸を自動生成 - RoundedCornr
角丸の画像と、HTML、CSSを同時に作ってくれるサービスだそうです。角丸サービス多くなってきましたねぇ。
一番単純な形としては「角丸の半径」「背景色」「ボックスの背景色」を指定するもの。以下のようなソースは生成されます。もちろん画像ファイルのダウンロードもアリ。うーん親切。
HTMLのソース
<div class="roundedcornr_box_925818"> <div class="roundedcornr_top_925818"><div></div></div> <div class="roundedcornr_content_925818"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="roundedcornr_bottom_925818"><div></div></div> </div>
CSSのソース
.roundedcornr_box_925818 { background: #dddddd url(roundedcornr_925818_grad.gif) repeat-x top left; } .roundedcornr_top_925818 div { background: url(roundedcornr_925818_tl.gif) no-repeat top left; } .roundedcornr_top_925818 { background: transparent url(roundedcornr_925818_tr.gif) no-repeat top right; } .roundedcornr_bottom_925818 div { background: url(roundedcornr_925818_bl.gif) no-repeat bottom left; } .roundedcornr_bottom_925818 { background: transparent url(roundedcornr_925818_br.gif) no-repeat bottom right; } .roundedcornr_top_925818 div, .roundedcornr_top_925818, .roundedcornr_bottom_925818 div, .roundedcornr_bottom_925818 { width: 100%; height: 30px; font-size: 1px; } .roundedcornr_content_925818 { margin: 0 30px; }
IEのCSS例外対応はなんだかな・・・
IE(InternetExplore)は独自のHTMLタグのような物が結構あってIEのバージョンの違いでCSSの読み込み等を制御できるそうです。結構色々あって知らないものも沢山あったので気になった所をメモメモ( ..)φ。
条件分岐
まず、条件分岐はコメント形式で以下のようなフォーマットになる。if文のような形になりますな。
表示する(TRUE) <!--[if 条件文]> HTML <![endif]--> 表示しない(FALSE) <!--[if !条件文]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->
条件分岐の条件としては以下のような感じ。
- IE
- IEのどんなバージョンでもTRUE(OK)
- lt IE version
- 「version」で記載したバージョンより前のバージョンがTRUE
- lte IE version
- 「version」で記載したバージョン以下(設定されたバージョンも含まれる)のバージョンがTRUE
- IE version
- 「version」で記載されたバージョンだけTRUE
- gte IE version
- 「version」で記載されたバージョンの以後(設定されたバージョンも含まれる)のバージョンだけTRUE
- gt IE version
- 「version」バージョンより後のバージョン
バージョンとして設定できる文字列としては以下らしい。
- 5
- 5.5
- 6
- 7
以下のような感じでCSSファイルの読み込みを制御できるみたいです。正直言っていいっすか？キンモーーー！
<head> <title>Test</title> <link href="all_browsers.css" rel="stylesheet" type="text/css"> <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]--> <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]--> </head>
本当はもっと一杯あるらしいですが、書いているうちにゲンナリしてきたのでここら辺で・・・。気が向いたら以下サイトより詳しくどうぞ(別ページへのリンクが分かりずらいので注意)。
