投稿日: | 最終更新日:
条件付コメントでIEのバージョンごと分岐する
条件付コメントとは、コメントで囲われた部分の表示・非表示をバージョンによって分けることです。例えば、IE用のバージョンごとに読み込むCSSをかえるときに使用します。レスポンシブWEBデザインでよく使います。
※条件付コメントは、IEの独自仕様です。
条件付コメント書式 (例
・ブラウザが、IE7のときに「style.css」を読み込みます。
・始まりに<!--[if IE 7]>を記述します。
・終わりに<![endif]-->を記述します。
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="style.css"> <![endif]-->
条件付コメント書式 解説
指定のバージョン
<!--[if IE 6.0]>内容<![endif]-->
ブラウザが、IE6のとき実行します。
指定のバージョン以上
<!--[if gte IE 6.0]>内容<![endif]-->
ブラウザが、IE6の以上とき実行します。
指定のバージョン以下
<!--[if lte IE 6.0]>内容<![endif]-->
ブラウザが、IE6の以下とき実行します。
指定のバージョン未満
<!--[if lt IE 6.0]>内容<![endif]-->
ブラウザが、IE6の未満とき実行します。
バージョン分岐早見表
・○印は、対応可能なバージョンです。
指定のバージョン
条件付コメント | IE6 | IE7 | IE8 | IE9 |
---|---|---|---|---|
<!--[if IE 6.0]> | ○ | |||
<!--[if IE 7.0]> | ○ | |||
<!--[if IE 8.0]> | ○ | |||
<!--[if IE 9.0]> | ○ |
指定のバージョン以上
条件付コメント | IE6 | IE7 | IE8 | IE9 |
---|---|---|---|---|
<!--[if gte IE 6.0]> | ○ | ○ | ○ | ○ |
<!--[if gte IE 7.0]> | ○ | ○ | ○ | |
<!--[if gte IE 8.0]> | ○ | ○ | ||
<!--[if gte IE 9.0]> | ○ |
指定のバージョン以下
条件付コメント | IE6 | IE7 | IE8 | IE9 |
---|---|---|---|---|
<!--[if lte IE 6.0]> | ○ | |||
<!--[if lte IE 7.0]> | ○ | ○ | ||
<!--[if lte IE 8.0]> | ○ | ○ | ○ | |
<!--[if lte IE 9.0]> | ○ | ○ | ○ | ○ |
指定のバージョン未満
条件付コメント | IE6 | IE7 | IE8 | IE9 |
---|---|---|---|---|
<!--[if lt IE 7.0]> | ○ | |||
<!--[if lt IE 8.0]> | ○ | ○ | ||
<!--[if lt IE 9.0]> | ○ | ○ | ○ |
注意点
・このIE条件付コメントは推奨されていません。
多用は避けましょう。
・IE1~4,10~は条件付コメントの機能が実装されていません。
コメントと同様に扱われます。
トラックバック用のURL
プロフィール
最近の投稿
人気記事
カテゴリー
- Python 88
- 制作 56
- RaspberryPi 41
- WordPress 40
- Django 32
- Linux 24
- VPS 22
- PHP 20
- JavaScript 20
- HTML・CSS 18
- 仮想環境 15
- レスポンシブデザイン 13
- WEB全般 11
- AWS 10
- マイコン 9
- Webサービス 8
- 統合開発環境 8
- 起業・設立 7
- jQuery 7
- SEO 6
- C# 6
- 携帯サイト 5
- heroku 5
- デザイン 5
- PyCharm 5
- symfony 4
- node.js 4
- 機械学習 4
- illustrator 4
- Mac 4
- Visual Studio 4
- ツール 3
- データベース 3
- facebook 3
- Go言語 3
- PC 3
- Docker 3
- 作業効率化 3
- Webスクレイピング 3
- photoshop 3
- Cloud9 3
- インフラ 3
- Webサーバー 2
- movie 2
- ネットワーク 2
- Java 2
- ドローン 2
- コンテナ 2
- Kali Linux 2
- コマンド 2
- XSERVER 2
- MariaDB 2
- 動画製作 2
- DaVinci Resolve 2
- 知識 1
- アフィリエイトノウハウ 1
- スマートフォン 1
- アクセス解析 1
- windows 1
- 役立つ本・書籍 1
- git 1
- アニメ 1
- Rhino 1
- D3.js 1
- アニメーション 1
- TypeScript 1
- データサイエンス 1
- Nginx 1
- ownCloud 1
- ESP32 1
- API 1
- ネットワーク 1
- pydata 1
- ムームードメイン 1
- S3 1
- JSON 1
- Bootstrap 1
- SSL 1
- 音楽 1
- PCDJ 1
- バージョン管理システム 1
- 数学 1
広告