どうしてもIE6,7,8にレスポンシブ対応をさせたい場合[HTML5編] | オレのWEBPAD
レスポンシブサイトが多くなってきた昨今。どうしても問題が出てくるのがIEへの対応です。 レスポンシブサイトを作る場合、どうしても必要な機能があります。 個人的に一番必要な機能は・・・max-widthとmin-widthが使えること。 この時点でIE6は非対応になってしまいます。 先日IE6まで対応した案件が有りましたのでその際のノウハウをメモしたいと思います。 HTMLの文法はHTML5とします。CSS3はメディアクエリ以外利用しません。角丸とかは無視させる仕様です。 理由は最後に書きます。 通常のレスポンシブサイトの作り方はこちらを参考にして下さい。 HTML5を利用しCSSのみでレスポンシブサイト作る まずはレスポンシブサイトで使う技術を知る レスポンシブで必要な知識と技術をまとめてみました。 サイトの仕様で内容は変わりますが「これだけ知っていれば…」というものを掲載します。 メディ
![どうしてもIE6,7,8にレスポンシブ対応をさせたい場合[HTML5編] | オレのWEBPAD](https://cdn-ak-scissors.b.st-hatena.com/image/square/e531c8e4d71a588c164e4be4802ea7f040f42bee/height=288;version=1;width=512/https%3A%2F%2Fwebpad.work%2Fwp-content%2Fuploads%2F2013%2F12%2Fie6.jpg)
うわぁIE8で表示がおかしい！その原因をチェックしてアドバイスしてくれるオンラインサービス -IE8 Linter
モダンブラウザを基準にページ制作をする人が増えてきましたが、IE8を完全に切るのはなかなか難しいのが現状です。 そんなIE8で、あれ表示がおかしいぞ！という時に、その原因のアドバイスをしてくれる便利なオンラインサービスを紹介します。
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10
無料でWindows・Mac OS X・iOS・Androidから最新のIEを体験できるMicrosoft公式アプリ「RemoteIE」
Windows・Mac OS X・iOS・Androidといったさまざまなプラットフォームから、最新バージョンのInternet Explorer(IE)の開発者向けプレビュー版(テクニカルプレビュー)を使用できるようになる無料のアプリケーションが「RemoteIE」です。 Announcing RemoteIE: Test the latest IE on Windows, Mac OS X, iOS and Android - IEBlog - Site Home - MSDN Blogs http://blogs.msdn.com/b/ie/archive/2014/11/02/announcing-remoteie-test-the-latest-ie-on-windows-mac-os-x-ios-and-android.aspx RemoteIEを使ってWindows・Mac
IE8以下を切り捨てれば使える便利なCSSプロパティー＆セレクター
2016年2月1日 CSS Webサイトを制作するにあたって、Internet Explorerのどのバージョンに対応させるかは、制作を始める前に話し合っておいた方がいい問題点のひとつです。私の場合2013年に入ってからはIE6やIE7に対応させる機会は皆無となり、IE8・IE9に対応させるかを議論しているところですが、皆さんはいかがでしょうか？今回はもしIE8を切り捨てる（IE9〜のサポート）なら使える便利なプロパティーやセレクターを紹介します。-ms-filter で対応できるものもありますが、filter の説明は割愛します :P ↑私が10年以上利用している会計ソフト！ IE8のシェア StatCounter Global Statsの調査によると、日本のブラウザバージョン別シェア（2013年10月）はIE10が30.78%で1位、Chromeが17.79%で2位、IE8は10.7
【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ
エンジニアの菊池です。 今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。 今回、初めてブログを投稿させていただくことになりました。 業務では主にフロントエンドの実装とマークアップ等を担当しています。 さて、Windows XPのサポート終了まで残り約8ヶ月となりました。 ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。 そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。 ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I
無料でMacでIEの表示テストをする方法
modern.IEでは仮想PCを使用したIEの表示テストツールが提供されてます。これを使用するとWindows以外のOSでも複数バージョンのIEのテストが行えます。 追記：modern.IEの日本語版ページが開設されました。 ホーム | Internet Explorer の検証がより簡単に | modern.IE はじめに modern.IEのVirtual toolsページではIEのテストツールが提供されてます。 「Local virtualization」では各OS、各仮想化ソフトウェア用のWindows&IEファイルが用意されてます。OSはWindows、Mac、Linux、仮想化ソフトウェアはVirtualBox、VMWare Fusion、Parallels、Virtual PCなどに対応しています。 ここではMacでVirtualBoxを使用してIEを起動させる方法を紹介しま
4辺が違う色のボーダーにborder-radius:50%を加えると…
タイトルのままですが、4辺が違う色のボーダーにborder-radius:50%を加えてサークル状にするとどうなるか知っていますか？私は先日知ったので紹介します。 border-radius:50%を加えてサークル状にするとこんな感じになります。border-radiusはIE8以下非対応ですので、下のは画像にしています。 かなり印象は変わります。当たり前といえば当たり前な気もしますが。で、transitionで回すと面白いです。 ということでサンプルを作ってみました。最近なぜかIEが起動しないのでIEの動作確認はしていません。。 せっかくなのでコードも載せておきます。 <a href="#" id="circle1">CSS<span></span></a> ボーダーだけを回すためspan要素を入れてボーダーを指定しています。ちょっとかっこ悪い気もしますが、他に方法が思いつかなかったので
透過PNGをIE6で表示する３つの方法 | 海外のホームページ作成＆進出支援の株式会社メディアウェイブ
デザイナーの植村です。 今や当たり前のように使われている透過PNGですが、 Internet Explorer 6以下のバージョンでは、透過が正常に再現されません。 そのためJavascript等を使って擬似的に再現する必要があるのですが、 そのやり方にも様々な選択肢があります。 今回は、その中でも特におすすめのものを３つピックアップし、 それぞれのメリットを挙げていこうと思います。 1, IE7.js http://code.google.com/p/ie7-js/ IE6以下のブラウザをよりWeb標準に近づけるスクリプトです。 透過PNGだけでなくXHTML/CSSの解釈も、 IE7のそれを再現できるようになります。 今回リストアップするものの中でも特に実装がお手軽に出来ます。 まずヘッダーに以下の記述を追加。 あとは透過させたいPNGのファイル名を「○○-trans.png」とするだ
WEB制作のIE対策いろいろ チートシートやHTML5/CSS3対応方法など | DECONCEPTER
かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。 なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できるかを苦悩させてくれた強敵（とも）だった。 昨今のHTML5バンザイWEB制作においては、最新機能を使ってWEBサイトを作る上でIEの表示や機能をどうするかという話題が常にモチキリだ。 そんな我々の心を離さないIEの対策をする上で一つ一つ表示を確認しながら作っていたら日がくれて定年を迎えてしまう。IE定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。 チート
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのプラグインやカスタマイズ情報を中心に紹介 - IMAGINATION DESIGN BLOG