こんにちは、WEBマーケティング部の杉尾です。 CSS3のセレクタとプロパティをIE8に対応させる方法を紹介します。 よろしくお願いします。 ブラウザ国内シェア状況 とても便利なCSS3ですが、IE8ではほとんど対応していません。 そのIE8のブラウザ国内シェアは、2015年1～3月期で3.08％です。 参考：外部ページ http://gs.statcounter.com/#browser_version-JP-monthly-201501-201503-bar 以前に比べるとかなり下がってきたとはいえ、アクセスを見ているとまだIE8からのものもあります。 完全に無視するには早いかなという印象です。 今、Webの現場ではCSS3を使いながら、IE8でも崩れない程度の対応をするということが増えている気がします。 しかし、案件によってはIE8対応必須ということもあるでしょう。 そんなときに、C

IEはバージョンごとに表示方法（レンダリング）がガッツリ変わると言う、とてもやっかいなブラウザです。 また、各バージョンごとに下位バージョンの表示方法を再現できたり、互換表示なる表示方法があったりと、ありがた迷惑この上ない機能が搭載されています。 このサイトのトップページをIE10で表示すると・・・ アドレスバーに紙が破けたようなアイコンが表示されます。そしてこのアイコンをクリックすると互換表示に切り替わり、再レンダリングがはじまります。 box-shadow、background-sizeなどのCSSが効かなくなってしまいました。 また同じアイコンをクリックすれば互換表示が通常表示に戻ります。もし通常表示に戻さなかったか場合、IEは設定を覚えてしまい、再度同じURLにアクセスすると、また互換表示になってしまいます。IEを終了して再起動しても戻りません。 新バージョンのIEを使用しているユ

IE11では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。 本記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法 HTMLドキュメント内にX-UA-Compatibleを追加する ApacheでHTTPレスポンスヘッダにX-UA-Compatibleを追加する IISでHTTPレスポンスヘッダにX-UA-Compatibleを追加する 1. 動作仕様 IE=EmulateIE11 : 常にIE11モードとして動作する。 IE=EmulateIE10 : 常にIE10モードとして動作する。(※製品不具合) IE=EmulateIE9 : DOCTYPE宣言に応じて、IE9モードかQuirksモード(IE5)を選択する。 IE=EmulateIE8 : DOCTYPE宣言に応

ウェブページを作成する際には、古いブラウザでどう表示されるのかも確認したいことがあります。しかし、同一の環境内でInternet Explorer(IE)の複数バージョンを共存させることはできませんから、古いIEでの表示確認は簡単ではありません。 そこでMicrosoftの用意した解決策が、「特定バージョンのIEがインストールされているWindowsそのものの無料配布」です。例えば「IE8がインストールされたWindows7」などのOSイメージを、様々な仮想マシンイメージの形で無料公開しています。 これらの仮想マシンを使えば、普段利用するPCに最新版のIEがインストールされていても、簡単に古いバージョンのIEを使って表示・動作確認ができます。例えば下図は、IE11とIE7の2つを同時に起動したところです。 上図では、 ホストOSであるWindows7上で起動しているIE11(左側)とは別に

こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位　IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな

娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d

はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl

TOP  >  WebDesign  >  IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」 WEBサイト構築においてもはや常識となったCSS。新たな仕様のCSS3が整備されつつあり、表現の幅をさらに広げてくれるものになっていますが、最新のブラウザのみ対応しており、IE6のようなシェアがある旧世代のブラウザは対応していないというのが現状です。そこで今日紹介するのはIE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」です。 全てのCSS3のプロパティが適応されるのではなく、角を丸くしたり、ボックスに影を入れたりテキストに影を入れたりといったCSS3の機能をスクリプトにｙほって再現するというものです。 詳しくは以下 スクリプトを読み込ませると言

追記： 現在は IETester というソフトウェアを使うのがベストだと思います＞＜ 結論から言うと Jeremy Smith's blog: Success! IE 6, 7, and 8 Running on Same Machine (Plus 5.5 and 5.01) に書いてある通りで IE8 をインストール http://tredosoft.com/IE7_standalone の IE7 Standalone をインストール http://tredosoft.com/Multiple_IE の Multiple IE をインストール の順で、共存させることができました。 IE8 を入れるのを戸惑っている人は 入れてみたらいかがでしょうか。 ちなみに 以下のサイトからダウンロードできる Standalone IE6 は IE8 と共存できませんでした。 browsers.ev