CSSメディアクエリで Internet Explorer 10/11 を指定する (CSS Tips)
CSSのメディアクエリで、Internet Explorer 10, Internet Explorer 11 の場合を指定するコードを紹介します。 概要 CSSで Internet Explorer 10, Internet Explorer 11 の場合に限り、スタイルを変更したい場合があります。ユーザーエージェントを判定してプログラムで出し分けすることもできますが、メディアクエリを利用することで、CSSの記述のみで Internet Explorer 10, Internet Explorer 11 でのスタイルを指定できます。 書式 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { ...(IEで適用する スタイル) }
CSSをIEとMicrosoft Edgeにだけ適用させる5つの方法、CSS記述方法やHTML条件分岐など | あすたまいず
CSSをIEとMicrosoft Edgeにだけ適用させる5つの方法、CSS記述方法やHTML条件分岐など IEと、Microsoft Edgeだけ形が崩れてしまったりする場合の対処法-CSS編IEはホームページを制作する側からすると迷惑以外なにものでもない。とはいえ、無視し続けるわけにもいかないので、しぶしぶ対応するしかない。 IEに対してちゃんと動いたり表示されたりするようにする事をIEハックと言ったりするが、今回はCSSでIEハックする方法を5つ紹介。 JavaScriptを使ってIEハックする方法もあるが、今回はより簡単なCSSの方法を紹介。 1. CSSファイルの記述でIEハックする方法例えば、リスト表示のされかたの違いを例に。 ul li { margin-bottom: 5px; /* Chrome、FireFox等 */ margin-bottom: 10px\9; /*
CSS Gridで実装する際にはこの点に注意、IE11以下・Edge15以下をサポートするフォールバックのテクニック
CSS Gridは非常に便利ですが、唯一の欠点はIE11以下・Edge15以下のユーザーをサポートする必要がある場合に期待通りに機能しないことです。 CSS Gridでページのレイアウト・グリッド・コンポーネントを実装する際に、IE11以下・Edge15以下をサポートするフォールバックのテクニックを紹介します。 Grid to Flex Grid to Flex -GitHub CSS Gridがレイアウトで優れている点は、水平方向と垂直方向の両方を制御して、レイアウトができるという点です。 Flexboxでは両方を制御することはできないため、その点に注意します。 CSS Grid, Flexboxについて学びたい時は、下記の記事がオススメです。 5分で完璧に分かる！CSS Gridの基本的な使い方を解説 CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説 CSS
CSS Grid Layout はIE/Edgeで何とかなるのか？という声が多い件 - 40代からのフロントエンドエンジニアリング。
一昨日書いた CSS Talk vol.3 において、私のセッション後の質疑応答やアンケートの意見で「IEだとしんどいのか」「IEって結局非対応？」という声が非常に多かったです。 IEのシェアは世界規模だと1割を切っている所まで低下していますが日本だとまだまだ多く(3月現在で約24％・StatCounter調べ)、Webサイト制作やアプリ開発などで気にされる方もまだまだ多いようです。 ということで、IE/Edgeでの対応について改めて調べ直しました。 ……先に結論。 相当しんどい。 Microsoftのサイトの「グリッドレイアウト」を見るとIE10からの対応となっているのですが、ベンダープレフィックスをつけるだけでなくプロパティ名が違うものも幾つかあったり。 以下にIE/Edge対応のための書き換えの一部を記載します。 親要素 display:grid → display: -ms-gri
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
IE9環境でIE6/IE7/IE8/IE9表示する方法(共存）| 某氏の猫空
IE9やIE10環境でIE6/IE7/IE8/IE9表示する方法(共存）投稿 : 2011-07-29更新 : 2014-01-16 追記：2014/01/16 ・IE11で、IE7/IE8/IE9/IE10をエミュレーションで表示確認するときの注意事項 IE11も互換設定をすることで、IE7/IE8/IE9/IE10あたりを表示できるみたいです。 追記：2013/03/20 IE10にも、IE7/IE8/IE9表示するモードがついています。 ・Windows7にIE10を導入する前に知っておきたいこと 【IE9に戻す方法、IE10環境でのIE9表示】 IE9自体に、IE7/IE8で表示するモードがついていました。ツールボタンの「開発者ツール」を選択するか、[F12]キーを押すと、ブラウザ下部に右上のような画面が出てきます。 ブラウザモードというのが、相手にブラウザーのバージョンを知らせる
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
IEの異なるバージョンをテストする環境のまとめとそれぞれの特徴
IE6, IE7, IE8などIEの異なるバージョンをテストするアプリケーション・環境のまとめとそれぞれの特徴を紹介します。 Internet Explorer 7のキャプチャ [ad#ad-2] 「Sandboxed IE Browsers from Spoon」から各アプリケーション・環境のまとめと特徴をピックアップし、いくつか追加しました。 IETester Virtual PC IE Super Preview IE Collection マルチPC環境 IETester IETester 対応するIEのバージョン IE5.5 IE6 IE7 IE8 IE9preview 主な特徴 異なるIEのバージョンをタブで同時に表示することが可能なアプリケーションです。 プリントプレビューのテスト、ポップアップによるインタラクション以外のテストは万事良好に動作します。FlashとCSSのフィ
【Tool】IE5.5,IE6,IE7,IE8の表示結果が同時に確認できる「IE Tester」
TOP > Tool > 【Tool】IE5.5,IE6,IE7,IE8の表示結果が同時に確認できる「IE Tester」 ブラウザも多様性を増してきて、新旧のバージョンを合わせるとかなりの数になり、ブラウザの中でも大きなシェアを獲得しているインターネットエクスプローラも各バージョンでの誤差やバグはWEB制作者にとって頭が痛いところだと思います。 今日紹介する「IETester」はIEの旧バージョンから最新版までの表示の違いを同時に確認できるソフトウェアです。各バージョン間の誤差を修正するための作業は非常に手間ですが、このツールを使うことで、かなり手間が軽減されるのではないでしょうか？ 詳しくは以下 IEのバージョンの切り替えは、「New Tab」から切り替えることができ、すべてのバージョンを4つならべて表示させることも可能です。 最近ブラウザのバージョン間のバグではまってしまって
min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R]
min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript minmax.jsはIE6以下でmin-width,max-width, min-height , max-heightのプロパティを利用可能にするjsライブラリになります。 CSS2では以下のプロパティが定義されているがIE6には実装されていない。 max-width - 要素の横幅の最大値を指定する min-width - 要素の横幅の最小値を指定する max-height - 要素の高さの最大値を指定する min-height - 要素の高さの最小値を指定する minmax.jsはこれらのプロパティを利用可能にするjsライブラリです。 設置方法 設置方法はダウンロードしたminmax.jsをhead要素内などで読み込むだけです。 <script type="
![min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
IE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
News on Digital Marketing and Technologies
Debugbar is an IE (Internet Explorer) web development bar, divided in a toolbar and a sidebar. It aims to help you debugging your website faster or to analyse quickly any web page. The Toolbar The toolbar is a the top of the IE browser. This bar contains several features to ease your debug session: Customize the DebugBar Check for updates Alert on javascript errors A must one: send page screenshot
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
| ＾＾ |秒刊SUNDAY | WEB開発者がSleipnirを絶対に使ってはいけない７つの理由
2009年04月29日 WEB開発者がSleipnirを絶対に使ってはいけない７つの理由 カテゴリ：WEBデザイン Sleipnirは使いやすい、すばらしい･･･などと絶賛するユーザがいますが、果たして本当にそうなのでしょうか、私はそれは有り得ないと断言します。 ◆読む前に WEB標準だの、コーディングだのAcidだの･･･訳がわからない方は、そのままSleipnirを使っていてOKです。 判りやすく言うと、SleipnirはアナログSafari、Firefoxなどは地デジぐらいの違いがあります。 という説明をしますので、開発者以外の方には『ふーん』程度に思っていてください。 では。 １：表示結果がWeb標準でない。 上の写真は、左から『Firefox、Safari、IE6、Sleipnir』をAcidという確認ツールで見比べた結果です。 Firefox、Safariについてはほぼ同じ
Firefox3でiframeの代わりにobjectを使っていると - RinGoon POP!!
XHTML1.1でiframeタグが使えないから、などの理由で、代わりにobjectタグを、 <object type="text/html" classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13"> といった感じでclassidを含めて使っていると、Firefox 3では表示されないようです。（classidを使わないobjectタグは意図通り表示されます。） このclassidはActiveXコントロールのid。昔のIE向けのようですが、IE5.5以降はtype="text/html"だけで表示してくれるようです。 -- 追記 classidを削除したときの表示状況 Firefox3 OK Firefox2 OK IE7 OK IE6 OK Safari OK Opera9.5 OK Firefox1.5(Linux) OK
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでスタイルをIEのみ・Firefoxのみ・Chromeのみ・Safariのみに適用する方法 | TechMemo
