Explorerに対応しなければいけない案件が多いですね。IEでは未対応のCSSプロパティがあったり、表示が崩れたりといった問題がよく起こります...。そんな時に使える、ブラウザがIEの時のみにスタイルを指定できるメディアクエリを紹介します!JavaScriptは一切不要で、CSSだけで対応できるので便利ですね。*/}この記述をすることで、IE10・11にのみスタイルを適用することができます。max-widthやmin-widthなどの条件を付け足したい場合は、以下のように記述してください。*/}これでIE10・11のみ&画面の最大幅が600pxの場合にのみ適用されるようになりました。メディアクエリが適用されているかを、IEを含む5つのブラウザでチェック以下に、IEのみ文字色を赤に、それ以外のブラウザでは文字色を黒にするCSSコードを用意しました。Firefoxで見た目をチェックしていきます。指定通り、IEでは文字色が赤になりましたね。検証結果:IEにのみスタイルが適応されているIE...赤Edge...黒Chrome...黒Safari...黒Firefox...黒IEでは文字が赤色、それ以外のブラウザでは黒色になっていましたね。これでメディアクエリがしっかり適用されていることがわかりました。Sassの@mixinを使用して記述を簡潔にするSassを使用している方は、@mixinを使用することでコード量を格段に減らすことができます。}}まずは上記のようにIE専用メディアクエリの@mixinを定義します。*/}あとは@includeで呼び出してあげるだけで、何度でも使い回すことが可能です。Sassの@mixinを使用した場合と、CSSで書く場合のコード量を比べてみましょう。}}このように、コードの記述量がかなり減っていますね。このメディアクエリを使用する回数が多ければ多いほど、その差は大きくなります。Sassを使用している方は、@mixinで効率的に記述しましょう。以下の記事では、自分が実際にSassを独学したときに使用した教材を紹介していますので、興味がある方はぜひ参考にしてみてください。HTML/CSSを学習している人は、Sassというのを聞いたことがあるのではないでしょうか。Sassとは、CSSを効率的に書けるように設計された言語です。Sassを導入することで...IE9以下には、HTMLの条件付きコメントを使用する先程紹介したメディアクエリは、IE10以降にしか対応できません。IE5〜IE9に特定のスタイルを指定するには、HTMLの条件付きコメントを使用します。IE]>と<![endif]-->で囲うことで、IE5~IE9のみに適用するコードを書くことができます。IE5~IE9専用のスタイルシートを読み込むときに、以下のようにして使えますね。href="ie.css"><![endif]--></head>この条件付きコメントはIE10以降には対応していないので、最初に紹介したCSSメディアクエリを使用しましょう。【まとめ】IE10・11にはCSSメディアクエリを、それ以外はHTMLの条件付きコメントで対応可能!以上で、IE10・11にのみ専用のスタイルを適用するメディアクエリの書き方と、IE9以下に対応する方法を紹介しました。一度それぞれのコードを載せておきます。IE5~IE9に指定するコードを記入<![endif]--></head>IEに対応させる場合は役に立つかと思いますので、ぜひこれらを利用してみてください。記事が役に立ったらサポートしてくださいWeb制作に関する記事案を募集中!Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。要望が多かったものは解説記事を作成します。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。scale()で要素を上下・左右に反転させる方法CSS【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法CSS起弥フロントエンドエンジニア兵庫県出身のフリーランスフロントエンドエンジニアです。Web制作を通して気づいたこと、学んだことを発信していきます。当サイトに関する質問はこちら»ポートフォリオサイトWeb制作のポートフォリオサイトです。Web制作の実績等はこちらから確認いただけます。Note」を新設しました2022年4月16日パートナーとして一緒に仕事してくださるデザイナー様を募集中です2021年8月5日GatsbyJSでポートフォリオサイトをリニューアルしました。(2)コーディング代行「CodeHive」コーディング代行チーム「コードハイブ」を立ち上げました。